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
- MyApp
shared
- react-native
- components
- atoms
- Button
- atoms
- components
- react-native
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?