[DO NOT MERGE] RN77 new arch

android/build.gradle

@@ -6,8 +6,8 @@ buildscript {
         minSdkVersion = 26
         compileSdkVersion = 35
         targetSdkVersion = 34
-        ndkVersion = "26.1.10909125"
-        RNNKotlinVersion = "1.9.25"
+        ndkVersion = "27.1.12297006"
+        kotlinVersion = "2.0.21"
     }
     repositories {
         mavenLocal()
@@ -19,7 +19,7 @@ buildscript {
         classpath("com.facebook.react:react-native-gradle-plugin")
         classpath("org.jetbrains.kotlin:kotlin-gradle-plugin")
 
-        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$RNNKotlinVersion"
+        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion"
     }
 }
 

android/gradle.properties

@@ -28,7 +28,7 @@ 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
 
 # Use this property to enable or disable the Hermes JS engine.
 # If set to false, you will be using JSC instead.

demo/src/index.js

@@ -1,8 +1,7 @@
-import {UIManager, I18nManager} from 'react-native';
+import {I18nManager} from 'react-native';
 import {navigationData as menuStructure} from './screens/MenuStructure';
 import {loadDemoConfigurations} from './configurations';
 
-UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true); // eslint-disable-line
 I18nManager.allowRTL(true);
 
 module.exports = {

demo/src/screens/componentScreens/AnimatedImageScreen.js

@@ -4,8 +4,8 @@ import _ from 'lodash';
 import {AnimatedImage, Colors} from 'react-native-ui-lib'; //eslint-disable-line
 
 const SampleImages = [
-  'https://static.pexels.com/photos/50721/pencils-crayons-colourful-rainbow-50721.jpeg',
-  'https://static.pexels.com/photos/60628/flower-garden-blue-sky-hokkaido-japan-60628.jpeg'
+  'https://images.pexels.com/photos/2529146/pexels-photo-2529146.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
+  'https://images.pexels.com/photos/2529158/pexels-photo-2529158.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
 ];
 
 export default class AnimatedImageScreen extends Component {

demo/src/screens/componentScreens/SortableListScreen.tsx

@@ -129,7 +129,7 @@ export default SortableListScreen;
 const styles = StyleSheet.create({
   itemContainer: {
     height: 52,
-    borderColor: Colors.$outlineDefault,
+    borderBottomColor: Colors.$outlineDefault,
     borderBottomWidth: 1
   },
   selectedItemContainer: {

demo/src/screens/componentScreens/StackAggregatorScreen.tsx

@@ -68,7 +68,7 @@ export default class StackAggregatorScreen extends Component {
           containerStyle={{marginTop: 12}}
           onItemPress={this.onItemPress}
           collapsed={false}
-          contentContainerStyle={{backgroundColor: Colors.red70}}
+          backgroundColor={Colors.red70}
           // itemBorderRadius={10}
           // buttonProps={{color: Colors.green30, labelStyle: {...Typography.text80, fontWeight: '500'}}}
         >

demo/src/screens/componentScreens/TabControllerScreen/tab3.tsx

@@ -62,7 +62,7 @@ class Tab2 extends Component {
                   <Avatar
                     size={50}
                     source={{
-                      uri: 'https://static.pexels.com/photos/60628/flower-garden-blue-sky-hokkaido-japan-60628.jpeg'
+                      uri: 'https://images.pexels.com/photos/2529159/pexels-photo-2529159.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
                     }}
                   />
                   <Text text40 marginL-20>

demo/src/screens/incubatorScreens/PanViewScreen.tsx

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {StyleSheet, ScrollView} from 'react-native';
-import {FlatList} from 'react-native-gesture-handler';
+import {FlatList, GestureHandlerRootView} from 'react-native-gesture-handler';
 import {
   Assets,
   View,
@@ -147,7 +147,7 @@ class PanViewScreen extends Component {
   render() {
     const {showToast, showDialog} = this.state;
     return (
-      <View style={styles.root}>
+      <GestureHandlerRootView style={styles.root}>
         <View marginL-page height={50} centerV>
           <Text text50>New Pan View</Text>
         </View>
@@ -163,7 +163,7 @@ class PanViewScreen extends Component {
         </ScrollView>
         {showToast && this.renderToast()}
         {showDialog && this.renderDialog()}
-      </View>
+      </GestureHandlerRootView>
     );
   }
 }

demo/src/screens/nativeComponentScreens/HighlightOverlayViewScreen.js

@@ -16,7 +16,10 @@ export default class HighlightOverlayViewScreen extends PureComponent {
   }
 
   componentDidMount() {
-    this.setState({showFTE: true});
+    // setting timeout to allow Android's transition animation to complete
+    setTimeout(() => {
+      this.setState({showFTE: true});
+    }, 1000);
   }
 
   onRefUpdated(ref) {

docuilib/package.json

@@ -43,11 +43,10 @@
     "@types/react": "^17.0.14",
     "@types/react-helmet": "^6.1.2",
     "@types/react-router-dom": "^5.1.8",
-    "metro-react-native-babel-preset": "0.76.9",
+    "metro-react-native-babel-preset": "0.77.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-native-linear-gradient": "2.6.2",
-    "react-native-reanimated": "3.16.7",
     "react-native-shimmer-placeholder": "^2.0.9",
     "react-native-ui-lib": "snapshot",
     "shell-utils": "^1.0.10",

docuilib/plugins/uilib.js

@@ -6,13 +6,12 @@ module.exports = ({siteDir}, _options) => {
     path.resolve(siteDir, 'src'),
     path.resolve(siteDir, 'node_modules/react-native-web'),
     path.resolve(siteDir, 'node_modules/react-native-ui-lib'),
-    // // just for not getting warnings
     path.resolve(siteDir, 'node_modules/react-native-shimmer-placeholder'),
+    path.resolve(siteDir, 'node_modules/react-native-reanimated'),
     path.resolve(siteDir, 'node_modules/react-native-linear-gradient')
-    // // end just for not getting warnings
+    // just for not getting warnings
     // path.resolve(siteDir, 'node_modules/react-native-haptic-feedback'),
     // path.resolve(siteDir, 'node_modules/react-native-animatable'),
-    // path.resolve(siteDir, 'node_modules/react-native-reanimated'),
     // path.resolve(siteDir, 'node_modules/react-native-svg'),
     // path.resolve(siteDir, 'node_modules/react-native-svg-transformer'),
     // path.resolve(siteDir, 'node_modules/@react-native-community/netinfo'),

docuilib/yarn.lock

@@ -957,7 +957,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-arrow-functions@npm:^7.0.0, @babel/plugin-transform-arrow-functions@npm:^7.0.0-0, @babel/plugin-transform-arrow-functions@npm:^7.25.9":
+"@babel/plugin-transform-arrow-functions@npm:^7.0.0, @babel/plugin-transform-arrow-functions@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-arrow-functions@npm:7.25.9"
   dependencies:
@@ -1027,7 +1027,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-class-properties@npm:^7.0.0-0, @babel/plugin-transform-class-properties@npm:^7.25.9":
+"@babel/plugin-transform-class-properties@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-class-properties@npm:7.25.9"
   dependencies:
@@ -1051,7 +1051,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-classes@npm:^7.0.0, @babel/plugin-transform-classes@npm:^7.0.0-0, @babel/plugin-transform-classes@npm:^7.25.9":
+"@babel/plugin-transform-classes@npm:^7.0.0, @babel/plugin-transform-classes@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-classes@npm:7.25.9"
   dependencies:
@@ -1326,7 +1326,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.0.0-0, @babel/plugin-transform-nullish-coalescing-operator@npm:^7.25.9":
+"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.25.9"
   dependencies:
@@ -1384,7 +1384,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-optional-chaining@npm:^7.0.0-0, @babel/plugin-transform-optional-chaining@npm:^7.25.9":
+"@babel/plugin-transform-optional-chaining@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-optional-chaining@npm:7.25.9"
   dependencies:
@@ -1592,7 +1592,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-shorthand-properties@npm:^7.0.0, @babel/plugin-transform-shorthand-properties@npm:^7.0.0-0, @babel/plugin-transform-shorthand-properties@npm:^7.25.9":
+"@babel/plugin-transform-shorthand-properties@npm:^7.0.0, @babel/plugin-transform-shorthand-properties@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-shorthand-properties@npm:7.25.9"
   dependencies:
@@ -1626,7 +1626,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-template-literals@npm:^7.0.0-0, @babel/plugin-transform-template-literals@npm:^7.25.9":
+"@babel/plugin-transform-template-literals@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-template-literals@npm:7.25.9"
   dependencies:
@@ -1701,7 +1701,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-unicode-regex@npm:^7.0.0, @babel/plugin-transform-unicode-regex@npm:^7.0.0-0, @babel/plugin-transform-unicode-regex@npm:^7.25.9":
+"@babel/plugin-transform-unicode-regex@npm:^7.0.0, @babel/plugin-transform-unicode-regex@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-unicode-regex@npm:7.25.9"
   dependencies:
@@ -1833,7 +1833,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-typescript@npm:^7.16.7, @babel/preset-typescript@npm:^7.21.0, @babel/preset-typescript@npm:^7.25.9":
+"@babel/preset-typescript@npm:^7.21.0, @babel/preset-typescript@npm:^7.25.9":
   version: 7.26.0
   resolution: "@babel/preset-typescript@npm:7.26.0"
   dependencies:
@@ -9173,9 +9173,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"metro-react-native-babel-preset@npm:0.76.9":
-  version: 0.76.9
-  resolution: "metro-react-native-babel-preset@npm:0.76.9"
+"metro-react-native-babel-preset@npm:0.77.0":
+  version: 0.77.0
+  resolution: "metro-react-native-babel-preset@npm:0.77.0"
   dependencies:
     "@babel/core": ^7.20.0
     "@babel/plugin-proposal-async-generator-functions": ^7.0.0
@@ -9218,7 +9218,7 @@ __metadata:
     react-refresh: ^0.4.0
   peerDependencies:
     "@babel/core": "*"
-  checksum: 344fbcbcf82a9f8425a38a910716777cf45619d7b61a1a935a903f751e3a335ff8a54f80ba9fd9a16b96ac74e68f77760cb09d2c40ec6faf113308c91b863a9e
+  checksum: 09fb64735d4517f62cb0cbd386bdfa64d0de5a4f8c85b54c36b5799b242e897295d58c9d18e124033233841d8fcd33a109dda3dd9f1e5554e516f689eef14a0d
   languageName: node
   linkType: hard
 
@@ -11567,16 +11567,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-is-edge-to-edge@npm:1.1.7":
-  version: 1.1.7
-  resolution: "react-native-is-edge-to-edge@npm:1.1.7"
-  peerDependencies:
-    react: "*"
-    react-native: "*"
-  checksum: 4cdf2b2fb5b131f2015c26d2cb7688b4a0c5f3c8474b1bf0ddfa9eabb0263df440c87262ae8f812a6ecab0d5310df0373bddad4b51f53dabb2ffee01e9ef0f44
-  languageName: node
-  linkType: hard
-
 "react-native-linear-gradient@npm:2.6.2":
   version: 2.6.2
   resolution: "react-native-linear-gradient@npm:2.6.2"
@@ -11587,30 +11577,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-reanimated@npm:3.17.3":
-  version: 3.17.3
-  resolution: "react-native-reanimated@npm:3.17.3"
-  dependencies:
-    "@babel/plugin-transform-arrow-functions": ^7.0.0-0
-    "@babel/plugin-transform-class-properties": ^7.0.0-0
-    "@babel/plugin-transform-classes": ^7.0.0-0
-    "@babel/plugin-transform-nullish-coalescing-operator": ^7.0.0-0
-    "@babel/plugin-transform-optional-chaining": ^7.0.0-0
-    "@babel/plugin-transform-shorthand-properties": ^7.0.0-0
-    "@babel/plugin-transform-template-literals": ^7.0.0-0
-    "@babel/plugin-transform-unicode-regex": ^7.0.0-0
-    "@babel/preset-typescript": ^7.16.7
-    convert-source-map: ^2.0.0
-    invariant: ^2.2.4
-    react-native-is-edge-to-edge: 1.1.7
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-    react: "*"
-    react-native: "*"
-  checksum: 928c652e365ae9dca7bd6c895cf163294153ae64f73b63637fad0787e8c66266bb63faf5e7aa7bfc29f057eb176eab12d60029f6165a045f25f19165e693b98e
-  languageName: node
-  linkType: hard
-
 "react-native-redash@npm:^12.0.3":
   version: 12.6.1
   resolution: "react-native-redash@npm:12.6.1"
@@ -13524,14 +13490,13 @@ __metadata:
     clsx: ^1.1.1
     docusaurus-plugin-sass: ^0.2.1
     file-loader: ^6.2.0
-    metro-react-native-babel-preset: 0.76.9
+    metro-react-native-babel-preset: 0.77.0
     prettier: 2.8.8
     prism-react-renderer: ^2.4.1
     react: ^18.2.0
     react-dom: ^18.2.0
     react-html-parser: ^2.0.2
     react-native-linear-gradient: 2.6.2
-    react-native-reanimated: 3.17.3
     react-native-shimmer-placeholder: ^2.0.9
     react-native-ui-lib: snapshot
     react-native-web: ^0.19.12

expoDemo/package.json

@@ -18,7 +18,7 @@
     "metro-config": "^0.75.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.76.9",
+    "react-native": "0.77.2",
     "react-native-gesture-handler": "2.22.1",
     "react-native-haptic-feedback": "^1.14.0",
     "react-native-navigation": "8.0.0",

index.js

@@ -1,3 +1,4 @@
+import 'setimmediate';
 require('./demo/src/index');
 require('./demo/src/demoApp'); // this is separated from demo/src/index by purpose
 

ios/Podfile

@@ -1,4 +1,3 @@
-ENV['RCT_NEW_ARCH_ENABLED'] = '0'
 # Resolve react_native_pods.rb with node to allow for hoisting
 require Pod::Executable.execute_command('node', ['-p',
   'require.resolve(
@@ -24,12 +23,6 @@ target 'rnuilib' do
     # An absolute path to your application root.
     :app_path => "#{Pod::Config.instance.installation_root}/.."
   )
-
-  target 'rnuilibTests' do
-    inherit! :complete
-    # Pods for testing
-    # use_flipper!()
-  end
 
     post_install do |installer|
     # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202