{"id":74845,"date":"2025-09-02T11:23:25","date_gmt":"2025-09-02T05:53:25","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=74845"},"modified":"2025-09-02T12:30:54","modified_gmt":"2025-09-02T07:00:54","slug":"upgrading-to-react-natives-new-architecture-v0-79-3-a-complete-guide","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/upgrading-to-react-natives-new-architecture-v0-79-3-a-complete-guide\/","title":{"rendered":"Upgrading to React Native\u2019s New Architecture (v0.79.3): A Complete Guide"},"content":{"rendered":"<h1>Introduction<\/h1>\n<p>With the evolution of React Native, the New Architecture brings significant performance and maintainability improvements through features like\u00a0<strong>TurboModules<\/strong>,\u00a0<strong>Fabric<\/strong>, and\u00a0<strong>C++<\/strong> <strong>shared logic.<\/strong> Upgrading to this architecture can seem intimidating\u2014but with the right strategy, it&#8217;s achievable.<\/p>\n<p>In this blog, I\u2019ll walk you through\u00a0<strong>two practical approaches<\/strong> to upgrading your project to the New Architecture in React Native, the\u00a0<strong>recommended approach<\/strong>, the\u00a0<strong>challenges I faced<\/strong>, and how I overcame them.<\/p>\n<hr \/>\n<h1>\ud83d\udccc When Should You Consider Upgrading?<\/h1>\n<p>If your current project is within\u00a0<strong>2 to 4 versions<\/strong>\u00a0of the latest release, upgrading is relatively safe. Otherwise, it\u2019s better to\u00a0<strong>migrate code manually to a fresh project.<\/strong> We\u2019ll cover both methods.<\/p>\n<hr \/>\n<h1>\ud83d\udee0\ufe0f Approach 1: Upgrade Using React Native Upgrade Helper (Recommended for Small Version Gaps)<\/h1>\n<p>This method is ideal if your current version is just a few versions behind (e.g., 0.75 to 0.79).<\/p>\n<p><strong>Step 1. Update Android Studio<\/strong><\/p>\n<ul>\n<li>Make sure you\u2019re using the latest stable version of Android Studio.<\/li>\n<li>This ensures compatibility with the updated Gradle, SDKs, and React Native tooling.<\/li>\n<\/ul>\n<p><strong>Step 2. Use the React Native Upgrade Helper<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/react-native-community.github.io\/upgrade-helper\/\">Visit React Native Upgrade Helper<\/a>.<\/li>\n<li>Select your current version (left) and target version (right, e.g., 0.79.3).\n<p><div id=\"attachment_74854\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-74854\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-74854 size-full\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2025\/09\/https___dev-to-uploads.s3.amazonaws.com_uploads_articles_8t1om242olbxz7ok2al4.webp\" alt=\"React Native Upgrade Helper.\" width=\"800\" height=\"224\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2025\/09\/https___dev-to-uploads.s3.amazonaws.com_uploads_articles_8t1om242olbxz7ok2al4.webp 800w, \/blog\/wp-ttn-blog\/uploads\/2025\/09\/https___dev-to-uploads.s3.amazonaws.com_uploads_articles_8t1om242olbxz7ok2al4-300x84.webp 300w, \/blog\/wp-ttn-blog\/uploads\/2025\/09\/https___dev-to-uploads.s3.amazonaws.com_uploads_articles_8t1om242olbxz7ok2al4-768x215.webp 768w, \/blog\/wp-ttn-blog\/uploads\/2025\/09\/https___dev-to-uploads.s3.amazonaws.com_uploads_articles_8t1om242olbxz7ok2al4-624x175.webp 624w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><p id=\"caption-attachment-74854\" class=\"wp-caption-text\">React Native Upgrade Helper.<\/p><\/div><\/li>\n<\/ul>\n<p><strong>Step 3. Follow the Diff Instructions Carefully<\/strong><\/p>\n<ul>\n<li>Pay special attention to native file changes\u2014these are critical for enabling the New Architecture.<\/li>\n<li>Use version control to commit incrementally and rollback if needed.<\/li>\n<\/ul>\n<hr \/>\n<p><strong>\ud83d\udce6 Update Third-Party Dependencies<\/strong><\/p>\n<p>Once you\u2019re on the latest version, update your dependencies:<\/p>\n<ul>\n<li><a href=\"https:\/\/reactnative.directory\/\">Visit React Native Directory<\/a><\/li>\n<li>Apply the filter: &#8220;Supports New Architecture&#8221;<\/li>\n<li>Replace or upgrade libraries accordingly<\/li>\n<\/ul>\n<div id=\"attachment_74858\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-74858\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-74858 size-full\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2025\/09\/https___dev-to-uploads.s3.amazonaws.com_uploads_articles_o1hbk21tgv2xra692kwc-1.webp\" alt=\"React Native Directory\" width=\"800\" height=\"327\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2025\/09\/https___dev-to-uploads.s3.amazonaws.com_uploads_articles_o1hbk21tgv2xra692kwc-1.webp 800w, \/blog\/wp-ttn-blog\/uploads\/2025\/09\/https___dev-to-uploads.s3.amazonaws.com_uploads_articles_o1hbk21tgv2xra692kwc-1-300x123.webp 300w, \/blog\/wp-ttn-blog\/uploads\/2025\/09\/https___dev-to-uploads.s3.amazonaws.com_uploads_articles_o1hbk21tgv2xra692kwc-1-768x314.webp 768w, \/blog\/wp-ttn-blog\/uploads\/2025\/09\/https___dev-to-uploads.s3.amazonaws.com_uploads_articles_o1hbk21tgv2xra692kwc-1-624x255.webp 624w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><p id=\"caption-attachment-74858\" class=\"wp-caption-text\">React Native Directory<\/p><\/div>\n<p>&nbsp;<\/p>\n<hr \/>\n<h1><\/h1>\n<h1>\u2705 Approach 2: Create a Fresh Project (Recommended for larger Version Gaps)<\/h1>\n<p>If your current project is outdated or complex, this is the safest and cleanest way to upgrade.<\/p>\n<p><strong>Steps to Migrate<\/strong><\/p>\n<p><strong>Step 1. Create a New Project<\/strong><\/p>\n<p>npx @react-native-community\/cli init MyApp<\/p>\n<p><strong>Step 2. Migrate Your Existing Codebase<\/strong><\/p>\n<p>Once your new React Native project is created (preferably using the latest stable version like v0.79.3), it\u2019s time to bring your existing app logic into the new environment.<\/p>\n<p><strong>\ud83d\udcc1 Step 3: Move Your\u00a0src\/\u00a0Folder<\/strong><\/p>\n<p>Start by copying the entire\u00a0src\u00a0directory from your old project into the root of the new project<\/p>\n<p><strong>\ud83d\udce6 Step 4: Sync and Install Dependencies<\/strong><\/p>\n<p>Now, open both the old and new\u00a0package.json\u00a0files side by side.<\/p>\n<ul>\n<li>Carefully review the dependencies and devDependencies.<\/li>\n<li>Instead of copying everything directly, manually install each package in the new project using the latest version.<\/li>\n<li>Ensure that each dependency you bring in is compatible with React Native&#8217;s New Architecture.<\/li>\n<\/ul>\n<blockquote><p>Yes, it&#8217;s manual\u2014but it&#8217;s also\u00a0<strong>bulletproof for both Android and iOS<\/strong><\/p><\/blockquote>\n<p><strong>\u2705 Step 5: Verify It Works<\/strong><\/p>\n<p>After you&#8217;ve copied your source code and installed the updated dependencies:<\/p>\n<ol>\n<li><strong>Clean the Android build<\/strong><\/li>\n<\/ol>\n<p style=\"padding-left: 40px;\">cd android &amp;&amp; .\/gradlew clean &amp;&amp; cd ..<\/p>\n<p>2<strong>. Run the app on both platforms to ensure everything is wired correctly:<\/strong><\/p>\n<p style=\"padding-left: 40px;\">npx react-native run-android<br \/>\nnpx react-native run-ios<\/p>\n<p><strong>3. Watch the terminal and device logs for any errors, warnings, or compatibility issues.<\/strong><\/p>\n<blockquote><p>\ud83d\udca1 Tip: If any dependency causes issues with the new architecture, check the package&#8217;s documentation or GitHub issues. Some packages may still require legacy support or additional configuration to work correctly.<\/p>\n<hr \/>\n<\/blockquote>\n<h1>\ud83e\udde9 Challenges I Faced<\/h1>\n<p>As I migrated to the New React Native Architecture, I ran into some unexpected issues that weren\u2019t immediately obvious. Here&#8217;s a breakdown of the most common ones \u2014 and how I resolved each.<\/p>\n<p><strong>\ud83c\udf101. Translation failed<\/strong><br \/>\nThe old way of handling translations using\u00a0<strong>i18n-js<\/strong>\u00a0no longer works reliably in the new architecture.<\/p>\n<p>\u2705 <strong>Sol<\/strong><\/p>\n<p>The recommended and stable alternative is <strong>react-i18next<\/strong>, which is modern, flexible, and actively maintained.<\/p>\n<div id=\"attachment_74861\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-74861\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-74861 size-full\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2025\/09\/https___dev-to-uploads.s3.amazonaws.com_uploads_articles_vhzn2oj5m3nlxyclos1q.webp\" alt=\"Translation failed\" width=\"800\" height=\"790\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2025\/09\/https___dev-to-uploads.s3.amazonaws.com_uploads_articles_vhzn2oj5m3nlxyclos1q.webp 800w, \/blog\/wp-ttn-blog\/uploads\/2025\/09\/https___dev-to-uploads.s3.amazonaws.com_uploads_articles_vhzn2oj5m3nlxyclos1q-300x296.webp 300w, \/blog\/wp-ttn-blog\/uploads\/2025\/09\/https___dev-to-uploads.s3.amazonaws.com_uploads_articles_vhzn2oj5m3nlxyclos1q-768x758.webp 768w, \/blog\/wp-ttn-blog\/uploads\/2025\/09\/https___dev-to-uploads.s3.amazonaws.com_uploads_articles_vhzn2oj5m3nlxyclos1q-624x616.webp 624w, \/blog\/wp-ttn-blog\/uploads\/2025\/09\/https___dev-to-uploads.s3.amazonaws.com_uploads_articles_vhzn2oj5m3nlxyclos1q-120x120.webp 120w, \/blog\/wp-ttn-blog\/uploads\/2025\/09\/https___dev-to-uploads.s3.amazonaws.com_uploads_articles_vhzn2oj5m3nlxyclos1q-24x24.webp 24w, \/blog\/wp-ttn-blog\/uploads\/2025\/09\/https___dev-to-uploads.s3.amazonaws.com_uploads_articles_vhzn2oj5m3nlxyclos1q-48x48.webp 48w, \/blog\/wp-ttn-blog\/uploads\/2025\/09\/https___dev-to-uploads.s3.amazonaws.com_uploads_articles_vhzn2oj5m3nlxyclos1q-96x96.webp 96w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><p id=\"caption-attachment-74861\" class=\"wp-caption-text\">Translation failed screenshot<\/p><\/div>\n<hr \/>\n<p><strong>\u269b\ufe0f 2. Redux not working<\/strong><\/p>\n<p>Redux can break in the new architecture, especially if you&#8217;re using older packages like\u00a0&#8216;<strong>redux<\/strong>&#8216;\u00a0and\u00a0&#8216;<strong>redux-thunk<\/strong>&#8216;.<\/p>\n<p>The new approach uses the modern\u00a0<strong>Redux<\/strong> <strong>Toolkit<\/strong>:<\/p>\n<p>&nbsp;<\/p>\n<div id=\"attachment_74862\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-74862\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-74862 size-full\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2025\/09\/https___dev-to-uploads.s3.amazonaws.com_uploads_articles_by6stnfewwo9aiq1nhg7.webp\" alt=\"Redux not working\" width=\"800\" height=\"1778\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2025\/09\/https___dev-to-uploads.s3.amazonaws.com_uploads_articles_by6stnfewwo9aiq1nhg7.webp 800w, \/blog\/wp-ttn-blog\/uploads\/2025\/09\/https___dev-to-uploads.s3.amazonaws.com_uploads_articles_by6stnfewwo9aiq1nhg7-135x300.webp 135w, \/blog\/wp-ttn-blog\/uploads\/2025\/09\/https___dev-to-uploads.s3.amazonaws.com_uploads_articles_by6stnfewwo9aiq1nhg7-461x1024.webp 461w, \/blog\/wp-ttn-blog\/uploads\/2025\/09\/https___dev-to-uploads.s3.amazonaws.com_uploads_articles_by6stnfewwo9aiq1nhg7-768x1707.webp 768w, \/blog\/wp-ttn-blog\/uploads\/2025\/09\/https___dev-to-uploads.s3.amazonaws.com_uploads_articles_by6stnfewwo9aiq1nhg7-691x1536.webp 691w, \/blog\/wp-ttn-blog\/uploads\/2025\/09\/https___dev-to-uploads.s3.amazonaws.com_uploads_articles_by6stnfewwo9aiq1nhg7-624x1387.webp 624w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><p id=\"caption-attachment-74862\" class=\"wp-caption-text\">Redux failed screenshot<\/p><\/div>\n<p><strong>\u2705 Sol<\/strong><\/p>\n<p><strong>Replace this<\/strong><\/p>\n<p>import {createStore, applyMiddleware, compose} from &#8216;redux&#8217;;<br \/>\nimport thunk from &#8216;redux-thunk&#8217;;<br \/>\nimport rootReducer from &#8216;.\/rootReducer&#8217;;<br \/>\nconst composeStore = compose(applyMiddleware(thunk));<br \/>\nexport const appStore = createStore(rootReducer, composeStore);<br \/>\nconst store = () =&gt; {<br \/>\nreturn appStore;<br \/>\n};<\/p>\n<p>export default store;<\/p>\n<p><strong>With this<\/strong><\/p>\n<p>import {configureStore} from &#8220;@reduxjs\/toolkit&#8221;;<br \/>\nimport rootReducer from &#8220;.\/rootReducer&#8221;;<\/p>\n<p>export const appStore = configureStore({<br \/>\nreducer: rootReducer,<br \/>\ndevTools: true,<br \/>\nmiddleware: getDefaultMiddleware =&gt; getDefaultMiddleware(),<br \/>\n});<\/p>\n<p>const store = () =&gt; {<br \/>\nreturn appStore;<br \/>\n};<\/p>\n<p>export default store;<\/p>\n<p><strong>After integrating this, You might getting this redux error<\/strong><\/p>\n<div id=\"attachment_74863\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-74863\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-74863 size-full\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2025\/09\/https___dev-to-uploads.s3.amazonaws.com_uploads_articles_wieqq3w9b7w3lsolutc5.webp\" alt=\"redux error\" width=\"800\" height=\"1435\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2025\/09\/https___dev-to-uploads.s3.amazonaws.com_uploads_articles_wieqq3w9b7w3lsolutc5.webp 800w, \/blog\/wp-ttn-blog\/uploads\/2025\/09\/https___dev-to-uploads.s3.amazonaws.com_uploads_articles_wieqq3w9b7w3lsolutc5-167x300.webp 167w, \/blog\/wp-ttn-blog\/uploads\/2025\/09\/https___dev-to-uploads.s3.amazonaws.com_uploads_articles_wieqq3w9b7w3lsolutc5-571x1024.webp 571w, \/blog\/wp-ttn-blog\/uploads\/2025\/09\/https___dev-to-uploads.s3.amazonaws.com_uploads_articles_wieqq3w9b7w3lsolutc5-768x1378.webp 768w, \/blog\/wp-ttn-blog\/uploads\/2025\/09\/https___dev-to-uploads.s3.amazonaws.com_uploads_articles_wieqq3w9b7w3lsolutc5-624x1119.webp 624w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><p id=\"caption-attachment-74863\" class=\"wp-caption-text\">redux error<\/p><\/div>\n<p><strong>\u2705 Sol<\/strong><\/p>\n<p>&#8230;<br \/>\nmiddleware: getDefaultMiddleware =&gt;<br \/>\ngetDefaultMiddleware({<br \/>\nserializableCheck: false,<br \/>\n}),<br \/>\n&#8230;<\/p>\n<hr \/>\n<p><strong>\ud83d\udcc13. Absolute imports fail<\/strong><\/p>\n<p>If you\u2019re using absolute import paths like\u00a0<strong>@abc\/screens<\/strong>\u00a0defined in\u00a0<strong>package.json<\/strong>, you may find they\u00a0don\u2019t resolve properly\u00a0in the new architecture setup.<\/p>\n<p>\ud83d\udee0\ufe0f In my case, I had to temporarily fall back to relative paths like:<\/p>\n<p style=\"padding-left: 40px;\">import MyScreen from &#8216;..\/..\/screens\/MyScreen&#8217;;<\/p>\n<p><strong>\u2705 Sol<\/strong><\/p>\n<p>Later, I fixed this properly by configuring <strong>babel.config.js<\/strong> and <strong>tsconfig.json.<\/strong><\/p>\n<hr \/>\n<p><strong>4. Bridging fails<\/strong><\/p>\n<p>With the New Architecture, React Native introduces a\u00a0<strong>bridge-less communication model.<\/strong><\/p>\n<p><strong>\u2705 Sol<\/strong><\/p>\n<ul>\n<li>Legacy native modules written using the old bridge might stop working.<\/li>\n<li>You must migrate to TurboModules, define spec files, and rely on codegen for typed module integration.<\/li>\n<\/ul>\n<p>While it\u2019s more\u00a0<strong>strict<\/strong>, it brings better performance, type safety, and native interoperability.<\/p>\n<hr \/>\n<p><strong>5. GIFs Fail to Load\u00a0<\/strong><\/p>\n<p>If your app uses GIFs, they may not work properly with the New Architecture (Fabric\/TurboModules).<\/p>\n<p><strong>\u2705 Sol<\/strong><\/p>\n<p>Add the Fresco GIF dependency to\u00a0<strong>app\/build.gradle:<\/strong><\/p>\n<p style=\"padding-left: 40px;\">implementation &#8216;com.facebook.fresco:animated-gif:3.6.0&#8217;<\/p>\n<blockquote><p>\u26a0\ufe0f Note: If 3.6.0 is not compatible, use the latest stable version of Fresco instead.<\/p>\n<hr \/>\n<\/blockquote>\n<p><strong>6. SafeAreaView Overlaps Status Bar on Android 15+ (Edge-to-Edge Issues)<\/strong><\/p>\n<p>If your app&#8217;s content overlaps the status bar or <strong>edge-to-edge display<\/strong> isn&#8217;t working properly on<strong> Android 15<\/strong>, try this solution.<\/p>\n<p><strong>\u2705 Sol<\/strong><br \/>\nAdd this line to your Android\u00a0<strong>\/android\/app\/src\/main\/res\/values\/styles.xml<\/strong><\/p>\n<p style=\"padding-left: 40px;\">&lt;item name=&#8221;android:windowOptOutEdgeToEdgeEnforcement&#8221;&gt;true&lt;\/item&gt;<\/p>\n<hr \/>\n<p><strong>7. react-native-linear-gradient\u00a0Padding Not Applying<\/strong><\/p>\n<p>When adding padding directly to the\u00a0&lt;LinearGradient&gt;\u00a0component, it won\u2019t work as expected.<br \/>\nInstead, wrap your content in a\u00a0&lt;View&gt;\u00a0and apply padding to that\u00a0&lt;View&gt;.<\/p>\n<p><strong>\u2705 Sol<\/strong><\/p>\n<p>&lt;LinearGradient&gt;<br \/>\n&lt;View style={{paddingHorizontal: 20, paddingVertical: 20}}&gt;<br \/>\n&lt;Text&gt;Your text&lt;\/Text&gt;<br \/>\n&lt;\/View&gt;<br \/>\n&lt;\/LinearGradient&gt;<\/p>\n<hr \/>\n<p><strong>8. Custom Font Not Working on iOS<\/strong><br \/>\nSome custom fonts may not render correctly on iOS due to font family and weight handling in\u00a0RCTFontUtils.mm.<\/p>\n<p><strong>\u2705 Sol<\/strong><\/p>\n<p>GitHub Reference:\u00a0<a href=\"https:\/\/github.com\/facebook\/react-native\/pull\/47691\/files\">PR #47691<\/a><\/p>\n<hr \/>\n<p><strong>9. APK Size Increased<\/strong><\/p>\n<p>After upgrading to the New Architecture, I noticed the\u00a0APK size increased\u00a0significantly:<\/p>\n<p>However, with a simple tweak, I was able to bring it down drastically \u2014 my final APK was just 65 MB.<\/p>\n<blockquote><p>\u26a0\ufe0f Important: After applying this change, make sure to test your app\u2019s\u00a0performance and launch time thoroughly.<br \/>\nThere have been community discussions mentioning that setting\u00a0android:extractNativeLibs=&#8221;true&#8221;\u00a0might slightly impact launch performance.<br \/>\nIn my case, I carefully compared app launch behavior\u00a0before and after\u00a0the change \u2014 and found\u00a0no noticeable difference\u00a0in performance.<\/p><\/blockquote>\n<p><strong>\u2705 Sol<\/strong><\/p>\n<p>Update your\u00a0AndroidManifest.xml\u00a0to include the following inside the\u00a0&lt;application&gt;\u00a0tag:<\/p>\n<p>&lt;application<br \/>\nandroid:extractNativeLibs=&#8221;true&#8221;<br \/>\n&#8230;<br \/>\n&gt;<\/p>\n<p>This ensures unused native libraries are not bundled unnecessarily.<\/p>\n<hr \/>\n<p><strong>10. \ud83d\uded1 Proguard Build Failure<\/strong><\/p>\n<p>If you\u2019re using\u00a0Proguard\u00a0or enabling\u00a0minifyEnabled, you may see this common R8 error:<\/p>\n<div id=\"attachment_74871\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-74871\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-74871 size-full\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2025\/09\/https___dev-to-uploads.s3.amazonaws.com_uploads_articles_biz5hmms7lkq0hxuizzg.webp\" alt=\"Proguard build failure\" width=\"800\" height=\"193\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2025\/09\/https___dev-to-uploads.s3.amazonaws.com_uploads_articles_biz5hmms7lkq0hxuizzg.webp 800w, \/blog\/wp-ttn-blog\/uploads\/2025\/09\/https___dev-to-uploads.s3.amazonaws.com_uploads_articles_biz5hmms7lkq0hxuizzg-300x72.webp 300w, \/blog\/wp-ttn-blog\/uploads\/2025\/09\/https___dev-to-uploads.s3.amazonaws.com_uploads_articles_biz5hmms7lkq0hxuizzg-768x185.webp 768w, \/blog\/wp-ttn-blog\/uploads\/2025\/09\/https___dev-to-uploads.s3.amazonaws.com_uploads_articles_biz5hmms7lkq0hxuizzg-624x151.webp 624w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><p id=\"caption-attachment-74871\" class=\"wp-caption-text\">Proguard build failed screenshot<\/p><\/div>\n<p><strong>\u2705 Sol<\/strong><\/p>\n<p>Build a release APK first \u2192 generates missing_rules.txt at:<br \/>\nandroid\/app\/build\/outputs\/mapping\/release\/missing_rules.txt<br \/>\nCopy rules from missing_rules.txt \u2192 paste into android\/app\/proguard-rules.pro:<\/p>\n<p># From R8 missing rules<br \/>\n-keep class com.example.SomeClass { *; }<br \/>\n-dontwarn com.example.OtherClass<\/p>\n<p>\ud83d\udccc Merge with existing rules to avoid conflicts.<br \/>\n\ud83d\udcdd Ref: <a href=\"https:\/\/github.com\/facebook\/react-native\/issues\/36505\">React Native GitHub Issue #36505<\/a><\/p>\n<hr \/>\n<p><strong>11. Android Double Splash issue<\/strong><\/p>\n<p>While running App, I notice double splash issue on android:<\/p>\n<p><strong>\u2705 Sol<\/strong><\/p>\n<p><strong>1. Create a custom splash drawable<\/strong><br \/>\nInside your project, create the file:<\/p>\n<p><strong>android\/app\/src\/main\/res\/drawable\/splash_screen.xml<\/strong><\/p>\n<p>Add the following code:<\/p>\n<p>&lt;?xml version=&#8221;1.0&#8243; encoding=&#8221;utf-8&#8243;?&gt;<br \/>\n&lt;layer-list xmlns:android=&#8221;http:\/\/schemas.android.com\/apk\/res\/android&#8221;&gt;<br \/>\n&lt;!&#8211; Background that matches React Native splash screen &#8211;&gt;<br \/>\n&lt;item&gt;<br \/>\n&lt;shape android:shape=&#8221;rectangle&#8221;&gt;<br \/>\n&lt;solid android:color=&#8221;#000000&#8243; \/&gt;<br \/>\n&lt;\/shape&gt;<br \/>\n&lt;\/item&gt;<\/p>\n<p>&lt;\/layer-list&gt;<\/p>\n<p><strong>2. Update\u00a0styles.xml<\/strong><\/p>\n<p>Open\u00a0android\/app\/src\/main\/res\/values\/styles.xml\u00a0and add:<\/p>\n<p>&lt;item name=&#8221;android:windowBackground&#8221;&gt;@drawable\/splash_screen&lt;\/item&gt;<br \/>\n&lt;item name=&#8221;android:statusBarColor&#8221; tools:targetApi=&#8221;l&#8221;&gt;?attr\/colorPrimary&lt;\/item&gt;<\/p>\n<p>This ensures that the splash screen defined in splash_screen.xml is used as the window background, preventing the double splash issue on Android.<\/p>\n<hr \/>\n<p><strong>12. iOS Pod-Install Issues<\/strong><\/p>\n<p>While running\u00a0pod install, I ran into the following CocoaPods and build error:<\/p>\n<div id=\"attachment_74874\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-74874\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-74874 size-full\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2025\/09\/https___dev-to-uploads.s3.amazonaws.com_uploads_articles_jcwqz03yn2lc16ag0tek.webp\" alt=\"Pod Install error\" width=\"800\" height=\"1499\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2025\/09\/https___dev-to-uploads.s3.amazonaws.com_uploads_articles_jcwqz03yn2lc16ag0tek.webp 800w, \/blog\/wp-ttn-blog\/uploads\/2025\/09\/https___dev-to-uploads.s3.amazonaws.com_uploads_articles_jcwqz03yn2lc16ag0tek-160x300.webp 160w, \/blog\/wp-ttn-blog\/uploads\/2025\/09\/https___dev-to-uploads.s3.amazonaws.com_uploads_articles_jcwqz03yn2lc16ag0tek-546x1024.webp 546w, \/blog\/wp-ttn-blog\/uploads\/2025\/09\/https___dev-to-uploads.s3.amazonaws.com_uploads_articles_jcwqz03yn2lc16ag0tek-768x1439.webp 768w, \/blog\/wp-ttn-blog\/uploads\/2025\/09\/https___dev-to-uploads.s3.amazonaws.com_uploads_articles_jcwqz03yn2lc16ag0tek-624x1169.webp 624w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><p id=\"caption-attachment-74874\" class=\"wp-caption-text\">Pod Install error<\/p><\/div>\n<p>&nbsp;<\/p>\n<p><strong>\u2705 Sol<\/strong><br \/>\nEdit your\u00a0Podfile\u00a0as follows:<\/p>\n<p>platform :ios, &#8216;15.1&#8217; # Add this<br \/>\nuse_modular_headers! # Add this<\/p>\n<p>target &#8216;YourAppName&#8217; do<br \/>\nconfig = use_native_modules!<\/p>\n<p># \u2014\u2014\u2014 Add this block \u2014\u2014\u2014<br \/>\n$RNFirebaseAsStaticFramework = true<br \/>\nuse_frameworks! :linkage =&gt; :static<\/p>\n<p>pod &#8216;Firebase&#8217;, :modular_headers =&gt; true<br \/>\npod &#8216;FirebaseCoreInternal&#8217;, :modular_headers =&gt; true<br \/>\npod &#8216;GoogleUtilities&#8217;, :modular_headers =&gt; true<br \/>\npod &#8216;FirebaseCore&#8217;, :modular_headers =&gt; true<br \/>\n# \u2014\u2014\u2014 End \u2014\u2014\u2014<\/p>\n<p>use_react_native!(&#8230;)<br \/>\nend<\/p>\n<p>Then run:<\/p>\n<p>cd ios &amp;&amp; pod install<\/p>\n<p>This ensures compatibility with Firebase and other modular dependencies when using the new architecture.<\/p>\n<hr \/>\n<p>13. iOS Double Splash Issue \u2013 Fix<\/p>\n<ul>\n<li>Open (or create) ios\/YourApp\/LaunchScreen.storyboard.<\/li>\n<li>Set Background Color (e.g., black #000000).<\/li>\n<li>Add App Logo (ImageView) \u2192 center with Auto Layout.<\/li>\n<li>Place logo in ios\/YourApp\/Images.xcassets (@1x, @2x, @3x).<\/li>\n<li>In Xcode \u2192 Project \u2192 General \u2192 set Launch Screen File = LaunchScreen.storyboard.<\/li>\n<\/ul>\n<hr \/>\n<p>&nbsp;<\/p>\n<h1>\u26a0\ufe0f Note:<\/h1>\n<p>The issues and solutions I\u2019ve shared are based on my specific project setup.<br \/>\nYou might face different roadblocks depending on your architecture, packages, and integrations.<\/p>\n<p>Always validate each solution with your own setup, and don\u2019t hesitate to tweak things accordingly.<\/p>\n<hr \/>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction With the evolution of React Native, the New Architecture brings significant performance and maintainability improvements through features like\u00a0TurboModules,\u00a0Fabric, and\u00a0C++ shared logic. Upgrading to this architecture can seem intimidating\u2014but with the right strategy, it&#8217;s achievable. In this blog, I\u2019ll walk you through\u00a0two practical approaches to upgrading your project to the New Architecture in React Native, [&hellip;]<\/p>\n","protected":false},"author":1816,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":267},"categories":[5881],"tags":[5853],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/74845"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1816"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=74845"}],"version-history":[{"count":6,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/74845\/revisions"}],"predecessor-version":[{"id":74992,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/74845\/revisions\/74992"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=74845"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=74845"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=74845"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}