title: How to integrate react-native web to an existing react native project
body: <p>We have a react-native project implemented using <code>typescript</code>, <code>react-navigation</code>, <code>react-native-gesture-handler</code>, <code>redux/toolkit</code> as the main packages</p>
  <p>recently we integrated react-native-web into our project, but it is not running correctly.</p>
  <p>there are several problems with our project:</p>
  <ol>
  <li><p>we cannot load custom modules when we import them. for example:</p>
  <pre><code>import MyCustomComponent from './components/MyCustomComponent'
  
  &lt;View style={{flex: 1, backgroundColor: 'green'}}&gt;
    &lt;MyCustomComponent/&gt;     &lt;--- does not show up, event when it contains a simple View component, we will see a blank screen
  &lt;/View&gt;
  </code></pre>
  <p>but when I define <code>MyCustomComponent</code> inside the current file, it shows up with no problem:</p>
  <pre><code>function MyCustomComponent() {
     return(
       &lt;View style={{flex:1, backgroundColor: 'yellow'}}&gt;&lt;/View&gt;
     )
  }
  
  export default function MyMainComponent() {
       return (
          &lt;View style={{flex:1, backgroundColor: 'green'}}&gt;
             &lt;MyCustomComponent/&gt;      &lt;---- this shows up
          &lt;/View&gt;
       )
  }
  
  </code></pre>
  </li>
  <li><p>anything that goes inside the redux <code>Provider</code> will not show up any more.</p>
  </li>
  </ol>
  <p>I think our <code>webpack</code> configuration is wrong, but since I'm not expert in web development, I need some help to figure out what's wrong. here is our webpack configuration:</p>
  <pre><code>const path = require('path');
  
  const webpack = require('webpack');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  const appDirectory = path.resolve(__dirname);
  const {presets} = require(`${appDirectory}/../babel.config.js`);
  
  const compileNodeModules = [
    // Add every react-native package that needs compiling
    'react-native-gesture-handler',
    'react-redux',
    'react-native-reanimated',
    'react-native-confirmation-code-field',
    'react-native-calendars',
    '@react-native-google-signin/google-signin',
    'react-native-compressor',
    'react-native-swipe-gestures',
    '@react-native-async-storage',
    'react-native-shared-element',
    '@react-navigation',
    'react-native-material-menu',
    '@reduxjs/toolkit',
    'react-navigation-shared-element',
    'react-native-collapsible-tab-view',
    'react-native-image-crop-picker',
    '@react-native-community',
    'react-nativbe-safe-area-context/lib',
    'react-native-screens',
  ].map(moduleName =&gt;
    path.resolve(appDirectory, `../node_modules/${moduleName}`),
  );
  
  const babelLoaderConfiguration = {
    test: /\.js$|tsx?$/,
    // Add every directory that needs to be compiled by Babel during the build.
    include: [
      path.resolve(__dirname, '../index.web.js'), // Entry to your application
      path.resolve(__dirname, '../src/index.web.tsx'), // Change this to your main App file
      path.resolve(__dirname, '../src'),
      ...compileNodeModules,
    ],
    use: {
      loader: 'babel-loader',
      options: {
        cacheDirectory: true,
        presets,
        plugins: ['react-native-web'],
      },
    },
  };
  
  const svgLoaderConfiguration = {
    test: /\.svg$/,
    use: [
      {
        loader: '@svgr/webpack',
      },
    ],
  };
  
  const tsLoaderConfiguration = {
    test: /\.(ts|tsx|web.ts|web.tsx)?$/,
    use: [
      {
        loader: 'ts-loader',
        options: {
          transpileOnly: true,
        },
      },
    ],
  };
  
  const imageLoaderConfiguration = {
    test: /\.(gif|jpe?g|png)$/,
    use: {
      loader: 'url-loader',
      options: {
        name: '[name].[ext]',
        esModule: false,
      },
    },
  };
  
  module.exports = {
    entry: {
      app: path.join(__dirname, '../index.web.js'),
    },
    output: {
      path: path.resolve(appDirectory, 'dist'),
      publicPath: '/',
      filename: 'arcelor.bundle.js',
    },
    resolve: {
      extensions: ['.web.tsx', '.web.ts', '.tsx', '.ts', '.web.js', '.js'],
      alias: {
        'react-native$': 'react-native-web',
      },
    },
    module: {
      rules: [
        babelLoaderConfiguration,
        imageLoaderConfiguration,
        svgLoaderConfiguration,
        tsLoaderConfiguration,
      ],
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: path.join(__dirname, './index.html'),
        filename: 'index.html',
        inject: 'body',
      }),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.DefinePlugin({
        // See: https://github.com/necolas/react-native-web/issues/349
        // __DEV__: JSON.stringify(true),
        __DEV__: process.env.NODE_ENV !== 'production',
        process: {env: {}},
      }),
    ],
  };
  
  </code></pre>
  <p>I'm using <code>webpack@^5.65.0</code></p>
  <p>could anyone help me figure out what is the problem and how can I make <code>react-native-web</code> work with our project? thanks</p>