1

I have a monorepo using yarn workspaces with a react native app and a library with components. When I import my custom Button component from the library to my app the onLongPress, onPressIn and onPressOut are not triggered on the web using react native web. The onPress event works fine on the web.

What i tried

On iOS and Android (via Metro) everything works fine. If I copy the button component into my app folder and import it from there the events are also working. The problem only occurs when importing the Button from the component Library and running it on the web. (The Button is only returning a Pressable and logging the onPress methods in the console)

Versions

  • react-native: 0.72.0

  • react-native-web: 0.19.6

  • react: 18.2.0

Project Structure

  • apps

    • MyApp
      • App.tsx

      • index.web.js

      • webpack.config.js

  • shared

    • react-native
      • components
        • atoms
          • Button
  • node_modules

    webpack.config.js

module.exports = {
    devtool: 'source-map',
    entry: {
        app: path.join(__dirname, 'index.web.js'),
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/',
        filename: 'main.bundle.js',
    },
    resolve: {
        alias: {
            'react-native$': 'react-native-web',
        },
        extensions: [
            '.web.ts', '.web.tsx',
            '.web.mjs', '.web.js',
            '.web.jsx', '.ts',
            '.tsx', '.mjs',
            '.js', '.jsx',
            '.json', '.wasm'
        ],
        modules: [path.resolve(__dirname, '../..'), 'node_modules'],
    },
    module: {
        rules: WebpackRules,
    },
    plugins: [
        ...WebpackPlugins,
        new HotModuleReplacementPlugin(),
    ],
}

WebpackRules

{
    test: /(\.web)?\.[jt]sx?$/,
    include: [
        path.resolve(appDirectory, 'index.web.js'),
        path.resolve(appDirectory, 'App.tsx'), 
        path.resolve(appDirectory, './'),
        path.resolve(appDirectory, '../../shared/react-native'),
        path.resolve(appDirectory, '../../node_modules'),
        ...compileNodeModules,
    ],
    use: {
        loader: 'babel-loader',
        options: {
            cacheDirectory: true,
            presets: [
                'module:metro-react-native-babel-preset',
                '@babel/preset-react',
                '@babel/preset-typescript',
            ],
            plugins: [
                'react-native-web',
                [
                    'module-resolver',
                    {
                        alias: {
                            '^react-native$': 'react-native-web',
                        },
                    },
                ],
            ],
        },
    },
};

Am I missing something in my webpack config regarding the component library?

Max Black
  • 21
  • 3

0 Answers0