Update example app to React Native 0.70 RC

.github/workflows/ReactNativeSlider-CI.yml

@@ -60,7 +60,7 @@ jobs:
 
 
   verify:
-    name: Verify the Example app sources
+    name: Verify example app sources
     runs-on: ubuntu-latest
 
     steps:
@@ -75,7 +75,7 @@ jobs:
 
 
   build-android-app:
-    name: Verify the package and example app builds for Android platform
+    name: Build example app Android
     runs-on: ubuntu-latest
     needs: [verify]
 
@@ -95,7 +95,7 @@ jobs:
 
 
   build-iOS-app:
-    name: Verify the package and example app builds for iOS platform
+    name: Build example app iOS
     runs-on: macos-latest
     needs: [verify]
     steps:
@@ -105,33 +105,101 @@ jobs:
         id: cache-npm
         uses: actions/cache@v3
         env:
-          cache-name: cached-ios-deps
+          cache-name: cached-ios-npm-deps
         with:
-          path: |
-            example/node_modules
-            example/ios/Pods
-          key: ${{ hashFiles('./example/package-lock.json') }}-${{ hashFiles('./package/package-lock.json') }}-${{ hashFiles('./example/ios/Podfile.lock') }}
+          path: example/node_modules
+          key: ${{ hashFiles('./example/package-lock.json') }}-${{ hashFiles('./package/package-lock.json') }}
 
-      - name: Install required dependencies on cache miss
+      - name: Install required dependencies on cache miss (npm)
         if: steps.cache-npm.outputs.cache-hit != 'true'
         run: |
           npm install
-          cd example/ios && pod install --verbose
+
+      - name: Cache Pods
+        id: cache-pods
+        uses: actions/cache@v3
+        env:
+          cache-name: cached-ios-pods-deps
+        with:
+          path: example/ios/Pods
+          key: ${{ hashFiles('./example/ios/Podfile.lock') }}
+
+      - name: Install required dependencies on cache miss (Pods)
+        if: steps.cache-pods.outputs.cache-hit != 'true'
+        run: |
+          cd example/ios && pod install
+
+      - name: Reinstall Pods only if using cached ones
+        if: steps.cache-pods.outputs.cache-hit == 'true'
+        run: cd example/ios && pod install
 
       - name: Use the current package sources in build
         run: cd example && npm run refresh-package
 
-      - name: Opening Simulator app
-        uses: futureware-tech/simulator-action@v1
+      - name: Build iOS
+        run: |
+          device_name='iPhone 13'
+          device=$(xcrun simctl list devices "${device_name}" available | grep "${device_name} (")
+          re='\(([-0-9A-Fa-f]+)\)'
+          [[ $device =~ $re ]] || exit 1
+          xcodebuild -workspace example.xcworkspace -scheme example -destination "platform=iOS Simulator,id=${BASH_REMATCH[1]}" CODE_SIGNING_ALLOWED=NO COMPILER_INDEX_STORE_ENABLE=NO build
+        working-directory: example/ios
+
+
+  build-iOS-new-arch-app:
+    name: Build example app iOS (Fabric)
+    runs-on: macos-latest
+    needs: [build-iOS-app]
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Cache node modules
+        id: cache-npm
+        uses: actions/cache@v3
+        env:
+          cache-name: cached-ios-npm-deps
+        with:
+          path: example/node_modules
+          key: new-arch-${{ hashFiles('./example/package-lock.json') }}-${{ hashFiles('./package/package-lock.json') }}
+
+      - name: Install required dependencies on cache miss (npm)
+        if: steps.cache-npm.outputs.cache-hit != 'true'
+        run: |
+          npm install
+
+      - name: Cache Pods
+        id: cache-pods
+        uses: actions/cache@v3
+        env:
+          cache-name: cached-ios-pods-deps
         with:
