react-native 0.68.1 → 0.69.0-rc.0

package/template/android/app/build.gradle

@@ -1,7 +1,6 @@
 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
@@ -152,18 +151,13 @@ android {
                         "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"
+                        "REACT_ANDROID_BUILD_DIR=$rootDir/../node_modules/react-native/ReactAndroid/build",
+                        "NODE_MODULES_DIR=$rootDir/../node_modules"
                     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 "helloworld_appmodules"
-
-                    // Fix for windows limit on number of character in file paths and in command lines
-                    if (Os.isFamily(Os.FAMILY_WINDOWS)) {
-                        arguments "NDK_OUT=${rootProject.projectDir.getParent()}\\.cxx",
-                            "NDK_APP_SHORT_COMMANDS=true"
-                    }
                 }
             }
             if (!enableSeparateBuildPerCPUArchitecture) {
@@ -283,9 +277,10 @@ dependencies {
     }
 
     if (enableHermes) {
-        def hermesPath = "../../node_modules/hermes-engine/android/";
-        debugImplementation files(hermesPath + "hermes-debug.aar")
-        releaseImplementation files(hermesPath + "hermes-release.aar")
+        //noinspection GradleDynamicVersion
+        implementation("com.facebook.react:hermes-engine:+") { // From node_modules
+            exclude group:'com.facebook.fbjni'
+        }
     } else {
         implementation jscFlavor
     }
@@ -298,7 +293,11 @@ if (isNewArchitectureEnabled()) {
     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")
+                    .using(project(":ReactAndroid"))
+                    .because("On New Architecture we're building React Native from source")
+            substitute(module("com.facebook.react:hermes-engine"))
+                    .using(project(":ReactAndroid:hermes-engine"))
+                    .because("On New Architecture we're building Hermes from source")
         }
     }
 }

package/template/android/app/src/main/java/com/helloworld/MainActivity.java

@@ -17,7 +17,8 @@ public class MainActivity extends ReactActivity {
 
   /**
    * 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).
+   * you can specify the renderer you wish to use - the new renderer (Fabric) or the old renderer
+   * (Paper).
    */
   @Override
   protected ReactActivityDelegate createReactActivityDelegate() {
@@ -36,5 +37,12 @@ public class MainActivity extends ReactActivity {
       reactRootView.setIsFabric(BuildConfig.IS_NEW_ARCHITECTURE_ENABLED);
       return reactRootView;
     }
+
+    @Override
+    protected boolean isConcurrentRootEnabled() {
+      // If you opted-in for the New Architecture, we enable Concurrent Root (i.e. React 18).
+      // More on this on https://reactjs.org/blog/2022/03/29/react-v18.html
+      return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED;
+    }
   }
 }

package/template/android/app/src/main/java/com/helloworld/newarchitecture/MainApplicationReactNativeHost.java

@@ -16,8 +16,8 @@ import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.bridge.UIManager;
 import com.facebook.react.fabric.ComponentFactory;
 import com.facebook.react.fabric.CoreComponentsRegistry;
-import com.facebook.react.fabric.EmptyReactNativeConfig;
 import com.facebook.react.fabric.FabricJSIModuleProvider;
+import com.facebook.react.fabric.ReactNativeConfig;
 import com.facebook.react.uimanager.ViewManagerRegistry;
 import com.helloworld.BuildConfig;
 import com.helloworld.newarchitecture.components.MainComponentsRegistry;
@@ -105,7 +105,7 @@ public class MainApplicationReactNativeHost extends ReactNativeHost {
                 return new FabricJSIModuleProvider(
                     reactApplicationContext,
                     componentFactory,
-                    new EmptyReactNativeConfig(),
+                    ReactNativeConfig.DEFAULT_CONFIG,
                     viewManagerRegistry);
               }
             });

package/template/android/app/src/main/jni/Android.mk

@@ -17,7 +17,7 @@ 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 
+# 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
@@ -28,8 +28,7 @@ LOCAL_EXPORT_C_INCLUDES := $(LOCAL_PATH)
 LOCAL_SHARED_LIBRARIES := \
   libfabricjni \
   libfbjni \
-  libfolly_futures \
-  libfolly_json \
+  libfolly_runtime \
   libglog \
   libjsi \
   libreact_codegen_rncore \

package/template/android/build.gradle

