DEV Community

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

View post
Collapse
 
pra3t0r5 profile image
Pra3t0r5 •

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.
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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>
    )
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
andreimelo profile image
Andrei Melo •

try this, please see the following :
step

  1. npm install @babel/plugin-transform-react-jsx or yarn add @babel/plugin-transform-react-jsx

  2. go to config-overrides.js : Then add the package installed to plugins...
    please see below,

const fs = require('fs');
const path = require('path');
const webpack = require('webpack');

const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);

// our packages that will now be included in the CRA build step
const appIncludes = [
resolveApp('src'),
resolveApp('../common/src'),
resolveApp('../../node_modules/@react-navigation'),
resolveApp('../../node_modules/react-navigation'),
resolveApp('../../node_modules/react-native-gesture-handler'),
resolveApp('../../node_modules/react-native-screens'),
];

module.exports = function override(config, env){
config.module.rules.push({
test : /.(js|mjs|tsx|ts)$/,
exclude : /@babel(?:\/|\{1,2})runtime/,
use : {
loader : 'babel-loader',
options : {
babelrc : false,
configFile : false,
compact : false,
// The configration for compilation
presets : [
[
'module:metro-react-native-babel-preset',
], // Add this line,
[
require.resolve('babel-preset-react-app/dependencies'),
{ helpers: true },
],
],
cacheDirectory : true,
plugins : [
'@babel/plugin-proposal-class-properties',
'@babel/plugin-proposal-object-rest-spread',
'@babel/plugin-transform-flow-strip-types',
'@babel/plugin-transform-react-jsx'
[
'module-resolver',
{
alias : {
'^react-native$' : 'react-native-web',
},
},
],
],
},
},
});
return config;
};

thanks

Collapse
 
andreimelo profile image
Andrei Melo •

paste it to *config-overrides.js

Collapse
 
niteshagarwal_ profile image
Nitesh Agarwal •

This JS is not valid (check module-resolver)