feat: new arch (#64)

* feat: new arch

* fix: make old arch work, change Android color handling

* ci: add new arch job

Author: okwasniewski

.github/workflows/ci.yml

@@ -145,3 +145,44 @@ jobs:
       - name: Build example for iOS
         run: |
           yarn turbo run build:ios --cache-dir="${{ env.TURBO_CACHE_DIR }}"
+
+
+  build-ios-newarch:
+    runs-on: macos-15
+    env:
+      TURBO_CACHE_DIR: .turbo/ios-newarch
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup
+        uses: ./.github/actions/setup
+
+      - name: Cache turborepo for iOS
+        uses: actions/cache@v3
+        with:
+          path: ${{ env.TURBO_CACHE_DIR }}
+          key: ${{ runner.os }}-turborepo-ios-newarch-${{ hashFiles('yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-turborepo-ios-
+
+      - name: Check turborepo cache for iOS
+        run: |
+          TURBO_CACHE_STATUS=$(node -p "($(yarn turbo run build:ios --cache-dir="${{ env.TURBO_CACHE_DIR }}" --dry=json)).tasks.find(t => t.task === 'build:ios').cache.status")
+
+          if [[ $TURBO_CACHE_STATUS == "HIT" ]]; then
+            echo "turbo_cache_hit=1" >> $GITHUB_ENV
+          fi
+
+      - name: Install cocoapods
+        if: env.turbo_cache_hit != 1 && steps.cocoapods-cache.outputs.cache-hit != 'true'
+        run: |
+          cd example
+          pod install --project-directory=ios
+        env:
+          RCT_NEW_ARCH_ENABLED: 1
+          NO_FLIPPER: 1
+
+      - name: Build example for iOS
+        run: |
+          yarn turbo run build:ios --cache-dir="${{ env.TURBO_CACHE_DIR }}"

android/src/main/java/com/rcttabview/RCTTabViewViewManager.kt

@@ -69,25 +69,25 @@ class RCTTabViewViewManager :
     view.setIcons(icons)
   }
 
-  @ReactProp(name = "barTintColor")
+  @ReactProp(name = "barTintColor", customType = "Color")
   fun setBarTintColor(view: ReactBottomNavigationView, color: Int?) {
     view.setBarTintColor(color)
   }
 
-  @ReactProp(name = "rippleColor")
+  @ReactProp(name = "rippleColor", customType = "Color")
   fun setRippleColor(view: ReactBottomNavigationView, rippleColor: Int?) {
     if (rippleColor != null) {
       val color = ColorStateList.valueOf(rippleColor)
       view.setRippleColor(color)
     }
   }
 
-  @ReactProp(name = "activeTintColor")
+  @ReactProp(name = "activeTintColor", customType = "Color")
   fun setActiveTintColor(view: ReactBottomNavigationView, color: Int?) {
     view.setActiveTintColor(color)
   }
 
-  @ReactProp(name = "inactiveTintColor")
+  @ReactProp(name = "inactiveTintColor", customType = "Color")
   fun setInactiveTintColor(view: ReactBottomNavigationView, color: Int?) {
     view.setInactiveTintColor(color)
   }
@@ -151,7 +151,7 @@ class RCTTabViewViewManager :
   }
 
   companion object {
-    const val NAME = "RCTTabView"
+    const val NAME = "RNCTabView"
   }
 
   override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any>? {

example/ios/Podfile.lock

@@ -1232,7 +1232,71 @@ PODS:
     - SwiftUIIntrospect (~> 1.0)
     - Yoga
   - react-native-safe-area-context (4.11.0):
+    - DoubleConversion
+    - glog
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-jsi
+    - react-native-safe-area-context/common (= 4.11.0)
+    - react-native-safe-area-context/fabric (= 4.11.0)
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
+  - react-native-safe-area-context/common (4.11.0):
+    - DoubleConversion
+    - glog
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
+  - react-native-safe-area-context/fabric (4.11.0):
+    - DoubleConversion
+    - glog
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
     - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-jsi
+    - react-native-safe-area-context/common
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
   - React-nativeconfig (0.75.3)
   - React-NativeModulesApple (0.75.3):
     - glog
@@ -1491,6 +1555,7 @@ PODS:
     - React-ImageManager
     - React-jsi
     - React-NativeModulesApple
+    - React-RCTAppDelegate
     - React-RCTFabric
     - React-rendererdebug
     - React-utils
@@ -1524,6 +1589,29 @@ PODS:
     - ReactCommon/turbomodule/core
     - Yoga
   - RNScreens (3.34.0):
+    - DoubleConversion
+    - glog
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-RCTImage
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - RNScreens/common (= 3.34.0)
+    - Yoga
+  - RNScreens/common (3.34.0):
     - DoubleConversion
     - glog
     - RCT-Folly (= 2024.01.01.00)
@@ -1578,6 +1666,7 @@ DEPENDENCIES:
   - React-idlecallbacksnativemodule (from `../node_modules/react-native/ReactCommon/react/nativemodule/idlecallbacks`)
   - React-ImageManager (from `../node_modules/react-native/ReactCommon/react/renderer/imagemanager/platform/ios`)
   - React-jsc (from `../node_modules/react-native/ReactCommon/jsc`)
+  - React-jsc/Fabric (from `../node_modules/react-native/ReactCommon/jsc`)
   - React-jserrorhandler (from `../node_modules/react-native/ReactCommon/jserrorhandler`)
   - React-jsi (from `../node_modules/react-native/ReactCommon/jsi`)
   - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
@@ -1804,9 +1893,9 @@ SPEC CHECKSUMS:
   React-performancetimeline: d15a723422ed500f47cb271f3175abbeb217f5ba
   React-RCTActionSheet: cb2b38a53d03ec22f1159c89667b86c2c490d92d
   React-RCTAnimation: 6836c87c7364f471e9077fda80b7349bc674be33
-  React-RCTAppDelegate: fb2037d3472bda5c31ea16a04cc48e19fe81c792
+  React-RCTAppDelegate: 8939a29da847bc51a01264d020a58d9d5035e119
   React-RCTBlob: 984c80df29f3b3e3193bfbc2768bd302c889719b
-  React-RCTFabric: 5e691cfb4cd3a9060ddbfb04916284c3c6a933e8
+  React-RCTFabric: 4bb022567aacec7417d04741cba7e7baaeec6add
   React-RCTImage: 1b2c2c1716db859ffff2d7a06a30b0ec5c677fc5
   React-RCTLinking: 59c07577767e705b0ab95d11e5ad74c61bf2a022
   React-RCTNetwork: f9a827e7d6bc428e0d99cd1fbe0427854354b8c1
@@ -1834,4 +1923,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 539add55dc6c2e7f9754e288b1ce4fd8583819ae
 
-COCOAPODS: 1.15.2
+COCOAPODS: 1.14.3

example/src/Examples/NativeBottomTabs.tsx

@@ -11,8 +11,10 @@ const Tab = createNativeBottomTabNavigator();
 function NativeBottomTabs() {
   return (
     <Tab.Navigator
-      tabBarInactiveTintColor="red"
-      tabBarActiveTintColor="orange"
+      tabBarInactiveTintColor="#C57B57"
+      tabBarActiveTintColor="#F7DBA7"
+      barTintColor="#1E2D2F"
+      rippleColor="#041F1E"
       screenListeners={{
         tabLongPress: (data) => {
           console.log(
@@ -59,7 +61,7 @@ function NativeBottomTabs() {
         component={Chat}
         options={{
           tabBarIcon: () => require('../../assets/icons/chat_dark.png'),
-          tabBarActiveTintColor: 'purple',
+          tabBarActiveTintColor: 'white',
         }}
       />
     </Tab.Navigator>

ios/Extensions.swift

@@ -27,3 +27,13 @@ extension UIView {
     ])
   }
 }
+
+extension UIImage {
+  func resizeImageTo(size: CGSize) -> UIImage? {
+    UIGraphicsBeginImageContextWithOptions(size, false, 0.0)
+    self.draw(in: CGRect(origin: CGPoint.zero, size: size))
+    let resizedImage = UIGraphicsGetImageFromCurrentImageContext()!
+    UIGraphicsEndImageContext()
+    return resizedImage
+  }
+}

ios/Fabric/RCTTabViewComponentView.h

@@ -0,0 +1,12 @@
+#ifdef RCT_NEW_ARCH_ENABLED
+#import <React/RCTViewComponentView.h>
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RCTTabViewComponentView: RCTViewComponentView
+@end
+
+NS_ASSUME_NONNULL_END
+
+#endif /* RCT_NEW_ARCH_ENABLED */