How Callstack Adds an Example App to Your React Native Library
Original post 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.
Continue reading
Expo
Sep 14, 2026
More from Callstack
Integrating React Native Storybook 10 with Your App
Callstack
Dec 12, 2025
Also on React Native
Expo without EAS: Scaling the React Native Developer Experience of an App with 90M Users
Doctolib
May 10, 2026
What This Article Covers
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.
This page summarizes “Adding an Example App to Your React Native Library” by Callstack, published Oct 12, 2017. All credit for the original work goes to the authors.
