An example how to add a separate JS bundle entry point for RN Storybook and how to switch between entry points from the Dev Menu:
A separate entry point helps to ensure that application's bundle won't include any Storybook code.
Also switching between Storybook and app is very straightforward and convenient and it's possible to keep the app and Storybook open in different Simulators / Emulators at the same time.
Check this diff: https://github.com/zubko/react-native-storybook-with-dev-menu/commit/7486060842a15d12ecdd5256f2fb0ddddc7e0e32
Generally the process is:
- Add Storybook JS bundle entry point
- For Android and iOS:
- Add extra files to the native projects
- Change the existing native files
Probably it should be possible to move the code to a separate NPM package to make the integration a bit easier, but I'm lacking some knowledge of native Android module part of RN to get the DevSupportManager instance and application context in the module at the proper moment of time when they are constructed, so any suggestions are welcome.
Anyways, the decision of the JS entry point happens in the native app's code, so some manual changes to the native code of the app will be needed in any case.
These packages helped with some native code ideas:
https://github.com/avishayil/react-native-restart
https://github.com/zoontek/react-native-dev-menu
Also this article was quite helpful:
https://medium.com/capriza-engineering/extending-react-natives-dev-menu-c084fc93717d