@@ -26,9 +26,9 @@ buildscript {
         mavenCentral()
     }
     dependencies {
-        classpath("com.android.tools.build:gradle:7.0.4")
+        classpath("com.android.tools.build:gradle:7.1.1")
         classpath("com.facebook.react:react-native-gradle-plugin")
-        classpath("de.undercouch:gradle-download-task:4.1.2")
+        classpath("de.undercouch:gradle-download-task:5.0.1")
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files
     }

package/template/android/settings.gradle

@@ -6,4 +6,6 @@ includeBuild('../node_modules/react-native-gradle-plugin')
 if (settings.hasProperty("newArchEnabled") && settings.newArchEnabled == "true") {
     include(":ReactAndroid")
     project(":ReactAndroid").projectDir = file('../node_modules/react-native/ReactAndroid')
+    include(":ReactAndroid:hermes-engine")
+    project(":ReactAndroid:hermes-engine").projectDir = file('../node_modules/react-native/ReactAndroid/hermes-engine')
 }

package/template/ios/HelloWorld/AppDelegate.mm

@@ -16,6 +16,8 @@
 
 #import <react/config/ReactNativeConfig.h>
 
+static NSString *const kRNConcurrentRoot = @"concurrentRoot";
+
 @interface AppDelegate () <RCTCxxBridgeDelegate, RCTTurboModuleManagerDelegate> {
   RCTTurboModuleManager *_turboModuleManager;
   RCTSurfacePresenterBridgeAdapter *_bridgeAdapter;
@@ -41,7 +43,8 @@
   bridge.surfacePresenter = _bridgeAdapter.surfacePresenter;
 #endif
 
-  UIView *rootView = RCTAppSetupDefaultRootView(bridge, @"HelloWorld", nil);
+  NSDictionary *initProps = [self prepareInitialProps];
+  UIView *rootView = RCTAppSetupDefaultRootView(bridge, @"HelloWorld", initProps);
 
   if (@available(iOS 13.0, *)) {
     rootView.backgroundColor = [UIColor systemBackgroundColor];
@@ -57,6 +60,28 @@
   return YES;
 }
 
+/// This method controls whether the `concurrentRoot`feature of React18 is turned on or off.
+///
+/// @see: https://reactjs.org/blog/2022/03/29/react-v18.html
+/// @note: This requires to be rendering on Fabric (i.e. on the New Architecture).
+/// @return: `true` if the `concurrentRoot` feture is enabled. Otherwise, it returns `false`.
+- (BOOL)concurrentRootEnabled
+{
+  // Switch this bool to turn on and off the concurrent root
+  return true;
+}
+
+- (NSDictionary *)prepareInitialProps
+{
+  NSMutableDictionary *initProps = [NSMutableDictionary new];
+
+#ifdef RCT_NEW_ARCH_ENABLED
+  initProps[kRNConcurrentRoot] = @([self concurrentRootEnabled]);
+#endif
+
+  return initProps;
+}
+
 - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
 {
 #if DEBUG

package/template/ios/HelloWorld.xcodeproj/project.pbxproj

@@ -256,13 +256,15 @@
 			files = (
 			);
 			inputPaths = (
+				"$(SRCROOT)/.xcode.env.local",
+				"$(SRCROOT)/.xcode.env",
 			);
 			name = "Bundle React Native code and images";
 			outputPaths = (
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "set -e\n\nexport NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh\n";
+			shellScript = "set -e\n\nWITH_ENVIRONMENT=\"../node_modules/react-native/scripts/xcode/with-environment.sh\"\nREACT_NATIVE_XCODE=\"../node_modules/react-native/scripts/react-native-xcode.sh\"\n\n/bin/sh -c \"$WITH_ENVIRONMENT $REACT_NATIVE_XCODE\"\n";
 		};
 		00EEFC60759A1932668264C0 /* [CP] Embed Pods Frameworks */ = {
 			isa = PBXShellScriptBuildPhase;
@@ -436,7 +438,7 @@
 					"$(inherited)",
 				);
 				INFOPLIST_FILE = HelloWorldTests/Info.plist;
-				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 12.4;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",
@@ -460,7 +462,7 @@
 				BUNDLE_LOADER = "$(TEST_HOST)";
 				COPY_PHASE_STRIP = NO;
 				INFOPLIST_FILE = HelloWorldTests/Info.plist;
-				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 12.4;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",
@@ -576,7 +578,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 12.4;
 				LD_RUNPATH_SEARCH_PATHS = (
 					/usr/lib/swift,
 					"$(inherited)",
@@ -640,7 +642,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 12.4;
 				LD_RUNPATH_SEARCH_PATHS = (
 					/usr/lib/swift,
 					"$(inherited)",

package/template/ios/Podfile

@@ -1,7 +1,7 @@
 require_relative '../node_modules/react-native/scripts/react_native_pods'
 require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
 
-platform :ios, '11.0'
+platform :ios, '12.4'
 install! 'cocoapods', :deterministic_uuids => false
 
 target 'HelloWorld' do

package/template/ios/_xcode.env

@@ -0,0 +1,11 @@
+# This `.xcode.env` file is versioned and is used to source the environment
+# used when running script phases inside Xcode.
+# To customize your local environment, you can create an `.xcode.env.local`
+# file that is not versioned.
+
+# NODE_BINARY variable contains the PATH to the node executable.
+#
+# Customize the NODE_BINARY variable here.
+# For example, to use nvm with brew, add the following line
+# . "$(brew --prefix nvm)/nvm.sh" --no-use
+export NODE_BINARY=$(command -v node)

package/template/package.json

@@ -10,8 +10,8 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "react": "17.0.2",
-    "react-native": "0.68.1"
+    "react": "18.0.0",
+    "react-native": "0.69.0-rc.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
@@ -20,8 +20,8 @@
     "babel-jest": "^26.6.3",
     "eslint": "^7.32.0",
     "jest": "^26.6.3",
-    "metro-react-native-babel-preset": "^0.67.0",
-    "react-test-renderer": "17.0.2"
+    "metro-react-native-babel-preset": "^0.70.1",
+    "react-test-renderer": "18.0.0"
   },
   "jest": {
     "preset": "react-native"

package/third-party-podspecs/DoubleConversion.podspec

@@ -21,6 +21,6 @@ Pod::Spec.new do |spec|
   spec.user_target_xcconfig = { "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/DoubleConversion\"" }
 
   # Pinning to the same version as React.podspec.
-  spec.platforms = { :ios => "11.0" }
+  spec.platforms = { :ios => "12.4" }
 
 end

package/third-party-podspecs/glog.podspec

@@ -33,6 +33,6 @@ Pod::Spec.new do |spec|
                                "HEADER_SEARCH_PATHS" => "$(PODS_TARGET_SRCROOT)/src" }
 
   # Pinning to the same version as React.podspec.
-  spec.platforms = { :ios => "11.0" }
+  spec.platforms = { :ios => "12.4" }
 
 end

package/Libraries/Components/SegmentedControlIOS/RCTSegmentedControlNativeComponent.js

@@ -1,44 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow strict-local
- * @format
- */
-
-import codegenNativeComponent from '../../Utilities/codegenNativeComponent';
-import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
-import type {ViewProps} from '../View/ViewPropTypes';
-import type {
-  BubblingEventHandler,
-  WithDefault,
-  Int32,
-} from '../../Types/CodegenTypes';
-import type {ColorValue} from '../../StyleSheet/StyleSheet';
-
-export type OnChangeEvent = $ReadOnly<{|
-  value: Int32,
-  selectedSegmentIndex: Int32,
-|}>;
-
-type NativeProps = $ReadOnly<{|
-  ...ViewProps,
-
-  // Props
-  values?: $ReadOnlyArray<string>,
-  selectedIndex?: WithDefault<Int32, 0>,
-  enabled?: WithDefault<boolean, true>,
-  tintColor?: ?ColorValue,
-  textColor?: ?ColorValue,
-  backgroundColor?: ?ColorValue,
-  momentary?: WithDefault<boolean, false>,
-
-  // Events
-  onChange?: ?BubblingEventHandler<OnChangeEvent>,
-|}>;
-
-export default (codegenNativeComponent<NativeProps>(
-  'RCTSegmentedControl',
-): HostComponent<NativeProps>);

package/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.android.js

@@ -1,45 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- */
-
-'use strict';
-import * as React from 'react';
-import StyleSheet from '../../StyleSheet/StyleSheet';
-import Text from '../../Text/Text';
-import View from '../View/View';
-
-class DummySegmentedControlIOS extends React.Component {
-  render() {
-    return (
-      <View style={[styles.dummy, this.props.style]}>
-        <Text style={styles.text}>
-          SegmentedControlIOS is not supported on this platform!
-        </Text>
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  dummy: {
-    width: 120,
-    height: 50,
-    backgroundColor: '#ffbcbc',
-    borderWidth: 1,
-    borderColor: 'red',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  text: {
-    color: '#333333',
-    margin: 5,
-    fontSize: 10,
-  },
-});
-
-module.exports = DummySegmentedControlIOS;

package/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js

@@ -1,123 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- * @flow strict-local
- */
-
-import * as React from 'react';
-import StyleSheet from '../../StyleSheet/StyleSheet';
-import type {OnChangeEvent} from './RCTSegmentedControlNativeComponent';
-import type {ViewProps} from '../View/ViewPropTypes';
-import RCTSegmentedControlNativeComponent from './RCTSegmentedControlNativeComponent';
-import type {SyntheticEvent} from 'react-native/Libraries/Types/CoreEventTypes';
-
-type SegmentedControlIOSProps = $ReadOnly<{|
-  ...ViewProps,
-  /**
-   * The labels for the control's segment buttons, in order.
-   *
-   * The default value is an empty array.
-   */
-  values?: $ReadOnlyArray<string>,
-  /**
-   * The index in `props.values` of the segment to be (pre)selected.
-   */
-  selectedIndex?: ?number,
-  /**
-   * If false the user won't be able to interact with the control.
-   *
-   * The default value is true.
-   */
-  enabled?: boolean,
-  /**
-   * Accent color of the control.
-   */
-  tintColor?: ?string,
-  /**
-   * If true, then selecting a segment won't persist visually.
-   * The `onValueChange` callback will still work as expected.
-   */
-  momentary?: ?boolean,
-  /**
-   * Callback that is called when the user taps a segment
-   */
-  onChange?: ?(event: SyntheticEvent<OnChangeEvent>) => void,
-  /**
-   * Callback that is called when the user taps a segment;
-   * passes the segment's value as an argument
-   */
-  onValueChange?: ?(value: number) => mixed,
-|}>;
-
-type Props = $ReadOnly<{|
-  ...SegmentedControlIOSProps,
-  forwardedRef: ?React.Ref<typeof RCTSegmentedControlNativeComponent>,
-|}>;
-
-/**
- * Use `SegmentedControlIOS` to render a UISegmentedControl iOS.
- *
- * #### Programmatically changing selected index
- *
- * The selected index can be changed on the fly by assigning the
- * selectedIndex prop to a state variable, then changing that variable.
- * Note that the state variable would need to be updated as the user
- * selects a value and changes the index, as shown in the example below.
- *
- * ````
- * <SegmentedControlIOS
- *   values={['One', 'Two']}
- *   selectedIndex={this.state.selectedIndex}
- *   onChange={(event) => {
- *     this.setState({selectedIndex: event.nativeEvent.selectedSegmentIndex});
- *   }}
- * />
- * ````
- */
-
-class SegmentedControlIOS extends React.Component<Props> {
-  _onChange = (event: SyntheticEvent<OnChangeEvent>) => {
-    this.props.onChange && this.props.onChange(event);
-    this.props.onValueChange &&
-      this.props.onValueChange(event.nativeEvent.value);
-  };
-
-  render() {
-    const {enabled, forwardedRef, onValueChange, style, values, ...props} =
-      this.props;
-    return (
-      <RCTSegmentedControlNativeComponent
-        {...props}
-        ref={forwardedRef}
-        style={[styles.segmentedControl, style]}
-        enabled={enabled !== false}
-        values={values ?? []}
-        onChange={this._onChange}
-      />
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  segmentedControl: {
-    height: 28,
-  },
-});
-
-const SegmentedControlIOSWithRef = React.forwardRef(
-  (
-    props: SegmentedControlIOSProps,
-    forwardedRef: ?React.Ref<typeof RCTSegmentedControlNativeComponent>,
-  ) => {
-    return <SegmentedControlIOS {...props} forwardedRef={forwardedRef} />;
-  },
-);
-
-/* $FlowFixMe[cannot-resolve-name] (>=0.89.0 site=react_native_ios_fb) This
- * comment suppresses an error found when Flow v0.89 was deployed. To see the
- * error, delete this comment and run Flow. */
-module.exports = (SegmentedControlIOSWithRef: NativeSegmentedControlIOS);