Don't require JavaScript modules dynamically

[jsteiner]

In release mode, React Native's packager replaces the module name passed to require with an ID. This means that requiring a dynamic module name won't work in release mode, because the module name can't be found.

[benansell]

I also found this recently when upgrading to the latest version of react-native. I have gone down the route of adding the require statements to the index.*.js files and passing them into the elm app initialisation code so that they can be used by the app to create the custom components.

const modules = {
  'Animated': require('Animated'),
  'NavigationExperimental': require('NavigationExperimental'),
  'NavigationCardStack': require('NavigationCardStack'),
  'NavigationHeader': require('NavigationHeader'),
  'NavigationHeaderTitle': require('NavigationHeaderTitle')
};

const component = Elm.Main.start(modules);

This has worked well for me by ensuring only the modules required by the app are picked up by the packager. It also allows easier extension / inclusion of 3rd party components (like gl-react-native) without requiring each app to know about them. However, the obvious downside is that it more complex for people to get started with elm-native-ui as they would need to understand which require statements are needed for their app.

[ohanhi]

Great, thank you good people!

[ferologics]

@jsteiner I'm trying to add Lottie to the project as 3rd party component. Could anyone provide an example project please? @benansell you mention gl-react-native, could you elaborate on the process a little bit?

[jsteiner]

@ferologics here's an example of wrapping a tab view library