Merge pull request #259 from rootstrap/upgrade_rn_0.73

Upgrade to React Native 0.73.5

.github/workflows/lint.yml

@@ -19,7 +19,7 @@ jobs:
       # This needs to match Node version in package.json
       - uses: actions/setup-node@v1
         with:
-          node-version: '^16'
+          node-version: '^18'
 
       - name: Install Dependencies
         run: yarn

.github/workflows/tests.yml

@@ -19,7 +19,7 @@ jobs:
       # This needs to match Node version in package.json
       - uses: actions/setup-node@v1
         with:
-          node-version: '^16'
+          node-version: '^18'
 
       - name: Install Dependencies
         run: yarn

.github/workflows/tsc.yml

@@ -19,7 +19,7 @@ jobs:
       # This needs to match Node version in package.json
       - uses: actions/setup-node@v1
         with:
-          node-version: '^16'
+          node-version: '^18'
 
       - name: Install Dependencies
         run: yarn

App.tsx

@@ -13,7 +13,7 @@ import { useThemeConfig } from 'themes/useThemeConfig';
 
 const client = new QueryClient();
 
-const App = () => {
+const App: () => React.JSX.Element = () => {
   const { theme } = useThemeConfig();
   const { dark: isDarkMode } = useTheme();
   const [visible, setVisible] = useState(true);

Gemfile

@@ -3,4 +3,7 @@ source 'https://rubygems.org'
 # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
 ruby ">= 2.6.10"
 
-gem 'cocoapods', '~> 1.12'
+# Cocoapods 1.15 introduced a bug which break the build. We will remove the upper
+# bound in the template on Cocoapods with next React Native release.
+gem 'cocoapods', '>= 1.13', '< 1.15'
+gem 'activesupport', '>= 6.1.7.5', '< 7.1.0'

__mocks__/index.js

@@ -1,5 +1,22 @@
 jest.mock('react-native-bootsplash', () => ({
   hide: jest.fn().mockResolvedValueOnce(),
+  useHideAnimation: jest.fn(({ animate }) => {
+    // Simulate animation immediately
+    animate();
+    return {
+      container: {},
+      logo: {},
+      brand: {},
+    };
+  }),
 }));
 
+jest.mock('common/AnimatedSplash', () =>
+  jest.fn(({ onAnimationEnd }) => {
+    // Call onAnimationEnd immediately to simulate the splash screen disappearing
+    onAnimationEnd();
+    return null;
+  }),
+);
+
 jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');

android/app/build.gradle

@@ -1,4 +1,5 @@
 apply plugin: "com.android.application"
+apply plugin: "org.jetbrains.kotlin.android"
 apply plugin: "com.facebook.react"
 
 import com.android.build.OutputFile
@@ -97,8 +98,8 @@ def reactNativeArchitectures() {
 
 android {
     ndkVersion rootProject.ext.ndkVersion
-
-    compileSdkVersion rootProject.ext.compileSdkVersion
+    buildToolsVersion rootProject.ext.buildToolsVersion
+    compileSdk rootProject.ext.compileSdkVersion
     namespace "com.reactnativebase"
     defaultConfig {
         applicationId "com.reactnativebase"
@@ -187,15 +188,8 @@ android {
 dependencies {
     // The version of react-native is set by the React Native Gradle Plugin
     implementation("com.facebook.react:react-android")
-
+    implementation("com.facebook.react:flipper-integration")
     implementation("androidx.swiperefreshlayout:swiperefreshlayout:1.0.0")
-
-    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}")
-    debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
-        exclude group:'com.squareup.okhttp3', module:'okhttp'
-    }
-
-    debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}")
     if (hermesEnabled.toBoolean()) {
         implementation("com.facebook.react:hermes-android")
     } else {

android/app/src/debug/AndroidManifest.xml

@@ -2,12 +2,8 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools">
 
-    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
-
     <application
         android:usesCleartextTraffic="true"
         tools:targetApi="28"
-        tools:ignore="GoogleAppIndexingWarning">
-        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" android:exported="false" />
-    </application>
+        tools:ignore="GoogleAppIndexingWarning"/>
 </manifest>

android/app/src/main/AndroidManifest.xml

@@ -10,7 +10,7 @@
       android:allowBackup="false"
       android:theme="@style/BootTheme">
       <activity
-        android:name=".MainActivity"
+        android:name="MainActivity"
         android:label="@string/app_name"
         android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
         android:launchMode="singleTask"

android/app/src/main/java/com/reactnativebase/MainActivity.kt

@@ -0,0 +1,32 @@
+package com.reactnativebase
+
+import com.facebook.react.ReactActivity
+import com.facebook.react.ReactActivityDelegate
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
+import com.facebook.react.defaults.DefaultReactActivityDelegate
+import android.os.Bundle;
+import com.zoontek.rnbootsplash.RNBootSplash
+
+class MainActivity : ReactActivity() {
+
+  /**
+   * Returns the name of the main component registered from JavaScript. This is used to schedule
+   * rendering of the component.
+   */
+  override fun getMainComponentName(): String = "ReactNativeBase"
+
+  /**
+   * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate]
+   * which allows you to enable New Architecture with a single boolean flags [fabricEnabled]
+   */
+  override fun createReactActivityDelegate(): ReactActivityDelegate =
+      DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)
+
+  /**
+   * React Navigation specific code
+   */
+  override fun onCreate(savedInstanceState: Bundle?) {
+    RNBootSplash.init(this, R.style.BootTheme) // ⬅️ initialize the splash screen
+    super.onCreate(savedInstanceState) // super.onCreate(null) with react-native-screens
+  }
+}

android/app/src/main/java/com/reactnativebase/MainApplication.kt

@@ -0,0 +1,46 @@
+package com.reactnativebase
+
+import android.app.Application
+import com.facebook.react.PackageList
+import com.facebook.react.ReactApplication
+import com.facebook.react.ReactHost
+import com.facebook.react.ReactNativeHost
+import com.facebook.react.ReactPackage
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
+import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
+import com.facebook.react.defaults.DefaultReactNativeHost
+import com.facebook.react.flipper.ReactNativeFlipper
+import com.facebook.soloader.SoLoader
+
+class MainApplication : Application(), ReactApplication {
+
+  override val reactNativeHost: ReactNativeHost =
+      object : DefaultReactNativeHost(this) {
+        override fun getPackages(): List<ReactPackage> =
+          PackageList(this).packages.apply {
+            // Packages that cannot be autolinked yet can be added manually here, for example:
+            // add(MyReactNativePackage())
+          }
+
+        override fun getJSMainModuleName(): String = "index"
+
+        override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
+
+        override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
+        override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
+      }
+
+  override val reactHost: ReactHost
+    get() = getDefaultReactHost(this.applicationContext, reactNativeHost)
+
+  override fun onCreate() {
+    super.onCreate()
+    SoLoader.init(this, false)
+    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
+      // If you opted-in for the New Architecture, we load the native entry point for this app.
+      load()
+    }
+    ReactNativeFlipper.initializeFlipper(this, reactNativeHost.reactInstanceManager)
+  }
+
+}