-          model: 'iPhone 12 mini'
+          path: example/ios/Pods
+          key: new-arch-${{ hashFiles('./example/ios/Podfile.lock') }}
+
+      - name: Install required dependencies on cache miss (Pods)
+        if: steps.cache-pods.outputs.cache-hit != 'true'
+        run: |
+          cd example/ios && RCT_NEW_ARCH_ENABLED=1 pod install
+
+      - name: Reinstall Pods only if using cached ones
+        if: steps.cache-pods.outputs.cache-hit == 'true'
+        run: cd example/ios && RCT_NEW_ARCH_ENABLED=1 pod install
 
-      - name: Builds the iOS app
-        run: cd example && npx react-native run-ios
+      - name: Use the current package sources in build
+        run: cd example && npm run refresh-package
+
+      - name: Build iOS - Fabric
+        run: |
+          device_name='iPhone 13'
+          device=$(xcrun simctl list devices "${device_name}" available | grep "${device_name} (")
+          re='\(([-0-9A-Fa-f]+)\)'
+          [[ $device =~ $re ]] || exit 1
+          xcodebuild -workspace example.xcworkspace -scheme example -destination "platform=iOS Simulator,id=${BASH_REMATCH[1]}" CODE_SIGNING_ALLOWED=NO COMPILER_INDEX_STORE_ENABLE=NO build
+        working-directory: example/ios
 
 
   build-Windows-app:
-    name: Verify the package and example app builds for Windows platform
+    name: Build example app Windows
     runs-on: windows-latest
     needs: [verify]
     steps:

example/.flowconfig

@@ -63,4 +63,4 @@ untyped-import
 untyped-type-import
 
 [version]
-^0.176.3
+^0.182.0

example/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
@@ -78,7 +79,7 @@ import com.android.build.OutputFile
  */
 
 project.ext.react = [
-    enableHermes: false,  // clean and rebuild if changing
+    enableHermes: true,  // clean and rebuild if changing
 ]
 
 apply from: "../../node_modules/react-native/react.gradle"
