Upgraded to React-Native 0.68.2 (new architecture), chore packages

Author: IronTony

.flowconfig

@@ -11,6 +11,8 @@ node_modules/react-native/Libraries/polyfills/.*
 ; Flow doesn't support platforms
 .*/Libraries/Utilities/LoadingView.js
 
+.*/node_modules/resolve/test/resolver/malformed_package_json/package\.json$
+
 [untyped]
 .*/node_modules/@react-native-community/cli/.*/.*
 
@@ -62,4 +64,4 @@ untyped-import
 untyped-type-import
 
 [version]
-^0.162.0
+^0.170.0

.gitignore

@@ -66,8 +66,9 @@ android/app/src/main/assets/index.android.bundle
 ios/assets/src
 ios/assets/app.json
 
-# CocoaPods
+# Ruby / CocoaPods
 /ios/Pods/
+/vendor/bundle/
 
 # project
 .vscode/

.prettierrc.js

@@ -1,10 +1,11 @@
 module.exports = {
+  arrowParens: 'avoid',
+  bracketSameLine: true,
   semi: true,
   trailingComma: 'all',
   singleQuote: true,
   printWidth: 120,
   bracketSpacing: true,
-  arrowParens: 'avoid',
   importOrder: ['<THIRD_PARTY_MODULES>', '^[./]'],
   importOrderSeparation: false,
 };

Gemfile.lock

@@ -54,7 +54,7 @@ GEM
       netrc (~> 0.11)
     cocoapods-try (1.2.0)
     colored2 (3.1.2)
-    concurrent-ruby (1.1.9)
+    concurrent-ruby (1.1.10)
     escape (0.0.4)
     ethon (0.15.0)
       ffi (>= 1.15.0)
@@ -71,7 +71,7 @@ GEM
     nanaimo (0.3.0)
     nap (1.1.0)
     netrc (0.11.0)
-    public_suffix (4.0.6)
+    public_suffix (4.0.7)
     rexml (3.2.5)
     ruby-macho (2.5.1)
     typhoeus (1.4.0)

README.md

@@ -1,7 +1,10 @@
-# React Native Redux Toolkit Start App <!-- omit in toc -->
+# React Native Redux Toolkit Start App  <!-- omit in toc -->
 
 > A React Native boilerplate app to bootstrap your next app wit Redux Toolkit and Saga!
 
+## 🔥🔥🔥 Upgraded to the latest React-Native (> 0.68.x) with brand New Architecture (Fabric) 🔥🔥🔥
+
+<br/>
 <div align="center">
     <img src="./react-native-starter-kit.png" width="100%" /> 
 </div>
@@ -24,6 +27,7 @@
 
 # Table of Contents <!-- omit in toc -->
 
