Adding an Example App to Your React Native Library
Article Summary
Satyajit Sahoo tackles one of React Native library development's most frustrating challenges: setting up an example app that actually works. Sounds simple, but Metro Bundler has other plans.
Creating example apps for React Native libraries hits unexpected roadblocks due to Metro Bundler's limitations around symlinks, module imports, and duplicate naming. Sahoo walks through a practical configuration approach that works around these constraints using Babel and Metro config tweaks.
Key Takeaways
- Metro Bundler blocks symlinks, external imports, and creates duplicate module warnings
- Use babel-plugin-module-resolver to alias your library in the example app
- Configure watchFolders and blacklist parent node_modules to avoid conflicts
- Hot reload works instantly after setup for rapid development iteration
A specific Metro Bundler and Babel configuration lets you build functional React Native library examples with live reloading despite Metro's architectural limitations.
About This Article
React Native library developers hit a wall with Metro Bundler. It won't import modules from outside the current directory and rejects symlinks because of watchman limitations. This makes setting up example apps more complicated than it needs to be.
Satyajit Sahoo suggests editing metro.config.js to add watchFolders pointing to the parent directory. You also need to blacklist the parent node_modules and then list specific modules like react-native, react, prop-types, and lodash under providesModuleNodeModules.
Now developers can run exp start or yarn start from inside the example folder and see changes to src files reload instantly. This lets you iterate quickly while building a library without waiting for manual rebuilds.