@@ -158,6 +159,10 @@ android {
                     // Make sure this target name is the same you specify inside the
                     // src/main/jni/Android.mk file for the `LOCAL_MODULE` variable.
                     targets "example_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) {

example/android/app/src/main/jni/Android.mk

@@ -5,24 +5,21 @@ include $(REACT_ANDROID_DIR)/Android-prebuilt.mk
 # If you wish to add a custom TurboModule or Fabric component in your app you
 # will have to include the following autogenerated makefile.
 # include $(GENERATED_SRC_DIR)/codegen/jni/Android.mk
+
+# Includes the MK file for autolinked libraries
+include $(PROJECT_BUILD_DIR)/generated/rncli/src/main/jni/Android-rncli.mk  
+
 include $(CLEAR_VARS)
 
 LOCAL_PATH := $(THIS_DIR)
 
 # You can customize the name of your application .so file here.
 LOCAL_MODULE := example_appmodules
 
-LOCAL_C_INCLUDES := $(LOCAL_PATH)
-LOCAL_SRC_FILES := $(wildcard $(LOCAL_PATH)/*.cpp)
-LOCAL_EXPORT_C_INCLUDES := $(LOCAL_PATH)
-
-# If you wish to add a custom TurboModule or Fabric component in your app you
-# will have to uncomment those lines to include the generated source
-# files from the codegen (placed in $(GENERATED_SRC_DIR)/codegen/jni)
-#
-# LOCAL_C_INCLUDES += $(GENERATED_SRC_DIR)/codegen/jni
-# LOCAL_SRC_FILES += $(wildcard $(GENERATED_SRC_DIR)/codegen/jni/*.cpp)
-# LOCAL_EXPORT_C_INCLUDES += $(GENERATED_SRC_DIR)/codegen/jni
+# The generated/rncli/src/main/jni folder contains Autolinking support files.
+LOCAL_C_INCLUDES := $(LOCAL_PATH) $(PROJECT_BUILD_DIR)/generated/rncli/src/main/jni
+LOCAL_SRC_FILES := $(wildcard $(LOCAL_PATH)/*.cpp) $(wildcard $(PROJECT_BUILD_DIR)/generated/rncli/src/main/jni/*.cpp)
+LOCAL_EXPORT_C_INCLUDES := $(LOCAL_PATH) $(PROJECT_BUILD_DIR)/generated/rncli/src/main/jni
 
 # Here you should add any native library you wish to depend on.
 LOCAL_SHARED_LIBRARIES := \
@@ -43,6 +40,14 @@ LOCAL_SHARED_LIBRARIES := \
   libturbomodulejsijni \
   libyoga
 
+# Autolinked libraries
+LOCAL_SHARED_LIBRARIES += $(call import-codegen-modules) 
+
+# If you wish to add a custom TurboModule or Fabric component in your app you
+# will have to link against it here:
+# LOCAL_SHARED_LIBRARIES += \
+#   libreact_codegen_<your library name>
+
 LOCAL_CFLAGS := -DLOG_TAG=\"ReactNative\" -fexceptions -frtti -std=c++17 -Wall
 
 include $(BUILD_SHARED_LIBRARY)

example/android/app/src/main/jni/MainApplicationModuleProvider.cpp

@@ -1,12 +1,13 @@
 #include "MainApplicationModuleProvider.h"
 
+#include <rncli.h>
 #include <rncore.h>
 
 namespace facebook {
 namespace react {
 
 std::shared_ptr<TurboModule> MainApplicationModuleProvider(
-    const std::string moduleName,
+    const std::string &moduleName,
     const JavaTurboModule::InitParams &params) {
   // Here you can provide your own module provider for TurboModules coming from
   // either your application or from external libraries. The approach to follow
@@ -17,6 +18,13 @@ std::shared_ptr<TurboModule> MainApplicationModuleProvider(
   //    return module;
   // }
   // return rncore_ModuleProvider(moduleName, params);
+
+  // Module providers autolinked by RN CLI
+  auto rncli_module = rncli_ModuleProvider(moduleName, params);
+  if (rncli_module != nullptr) {
+    return rncli_module;
+  }
+
   return rncore_ModuleProvider(moduleName, params);
 }
 

example/android/app/src/main/jni/MainApplicationModuleProvider.h

@@ -9,7 +9,7 @@ namespace facebook {
 namespace react {
 
 std::shared_ptr<TurboModule> MainApplicationModuleProvider(
-    const std::string moduleName,
+    const std::string &moduleName,
     const JavaTurboModule::InitParams &params);
 
 } // namespace react

example/android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.cpp

@@ -22,21 +22,21 @@ void MainApplicationTurboModuleManagerDelegate::registerNatives() {
 
 std::shared_ptr<TurboModule>
 MainApplicationTurboModuleManagerDelegate::getTurboModule(
-    const std::string name,
-    const std::shared_ptr<CallInvoker> jsInvoker) {
+    const std::string &name,
+    const std::shared_ptr<CallInvoker> &jsInvoker) {
   // Not implemented yet: provide pure-C++ NativeModules here.
   return nullptr;
 }
 
 std::shared_ptr<TurboModule>
 MainApplicationTurboModuleManagerDelegate::getTurboModule(
-    const std::string name,
+    const std::string &name,
     const JavaTurboModule::InitParams &params) {
   return MainApplicationModuleProvider(name, params);
 }
 
 bool MainApplicationTurboModuleManagerDelegate::canCreateTurboModule(
-    std::string name) {
+    const std::string &name) {
   return getTurboModule(name, nullptr) != nullptr ||
       getTurboModule(name, {.moduleName = name}) != nullptr;
 }

example/android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.h

@@ -21,17 +21,17 @@ class MainApplicationTurboModuleManagerDelegate
   static void registerNatives();
 
   std::shared_ptr<TurboModule> getTurboModule(
-      const std::string name,
-      const std::shared_ptr<CallInvoker> jsInvoker) override;
+      const std::string &name,
+      const std::shared_ptr<CallInvoker> &jsInvoker) override;
   std::shared_ptr<TurboModule> getTurboModule(
-      const std::string name,
+      const std::string &name,
       const JavaTurboModule::InitParams &params) override;
 
   /**
    * Test-only method. Allows user to verify whether a TurboModule can be
    * created by instances of this class.
    */
-  bool canCreateTurboModule(std::string name);
+  bool canCreateTurboModule(const std::string &name);
 };
 
 } // namespace react

