Upgrade Example to RN 0.68.2

CHANGELOG.md

@@ -14,6 +14,7 @@ x.x.x Release notes (yyyy-MM-dd)
 * File format: generates Realms with format v22 (reads and upgrades file format v5 or later for non-synced Realm, upgrades file format v10 or later for synced Realms).
 
 ### Internal
+* Upgrade Example to RN v0.68.2
 * <Either mention core version or upgrade>
 * <Using Realm Core vX.Y.Z>
 * <Upgraded Realm Core from vX.Y.Z to vA.B.C>

example/.eslintrc.js

@@ -1,4 +1,16 @@
 module.exports = {
  root: true,
  extends: '@react-native-community',
+ parser: '@typescript-eslint/parser',
+ plugins: ['@typescript-eslint'],
+ overrides: [
+ {
+ files: ['*.ts', '*.tsx'],
+ rules: {
+ '@typescript-eslint/no-shadow': ['error'],
+ 'no-shadow': 'off',
+ 'no-undef': 'off',
+ },
+ },
+ ],
 };

example/.gitignore

@@ -56,5 +56,6 @@ buck-out/
 # Bundle artifact
 *.jsbundle
 
-# CocoaPods
+# Ruby / CocoaPods
 /ios/Pods/
+/vendor/bundle/

example/.prettierrc.js

@@ -1,7 +1,7 @@
 module.exports = {
+ arrowParens: 'avoid',
+ bracketSameLine: true,
  bracketSpacing: false,
- jsxBracketSameLine: true,
  singleQuote: true,
  trailingComma: 'all',
- arrowParens: 'avoid',
 };

example/.ruby-version

@@ -0,0 +1 @@
+2.7.4

example/Gemfile

@@ -0,0 +1,6 @@
+source 'https://rubygems.org'
+
+# You may use http:https://rbenv.org/ or https://rvm.io/ to install and use this version
+ruby '2.7.4'
+
+gem 'cocoapods', '~> 1.11', '>= 1.11.2'

example/__tests__/App-test.tsx

@@ -4,11 +4,11 @@
 
 import 'react-native';
 import React from 'react';
-import {AppWrapperNonSync} from '../app/AppWrapperNonSync';
+import App from '../App';
 
 // Note: test renderer must be required after react-native.
 import renderer from 'react-test-renderer';
 
 it('renders correctly', () => {
- renderer.create(<AppWrapperNonSync />);
+ renderer.create(<App />);
 });

example/_bundle/config

@@ -0,0 +1,2 @@
+BUNDLE_PATH: "vendor/bundle"
+BUNDLE_FORCE_RUBY_PLATFORM: 1

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
@@ -114,16 +115,19 @@ def jscFlavor = 'org.webkit:android-jsc:+'
 /**
  * Whether to enable the Hermes VM.
  *
- * This should be set on project.ext.react and mirrored here.  If it is not set
+ * This should be set on project.ext.react and that value will be read here. If it is not set
  * on project.ext.react, JavaScript will not be compiled to Hermes Bytecode
  * and the benefits of using Hermes will therefore be sharply reduced.
  */
 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
@@ -136,13 +140,86 @@ android {
  targetSdkVersion rootProject.ext.targetSdkVersion
  versionCode 1
  versionName "1.0"
+ 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 "realmtstemplate_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())
+ }
+ }
+ }
  }
+
+ 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 false // If true, also generate a universal APK
- include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
+ include (*reactNativeArchitectures())
  }
  }
  signingConfigs {
@@ -156,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.
@@ -190,6 +262,7 @@ android {
 
 dependencies {
  implementation fileTree(dir: "libs", include: ["*.jar"])
+
  //noinspection GradleDynamicVersion
  implementation "com.facebook.react:react-native:+" // From node_modules
 
@@ -217,6 +290,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) {
@@ -225,3 +310,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"
+}

example/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>

example/android/app/src/debug/java/com/realmtstemplate/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;
@@ -51,7 +52,7 @@ public void apply(OkHttpClient.Builder builder) {
  ReactContext reactContext = reactInstanceManager.getCurrentReactContext();
  if (reactContext == null) {
  reactInstanceManager.addReactInstanceEventListener(
- new ReactInstanceManager.ReactInstanceEventListener() {
+ new ReactInstanceEventListener() {
  @Override
  public void onReactContextInitialized(ReactContext reactContext) {
  reactInstanceManager.removeReactInstanceEventListener(this);

example/android/app/src/main/AndroidManifest.xml

@@ -13,9 +13,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.MAIN" />
  <category android:name="android.intent.category.LAUNCHER" />

example/android/app/src/main/java/com/realmtstemplate/MainActivity.java

@@ -1,6 +1,8 @@
 package com.realmtstemplate;
 
 import com.facebook.react.ReactActivity;
+import com.facebook.react.ReactActivityDelegate;
+import com.facebook.react.ReactRootView;
 
 public class MainActivity extends ReactActivity {
 
@@ -12,4 +14,27 @@ public class MainActivity extends ReactActivity {
  protected String getMainComponentName() {
  return "RealmTsTemplate";
  }
+
+ /**
+ * Returns the instance of the {@link ReactActivityDelegate}. There the RootView is created and
+ * you can specify the rendered you wish to use (Fabric or the older renderer).
+ */
+ @Override
+ protected ReactActivityDelegate createReactActivityDelegate() {
+ return new MainActivityDelegate(this, getMainComponentName());
+ }
+
+ public static class MainActivityDelegate extends ReactActivityDelegate {
+ public MainActivityDelegate(ReactActivity activity, String mainComponentName) {
+ super(activity, mainComponentName);
+ }
+
+ @Override
+ protected ReactRootView createRootView() {
+ ReactRootView reactRootView = new ReactRootView(getContext());
+ // If you opted-in for the New Architecture, we enable the Fabric Renderer.
+ reactRootView.setIsFabric(BuildConfig.IS_NEW_ARCHITECTURE_ENABLED);
+ return reactRootView;
+ }
+ }
 }

example/android/app/src/main/java/com/realmtstemplate/MainApplication.java

@@ -7,7 +7,9 @@
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
+import com.facebook.react.config.ReactFeatureFlags;
 import com.facebook.soloader.SoLoader;
+import com.realmtstemplate.newarchitecture.MainApplicationReactNativeHost;
 import java.lang.reflect.InvocationTargetException;
 import java.util.List;
 
@@ -35,14 +37,23 @@ protected String getJSMainModuleName() {
  }
  };
 
+ private final ReactNativeHost mNewArchitectureNativeHost =
+ new MainApplicationReactNativeHost(this);
+
  @Override
  public ReactNativeHost getReactNativeHost() {
- return mReactNativeHost;
+ if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
+ return mNewArchitectureNativeHost;
+ } else {
+ return mReactNativeHost;
+ }
  }
 
  @Override
  public void onCreate() {
  super.onCreate();
+ // If you opted-in for the New Architecture, we enable the TurboModule system
+ ReactFeatureFlags.useTurboModules = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED;
  SoLoader.init(this, /* native exopackage */ false);
  initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
  }