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.

babel.config.js

@@ -1,5 +1,17 @@
 module.exports = {
   presets: ['module:@react-native/babel-preset'],
+  env: {
+    test: {
+      presets: [
+        [
+          'module:@react-native/babel-preset',
+          {
+            disableStaticViewConfigsCodegen: true
+          }
+        ]
+      ]
+    }
+  },
   plugins: [
     'react-native-reanimated/plugin',
     [

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/MenuStructure.js

@@ -81,7 +81,7 @@ export const navigationData = {
     screens: [
       {title: 'Action Sheet', tags: 'action sheet cross-platform', screen: 'unicorn.components.ActionSheetScreen'},
       {title: 'Dialog', tags: 'dialog modal popup alert', screen: 'unicorn.components.DialogScreen'},
-      {title: 'Feature Highlight', tags: 'feature overlay', screen: 'unicorn.components.FeatureHighlightScreen'},
+      {title: 'Feature Highlight', tags: 'native feature overlay', screen: 'unicorn.components.FeatureHighlightScreen'},
       {title: 'Floating Button', tags: 'floating button', screen: 'unicorn.components.FloatingButtonScreen'},
       {title: 'Hint', tags: 'hints tooltip', screen: 'unicorn.components.HintsScreen'},
       {title: 'Toast', tags: 'toast top bottom snackbar', screen: 'unicorn.components.ToastsScreen'}
@@ -117,10 +117,10 @@ export const navigationData = {
       {title: 'LoadingScreen', tags: 'loading screen', screen: 'unicorn.screens.LoadingScreen'},
       {title: 'Modal', tags: 'modal topbar screen', screen: 'unicorn.screens.ModalScreen'},
       {title: 'StateScreen', tags: 'empty state screen', screen: 'unicorn.screens.EmptyStateScreen'},
-      {title: 'TabController', tags: 'tabbar controller native', screen: 'unicorn.components.TabControllerScreen'},
+      {title: 'TabController', tags: 'tabbar controller', screen: 'unicorn.components.TabControllerScreen'},
       {
         title: 'TabControllerWithStickyHeader',
-        tags: 'tabbar controller native sticky header',
+        tags: 'tabbar controller sticky header',
         screen: 'unicorn.components.TabControllerWithStickyHeaderScreen'
       },
       {title: 'Timeline', tags: 'timeline', screen: 'unicorn.components.TimelineScreen'},
@@ -148,28 +148,28 @@ export const navigationData = {
     screens: [
       {
         title: 'KeyboardAwareScrollView',
-        tags: 'KeyboardAwareScrollView',
+        tags: 'native KeyboardAwareScrollView',
         screen: 'unicorn.components.KeyboardAwareScrollViewScreen'
       },
       {
         title: 'Dynamic Fonts',
-        tags: 'dynamic fonts load download',
+        tags: 'native dynamic fonts load download',
         screen: 'unicorn.nativeComponents.DynamicFontsScreen'
       },
       {
         title: 'Highlight Overlay',
-        tags: 'native overlay',
+        tags: 'native native overlay',
         screen: 'unicorn.nativeComponents.HighlightOverlayViewScreen'
       },
       {title: 'SafeArea Spacer', tags: 'native safe area', screen: 'unicorn.nativeComponents.SafeAreaSpacerViewScreen'},
       {
         title: 'KeyboardTracking (iOS)',
-        tags: 'KeyboardTracking',
+        tags: 'native KeyboardTracking',
         screen: 'unicorn.nativeComponents.KeyboardTrackingViewScreen'
       },
       {
         title: 'KeyboardAccessoryView',
-        tags: 'KeyboardInput',
+        tags: 'native KeyboardInput',
         screen: 'unicorn.nativeComponents.KeyboardAccessoryViewScreen'
       }
     ]
@@ -193,7 +193,7 @@ export const navigationData = {
     screens: [
       {title: 'Calendar', tags: 'calendar', screen: 'unicorn.components.IncubatorCalendarScreen'},
       {title: 'ChipsInput', tags: 'chips input', screen: 'unicorn.components.ChipsInputScreen'},
-      {title: 'Native TouchableOpacity', tags: 'touchable native', screen: 'unicorn.incubator.TouchableOpacityScreen'},
+      {title: 'Native TouchableOpacity', tags: 'native touchable', screen: 'unicorn.incubator.TouchableOpacityScreen'},
       {title: 'Toast (New)', tags: 'toast', screen: 'unicorn.components.IncubatorToastScreen'},
       {
         title: 'ExpandableOverlay',

demo/src/screens/__tests__/__snapshots__/TextFieldScreen.spec.js.snap

@@ -1522,16 +1522,38 @@ exports[`TextField Screen renders screen 1`] = `
                   numberOfLines={1}
                   onLayout={[Function]}
                   style={
-                    {
-                      "backgroundColor": "transparent",
-                      "color": "#6E7881",
-                      "fontFamily": "System",
-                      "fontSize": 16,
-                      "fontWeight": "400",
-                      "lineHeight": 24,
-                      "opacity": 0,
-                      "writingDirection": "ltr",
-                    }
+                    [
+                      {
+                        "backgroundColor": "transparent",
+                        "color": "#20303C",
+                        "writingDirection": "ltr",
+                      },
+                      undefined,
+                      {
+                        "color": "#6E7881",
+                      },
+                      undefined,
+                      undefined,
+                      {},
+                      undefined,
+                      undefined,
+                      undefined,
+                      [
+                        {},
+                        [
+                          {},
+                          {
+                            "fontFamily": "System",
+                            "fontSize": 16,
+                            "fontWeight": "400",
+                            "lineHeight": 24,
+                          },
+                        ],
+                        {
+                          "opacity": 0,
+                        },
+                      ],
+                    ]
                   }
                   testID="undefined.floatingPlaceholder"
                 >
@@ -2118,16 +2140,38 @@ exports[`TextField Screen renders screen 1`] = `
                   numberOfLines={1}
                   onLayout={[Function]}
                   style={
-                    {
-                      "backgroundColor": "transparent",
-                      "color": "#20303C",
-                      "fontFamily": "System",
-                      "fontSize": 16,
-                      "fontWeight": "400",
-                      "lineHeight": 24,
-                      "opacity": 0,
-                      "writingDirection": "ltr",
-                    }
+                    [
+                      {
+                        "backgroundColor": "transparent",
+                        "color": "#20303C",
+                        "writingDirection": "ltr",
+                      },
+                      undefined,
+                      {
+                        "color": "#20303C",
+                      },
+                      undefined,
+                      undefined,
+                      {},
+                      undefined,
+                      undefined,
+                      undefined,
+                      [
+                        {},
+                        [
+                          {},
+                          {
+                            "fontFamily": "System",
+                            "fontSize": 16,
+                            "fontWeight": "400",
+                            "lineHeight": 24,
+                          },
+                        ],
+                        {
+                          "opacity": 0,
+                        },
+                      ],
+                    ]
                   }
                   testID="undefined.floatingPlaceholder"
                 >
@@ -2433,16 +2477,38 @@ exports[`TextField Screen renders screen 1`] = `
                   numberOfLines={1}
                   onLayout={[Function]}
                   style={
-                    {
-                      "backgroundColor": "transparent",
-                      "color": "#20303C",
-                      "fontFamily": "System",
-                      "fontSize": 16,
-                      "fontWeight": "400",
-                      "lineHeight": 24,
-                      "opacity": 0,
-                      "writingDirection": "ltr",
-                    }
+                    [
+                      {
+                        "backgroundColor": "transparent",
+                        "color": "#20303C",
+                        "writingDirection": "ltr",
+                      },
+                      undefined,
+                      {
+                        "color": "#20303C",
+                      },
+                      undefined,
+                      undefined,
+                      {},
+                      undefined,
+                      undefined,
+                      undefined,
+                      [
+                        {},
+                        [
+                          {},
+                          {
+                            "fontFamily": "System",
+                            "fontSize": 16,
+                            "fontWeight": "400",
+                            "lineHeight": 24,
+                          },
+                        ],
+                        {
+                          "opacity": 0,
+                        },
+                      ],
+                    ]
                   }
                   testID="undefined.floatingPlaceholder"
                 >

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/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,
@@ -146,7 +146,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>
@@ -162,7 +162,7 @@ class PanViewScreen extends Component {
         </ScrollView>
         {showToast && this.renderToast()}
         {showDialog && this.renderDialog()}
-      </View>
+      </GestureHandlerRootView>
     );
   }
 }

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/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/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) {

demo/src/screens/nativeComponentScreens/SafeAreaSpacerViewScreen.tsx

@@ -23,6 +23,7 @@ export default class SafeAreaSpacerViewScreen extends PureComponent {
               <Text red50> SafeAreaSpacerView </Text>
               {'can be used as a BOTTOM or TOP spacer and will get the height of the safe area insets'}
             </Text>
+            <SafeAreaSpacerView style={{width: 100, backgroundColor: 'red'}}/>
           </View>
         </ScrollView>
         <View style={styles.topView}>

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'),