+- [🔥🔥🔥 Upgraded to the latest React-Native (> 0.68.x) with brand New Architecture (Fabric) 🔥🔥🔥](#-upgraded-to-the-latest-react-native--068x-with-brand-new-architecture-fabric-)
 - [🔥🔥 Checkout also my brand new React Native React-Query (no redux toolkit) here 🔥🔥](#-checkout-also-my-brand-new-react-native-react-query-no-redux-toolkit-here-)
 - [Installation :inbox_tray:](#installation-inbox_tray)
 - [Rename project and bundles :memo: :package:](#rename-project-and-bundles-memo-package)
@@ -33,6 +37,7 @@
   - [Run the app](#run-the-app)
   - [Generate app icons](#generate-app-icons)
   - [Generate Splashscreen](#generate-splashscreen)
+  - [To enabled React-Native (Fabric) new architecture](#to-enabled-react-native-fabric-new-architecture)
   - [Setup iOS](#setup-ios)
   - [Typescript (optional)](#typescript-optional)
 - [Roadmap :running:](#roadmap-running)
@@ -130,6 +135,10 @@ To setup the app splashscreen:
 yarn assets:splashscreen
 ```
 
+### To enabled React-Native (Fabric) new architecture
+
+Check the official documentation [here](https://reactnative.dev/docs/new-architecture-intro)
+
 ### Setup iOS
 
 To setup the environment to run on iOS, run
@@ -163,20 +172,20 @@ _REMEMBER: the entry point file in the root of the project MUST be index.js_
 ## Roadmap :running:
 
 ✅ Initial Setup<br/>
-✅ Add Splashscreen (https://github.com/crazycodeboy/react-native-splash-screen)<br/>
-✅ Add Toolbox (https://github.com/panz3r/react-native-toolbox)<br/>
-✅ Create tree folders structure<br/>
-✅ Add `redux-toolkit`<br/>
-✅ Add `redux-persist` (https://github.com/rt2zz/redux-persist)<br/>
-✅ Add `React Native Debugger`<br/>
-✅ Add `redux-saga`<br/>
-✅ Add `i18next`<br/>
-✅ Add `react-navigation v6` ❤️<br/>
-✅ Add new UI Design System (`UIKitten v5`)<br />
-✅ Add `Env` variables selection experimental way ⚗️⚗️⚗️<br />
-✅ Add Typescript (optional use. Read the DOC above)<br />
-✅ Add Travis<br />
-✅ Add DependaBot<br />
+✅ `react-native-splashscreen` (https://github.com/crazycodeboy/react-native-splash-screen)<br/>
+✅ `react-native-toolbox` to generate Splashscreen and icons automagically (https://github.com/panz3r/react-native-toolbox)<br/>
+✅ Standard tree folders structure<br/>
+✅ `React-Native 0.68.2 (new architecture)`<br/>
+✅ `redux-toolkit`<br/>
+✅ `redux-persist` (https://github.com/rt2zz/redux-persist)<br/>
+✅ `React Native Debugger`<br/>
+✅ `redux-saga`<br/>
+✅ `i18next`<br/>
+✅ `react-navigation v6` ❤️<br/>
+✅ `UIKitten v5`<br />
+✅ `Env` variables selection experimental way ⚗️⚗️⚗️<br />
+✅ Typescript (optional use. Read the DOC above)<br />
+
 
 ---
 

android/app/build.gradle

@@ -1,6 +1,7 @@
 apply plugin: "com.android.application"
 
 import com.android.build.OutputFile
+import org.apache.tools.ant.taskdefs.condition.Os
 
 /**
  * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
@@ -122,9 +123,12 @@ def jscFlavor = 'org.webkit:android-jsc:+'
 def enableHermes = project.ext.react.get("enableHermes", false);
 
 /**
- * Architectures to build native code for in debug.
+ * Architectures to build native code for.
  */
-def nativeArchitectures = project.getProperties().get("reactNativeDebugArchitectures")
+def reactNativeArchitectures() {
+    def value = project.getProperties().get("reactNativeArchitectures")
+    return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"]
+}
 
 android {
     ndkVersion rootProject.ext.ndkVersion
@@ -137,20 +141,85 @@ android {
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1
         versionName "1.0"
-        multiDexEnabled true
+        buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
+
+        if (isNewArchitectureEnabled()) {
+            // We configure the NDK build only if you decide to opt-in for the New Architecture.
+            externalNativeBuild {
+                ndkBuild {
+                    arguments "APP_PLATFORM=android-21",
+                        "APP_STL=c++_shared",
+                        "NDK_TOOLCHAIN_VERSION=clang",
+                        "GENERATED_SRC_DIR=$buildDir/generated/source",
+                        "PROJECT_BUILD_DIR=$buildDir",
+                        "REACT_ANDROID_DIR=$rootDir/../node_modules/react-native/ReactAndroid",
+                        "REACT_ANDROID_BUILD_DIR=$rootDir/../node_modules/react-native/ReactAndroid/build"
+                    cFlags "-Wall", "-Werror", "-fexceptions", "-frtti", "-DWITH_INSPECTOR=1"
+                    cppFlags "-std=c++17"
+                    // Make sure this target name is the same you specify inside the
+                    // src/main/jni/Android.mk file for the `LOCAL_MODULE` variable.
+                    targets "reactnativestarterapp_appmodules"
+
+                    // Fix for windows limit on number of character in file paths and in command lines
+                    if (Os.isFamily(Os.FAMILY_WINDOWS)) {
+                        arguments "NDK_APP_SHORT_COMMANDS=true"
+                    }
+                }
+            }
+            if (!enableSeparateBuildPerCPUArchitecture) {
+                ndk {
+                    abiFilters (*reactNativeArchitectures())
+                }
+            }
+        }
     }
 
-    dexOptions {
-        incremental true
-        javaMaxHeapSize "4g"
+    if (isNewArchitectureEnabled()) {
+        // We configure the NDK build only if you decide to opt-in for the New Architecture.
+        externalNativeBuild {
+            ndkBuild {
+                path "$projectDir/src/main/jni/Android.mk"
+            }
+        }
+        def reactAndroidProjectDir = project(':ReactAndroid').projectDir
+        def packageReactNdkDebugLibs = tasks.register("packageReactNdkDebugLibs", Copy) {
+            dependsOn(":ReactAndroid:packageReactNdkDebugLibsForBuck")
+            from("$reactAndroidProjectDir/src/main/jni/prebuilt/lib")
+            into("$buildDir/react-ndk/exported")
+        }
+        def packageReactNdkReleaseLibs = tasks.register("packageReactNdkReleaseLibs", Copy) {
+            dependsOn(":ReactAndroid:packageReactNdkReleaseLibsForBuck")
+            from("$reactAndroidProjectDir/src/main/jni/prebuilt/lib")
+            into("$buildDir/react-ndk/exported")
+        }
+        afterEvaluate {
+            // If you wish to add a custom TurboModule or component locally,
+            // you should uncomment this line.
+            // preBuild.dependsOn("generateCodegenArtifactsFromSchema")
+            preDebugBuild.dependsOn(packageReactNdkDebugLibs)
+            preReleaseBuild.dependsOn(packageReactNdkReleaseLibs)
+            // Due to a bug inside AGP, we have to explicitly set a dependency
+            // between configureNdkBuild* tasks and the preBuild tasks.
+            // This can be removed once this is solved: https://issuetracker.google.com/issues/207403732
+            configureNdkBuildRelease.dependsOn(preReleaseBuild)
+            configureNdkBuildDebug.dependsOn(preDebugBuild)
+            reactNativeArchitectures().each { architecture ->
+                tasks.findByName("configureNdkBuildDebug[${architecture}]")?.configure {
+                    dependsOn("preDebugBuild")
+                }
+                tasks.findByName("configureNdkBuildRelease[${architecture}]")?.configure {
+                    dependsOn("preReleaseBuild")
+                }
+            }
+        }
     }
 
     splits {
         abi {
             reset()
             enable enableSeparateBuildPerCPUArchitecture
             universalApk true  // If true, also generate a universal APK
-            include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
+            include (*reactNativeArchitectures())
         }
     }
     signingConfigs {
@@ -164,11 +233,6 @@ android {
     buildTypes {
         debug {
             signingConfig signingConfigs.debug
-            if (nativeArchitectures) {
-                ndk {
-                    abiFilters nativeArchitectures.split(',')
-                }
-            }
         }
         release {
             // Caution! In production, you need to generate your own keystore file.
@@ -198,8 +262,7 @@ android {
 
 dependencies {
     implementation fileTree(dir: "libs", include: ["*.jar"])
-    implementation project(':react-native-splash-screen')
-    // implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
+
     //noinspection GradleDynamicVersion
     implementation "com.facebook.react:react-native:+"  // From node_modules
 
@@ -217,6 +280,8 @@ dependencies {
     // For WebP support, without animations
     implementation 'com.facebook.fresco:webpsupport:2.6.0'
 
+    implementation project(':react-native-splash-screen')
+
     debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
         exclude group:'com.facebook.fbjni'
     }
@@ -239,6 +304,18 @@ dependencies {
     }
 }
 
+if (isNewArchitectureEnabled()) {
+    // If new architecture is enabled, we let you build RN from source
+    // Otherwise we fallback to a prebuilt .aar bundled in the NPM package.
+    // This will be applied to all the imported transtitive dependency.
+    configurations.all {
+        resolutionStrategy.dependencySubstitution {
+            substitute(module("com.facebook.react:react-native"))
+                    .using(project(":ReactAndroid")).because("On New Architecture we're building React Native from source")
+        }
+    }
+}
+
 // Run this once to be able to run the application with BUCK
 // puts all compile dependencies into folder libs for BUCK to use
 task copyDownloadableDepsToLibs(type: Copy) {
@@ -247,3 +324,11 @@ task copyDownloadableDepsToLibs(type: Copy) {
 }
 
 apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
+
+def isNewArchitectureEnabled() {
+    // To opt-in for the New Architecture, you can either:
+    // - Set `newArchEnabled` to true inside the `gradle.properties` file
+    // - Invoke gradle with `-newArchEnabled=true`
+    // - Set an environment variable `ORG_GRADLE_PROJECT_newArchEnabled=true`
+    return project.hasProperty("newArchEnabled") && project.newArchEnabled == "true"
+}

android/app/src/debug/AndroidManifest.xml

@@ -8,6 +8,6 @@
         android:usesCleartextTraffic="true"
         tools:targetApi="28"
         tools:ignore="GoogleAppIndexingWarning">
-        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
+        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" android:exported="false" />
     </application>
 </manifest>

android/app/src/debug/ReactNativeFlipper.java renamed to android/app/src/debug/java/com/reactnativestarterapp/ReactNativeFlipper.java

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * <p>This source code is licensed under the MIT license found in the LICENSE file in the root
  * directory of this source tree.
@@ -19,6 +19,7 @@
 import com.facebook.flipper.plugins.network.NetworkFlipperPlugin;
 import com.facebook.flipper.plugins.react.ReactFlipperPlugin;
 import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin;
+import com.facebook.react.ReactInstanceEventListener;
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.modules.network.NetworkingModule;
@@ -28,11 +29,13 @@ public class ReactNativeFlipper {
   public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) {
     if (FlipperUtils.shouldEnableFlipper(context)) {
       final FlipperClient client = AndroidFlipperClient.getInstance(context);
+
       client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults()));
       client.addPlugin(new ReactFlipperPlugin());
       client.addPlugin(new DatabasesFlipperPlugin(context));
       client.addPlugin(new SharedPreferencesFlipperPlugin(context));
       client.addPlugin(CrashReporterPlugin.getInstance());
+
       NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
       NetworkingModule.setCustomClientBuilder(
           new NetworkingModule.CustomClientBuilder() {
@@ -43,12 +46,13 @@ public void apply(OkHttpClient.Builder builder) {
           });
       client.addPlugin(networkFlipperPlugin);
       client.start();
+
       // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized
       // Hence we run if after all native modules have been initialized
       ReactContext reactContext = reactInstanceManager.getCurrentReactContext();
       if (reactContext == null) {
         reactInstanceManager.addReactInstanceEventListener(
-            new ReactInstanceManager.ReactInstanceEventListener() {
+            new ReactInstanceEventListener() {
               @Override
               public void onReactContextInitialized(ReactContext reactContext) {
                 reactInstanceManager.removeReactInstanceEventListener(this);
@@ -66,4 +70,4 @@ public void run() {
       }
     }
   }
-}
+}

android/app/src/main/AndroidManifest.xml

@@ -15,7 +15,8 @@
         android:name=".SplashActivity"
         android:theme="@style/SplashTheme"
         android:label="@string/app_name"
-        android:screenOrientation="portrait">
+        android:screenOrientation="portrait"
+        android:exported="true">
         <intent-filter>
             <action android:name="android.intent.action.MAIN" />
             <category android:name="android.intent.category.LAUNCHER" />
@@ -26,9 +27,10 @@
       <activity
         android:name=".MainActivity"
         android:label="@string/app_name"
-        android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
+        android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
         android:launchMode="singleTask"
-        android:windowSoftInputMode="adjustResize">
+        android:windowSoftInputMode="adjustResize"
+        android:exported="true">
         <intent-filter>
                 <action android:name="android.intent.action.VIEW" />
                 <category android:name="android.intent.category.DEFAULT" />