loading...

re: Tutorial: How to share code between iOS, Android & Web using React Native, react-native-web and monorepo VIEW POST

FULL DISCUSSION
 

Hi man, absolutely amazing tutorial, my dev team managed to get it up an running in no time.
However, we are facing two problems, one is related to babel plugins, no matter what i did, i could not add the @babel/plugin-transform-react-jsx, therefore the web package crashes:

../commons/pages/tabs/tabs.page.js
SyntaxError: /home/praetors/Projects/node/proyectoSembrar/packages/commons/pages/tabs/tabs.page.js: Support for the experimental syntax 'jsx' isn't currently enabled (16:9):

  14 | const dummyTab = () => {
  15 |     return (
> 16 |         <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
     |         ^
  17 |             <Text>Test</Text>
  18 |         </View>
  19 |     );

Add @babel/plugin-transform-react-jsx (https://git.io/vb4yd) to the 'plugins' section of your Babel config to enable transformation.

The other problem comes with react-native-vector-icons: ^7.0.0, we added the:

apply from: "../../../../node_modules/react-native-vector-icons/fonts.gradle"

but we could not get them to render in android, instead it shows the crossed box, here is how we implemented it:

import Icon from 'react-native-vector-icons/Ionicons';

export default function Tabs() {
    return (
        <Tab.Navigator
           //...
            screenOptions={({ route }) => ({
                tabBarIcon: ({
                    focused, color, size
                }) => {
                    let iconName;
                    switch (route.name) {
                        case 'Inicio':
                            iconName = focused ? 'ios-home' : 'ios-home-outline';
                            break;
                    //...
                    }
                    return <Icon name={iconName} size={size} color={color} />;
                }
            })}>
            <Tab.Screen name="Inicio" component={Home} />
             //...
        </Tab.Navigator>
    )
}
Code of Conduct Report abuse