The latest articles on DEV Community by Avinash kumar (@akavinashsingh). https://dev.to/akavinashsingh https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4135037%2Fe086566f-9d98-4b0a-8bf0-bb7888f4cf98.png https://dev.to/akavinashsingh en Avinash kumar Mon, 21 Sep 2026 05:52:35 +0000 https://dev.to/akavinashsingh/splitting-one-react-native-app-into-two-the-bugs-that-have-no-error-message-d18 https://dev.to/akavinashsingh/splitting-one-react-native-app-into-two-the-bugs-that-have-no-error-message-d18 <p>We split a single React Native app that carried two user roles (customer and service provider) into two separate apps sharing a package. Both are live on Google Play and the App Store. RN 0.84, React 19, npm, bare workflow, no Expo.</p> <p>Every monorepo guide I found stops at <code>watchFolders</code>. That gets you a bundle that builds. It does not get you an app that works.</p> <h2> The bug that cost the most time </h2> <p>Sign-in on a shared auth screen returned 200. A token was written to storage. The app sat on the login screen.</p> <p>Nothing threw. Nothing logged. The network tab was clean.</p> <p>The cause was two copies of zustand. Metro resolves a bare import from the importing file's own location, so <code>shared/src/store/authStore.ts</code> walked up to <code>repo-root/node_modules/zustand</code>, while the app code walked up to <code>app-customer/node_modules/zustand</code>. Two module instances, two stores. The shared auth screen wrote to one. The app shell read the other.</p> <p>Both resolutions succeeded. That is exactly why there is no error to search for.</p> <h2> The same mechanism, four more ways </h2> <ul> <li> <strong>Two copies of React.</strong> This one at least crashes, with <code>Cannot read property 'current' of null</code> thrown from a shared component that is obviously correct.</li> <li> <strong>Two copies of axios.</strong> Interceptors are instance state, so auth headers silently stop being attached on requests made from shared code.</li> <li> <strong>Native modules registering twice.</strong> AsyncStorage, geolocation, vector icons. Symptoms vary and none of them name the cause.</li> <li> <strong>A green <code>tsc</code> that proves nothing.</strong> Two copies of a module have identical types. The type checker's job is to agree that they match, and it will do that job perfectly while the app is broken.</li> </ul> <h2> The fix </h2> <p>A <code>resolveRequest</code> in each app's <code>metro.config.js</code>, pinning every dependency the shared package imports to that app's own copy. The list is short and finite, and you should derive it with grep rather than from memory.</p> <h2> The full writeup </h2> <p>I put the whole thing in a repo, including the npm side (the shared package declares zero dependencies, and why declaring <code>peerDependencies</code> instead gives you a permanent <code>ERESOLVE</code>) and the Android side (a workspace install intermittently left a partial copy of <code>@react-native/gradle-plugin</code> in the app's own <code>node_modules</code>, shadowing the complete one, and the build died at settings evaluation in about a second).</p> <p><a href="https://github.com/akavinashsingh/react-native-two-app-split" rel="noopener noreferrer">https://github.com/akavinashsingh/react-native-two-app-split</a></p> <p>MIT, nothing to install. If any of it is wrong for your setup I would rather hear it than not.</p> reactnative javascript monorepo webdev