example/android/app/src/main/jni/MainComponentsRegistry.cpp

@@ -4,6 +4,7 @@
 #include <fbjni/fbjni.h>
 #include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
 #include <react/renderer/components/rncore/ComponentDescriptors.h>
+#include <rncli.h>
 
 namespace facebook {
 namespace react {
@@ -14,6 +15,9 @@ std::shared_ptr<ComponentDescriptorProviderRegistry const>
 MainComponentsRegistry::sharedProviderRegistry() {
   auto providerRegistry = CoreComponentsRegistry::sharedProviderRegistry();
 
+  // Autolinked providers registered by RN CLI
+  rncli_registerProviders(providerRegistry);
+
   // Custom Fabric Components go here. You can register custom
   // components coming from your App or from 3rd party libraries here.
   //

example/android/build.gradle

@@ -1,5 +1,3 @@
-import org.apache.tools.ant.taskdefs.condition.Os
-
 // Top-level build file where you can add configuration options common to all sub-projects/modules.
 
 buildscript {
@@ -22,7 +20,7 @@ buildscript {
         mavenCentral()
     }
     dependencies {
-        classpath("com.android.tools.build:gradle:7.1.1")
+        classpath("com.android.tools.build:gradle:7.2.1")
         classpath("com.facebook.react:react-native-gradle-plugin")
         classpath("de.undercouch:gradle-download-task:5.0.1")
         // NOTE: Do not place your application dependencies here; they belong

example/android/gradle.properties

@@ -37,4 +37,4 @@ reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
 # your application. You should enable this flag either if you want
 # to write custom TurboModules/Fabric components OR use libraries that
 # are providing them.
-newArchEnabled=false
+newArchEnabled=true

example/android/gradle/wrapper/gradle-wrapper.properties

@@ -1,5 +1,5 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-7.3.3-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.4.2-all.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

example/ios/Podfile

@@ -12,9 +12,16 @@ target 'example' do
 
   use_react_native!(
     :path => config[:reactNativePath],
-    # to enable hermes on iOS, change `false` to `true` and then install pods
-    :hermes_enabled => flags[:hermes_enabled],
+    # Hermes is now enabled by default. Disable by setting this flag to false.
+    # Upcoming versions of React Native may rely on get_default_flags(), but
+    # we make it explicit here to aid in the React Native upgrade process.
+    :hermes_enabled => true,
     :fabric_enabled => flags[:fabric_enabled],
+    # Enables Flipper.
+    #
+    # Note that if you have use_frameworks! enabled, Flipper will not work and
+    # you should disable the next line.
+    :flipper_configuration => FlipperConfiguration.enabled,
     # An absolute path to your application root.
     :app_path => "#{Pod::Config.instance.installation_root}/.."
   )
@@ -28,10 +35,14 @@ target 'example' do
   #
   # Note that if you have use_frameworks! enabled, Flipper will not work and
   # you should disable the next line.
-  use_flipper!()
+  # use_flipper!()
 
   post_install do |installer|
-    react_native_post_install(installer)
+    react_native_post_install(installer,
+    # Set `mac_catalyst_enabled` to `true` in order to apply patches
+    # necessary for Mac Catalyst builds
+    :mac_catalyst_enabled => false
+  )
     __apply_Xcode_12_5_M1_post_install_workaround(installer)
   end
 end