How do i use react-native-gesture-handler in both my mini app and host app?

[Nazehs]

Ask your Question

I am currently experiencing an issue with repack when i tried using react-native-gesture-handler in both my host app and mini app. I keep getting the attached screenshot error and i am wondering what is the usage for react-native-gesture-handler in repack.

[jbroma]

Hi @Nazehs,

from your description I see that you are using Module Federation. In this case, since react-native-gesture-handler contains a native module and host-app needs to provide all packages with native modules. The library needs to declared as shared dependency in both webpack.config files (host and mini-app(s)). In your host app add the following to MF configuration:

new Repack.plugins.ModuleFederationPlugin({
        name: '<your_hostapp_name>',
        shared: {
            "react-native-gesture-handler": {
               singleton: true,
               eager: true
            }
        },
      }),

and in your mini-app it should be declared with eager set to false:

new Repack.plugins.ModuleFederationPlugin({
        name: '<your_hostapp_name>',
        shared: {
            "react-native-gesture-handler": {
               singleton: true,
               eager: false
            }
        },
      }),

[jbroma]

@Nazehs did that help with resolving your issue?

[Nazehs]

@jbroma thank you but after trying on my own I did change the implementation that was using the package to use a different implementation. I would try it and see if that works.

[jbroma]

@Nazehs any chance you could check whether this resolves it? It would be good to close it with some sensible resolution for others to find in case they run into it as well. If not, I'll just close it as it is.

[Nazehs]

@jbroma Thank you I have tried this again and it does work.