fix: remove custom shadow nodes measurements

Author: okwasniewski

apps/example/android/gradle.properties

@@ -40,7 +40,7 @@ reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
 # to write custom TurboModules/Fabric components OR use libraries that
 # are providing them.
 # Note that this is incompatible with web debugging.
-newArchEnabled=false
+newArchEnabled=true
 #bridgelessEnabled=true
 
 # Uncomment the line below to build React Native from source.

apps/example/src/App.tsx

@@ -27,6 +27,7 @@ import TintColorsExample from './Examples/TintColors';
 import NativeBottomTabsEmbeddedStacks from './Examples/NativeBottomTabsEmbeddedStacks';
 import NativeBottomTabsSVGs from './Examples/NativeBottomTabsSVGs';
 import NativeBottomTabsRemoteIcons from './Examples/NativeBottomTabsRemoteIcons';
+import NativeBottomTabsUnmounting from './Examples/NativeBottomTabsUnmounting';
 
 const FourTabsIgnoreSafeArea = () => {
   return <FourTabs ignoresTopSafeArea />;
@@ -95,7 +96,6 @@ const examples = [
   {
     component: FourTabsNoAnimations,
     name: 'Four Tabs - no animations',
-    platform: 'ios',
   },
   {
     component: FourTabsTransparentScrollEdgeAppearance,
@@ -128,6 +128,10 @@ const examples = [
     component: NativeBottomTabsSVGs,
     name: 'Native Bottom Tabs with SVG Icons',
   },
+  {
+    component: NativeBottomTabsUnmounting,
+    name: 'Native Bottom Tabs unmounting',
+  },
   {
     component: NativeBottomTabsRemoteIcons,
     name: 'Native Bottom Tabs with SVG Remote Icons',

apps/example/src/Examples/NativeBottomTabsUnmounting.tsx

@@ -0,0 +1,63 @@
+import { Article } from '../Screens/Article';
+import { Albums } from '../Screens/Albums';
+import { Contacts } from '../Screens/Contacts';
+import { Chat } from '../Screens/Chat';
+import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation';
+import React from 'react';
+import { Alert } from 'react-native';
+
+const Tab = createNativeBottomTabNavigator();
+
+function NativeBottomTabsUnmounting() {
+  const [isTabMounted, setIsTabMounted] = React.useState(true);
+
+  React.useEffect(() => {
+    const id = setTimeout(() => {
+      setIsTabMounted(false);
+      Alert.alert('Tab is unmounted');
+    }, 1000);
+
+    return () => clearTimeout(id);
+  }, []);
+  return (
+    <Tab.Navigator initialRouteName="Chat" labeled={true}>
+      <Tab.Screen
+        name="Article"
+        component={Article}
+        options={{
+          tabBarButtonTestID: 'articleTestID',
+          tabBarBadge: '10',
+          tabBarIcon: ({ focused }) =>
+            focused
+              ? require('../../assets/icons/person_dark.png')
+              : require('../../assets/icons/article_dark.png'),
+        }}
+      />
+      <Tab.Screen
+        name="Albums"
+        component={Albums}
+        options={{
+          tabBarIcon: () => require('../../assets/icons/grid_dark.png'),
+        }}
+      />
+      <Tab.Screen
+        name="Contacts"
+        component={Contacts}
+        options={{
+          tabBarIcon: () => require('../../assets/icons/person_dark.png'),
+        }}
+      />
+      {isTabMounted && (
+        <Tab.Screen
+          name="Chat"
+          component={Chat}
+          options={{
+            tabBarIcon: () => require('../../assets/icons/chat_dark.png'),
+          }}
+        />
+      )}
+    </Tab.Navigator>
+  );
+}
+
+export default NativeBottomTabsUnmounting;

packages/react-native-bottom-tabs/android/build.gradle

@@ -14,11 +14,6 @@ buildscript {
   }
 }
 
-def reactNativeArchitectures() {
-  def value = rootProject.getProperties().get("reactNativeArchitectures")
-  return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"]
-}
-
 def isNewArchitectureEnabled() {
   return rootProject.hasProperty("newArchEnabled") && rootProject.getProperty("newArchEnabled") == "true"
 }

packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabView.kt

@@ -174,6 +174,7 @@ class ReactBottomNavigationView(context: ReactContext) : FrameLayout(context) {
 
   fun updateItems(items: MutableList<TabInfo>) {
     this.items = items
+    bottomNavigation.menu.clear()
     items.forEachIndexed { index, item ->
       val menuItem = getOrCreateItem(index, item.title)
       menuItem.isVisible = !item.hidden
@@ -291,7 +292,9 @@ class ReactBottomNavigationView(context: ReactContext) : FrameLayout(context) {
     bottomNavigation.itemBackground = colorDrawable
     backgroundTintList = ColorStateList.valueOf(backgroundColor)
     // Set navigationBarColor for edge-to-edge.
-    reactContext.currentActivity?.window?.navigationBarColor = backgroundColor
+    if (Utils.isEdgeToEdge()) {
+      reactContext.currentActivity?.window?.navigationBarColor = backgroundColor
+    }
   }
 
   fun setActiveTintColor(color: Int?) {
@@ -380,6 +383,8 @@ class ReactBottomNavigationView(context: ReactContext) : FrameLayout(context) {
 
   override fun onDetachedFromWindow() {
     super.onDetachedFromWindow()
-    reactContext.currentActivity?.window?.navigationBarColor = Color.TRANSPARENT
+    if (Utils.isEdgeToEdge()) {
+      reactContext.currentActivity?.window?.navigationBarColor = Color.TRANSPARENT
+    }
   }
 }

packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabViewImpl.kt

@@ -24,27 +24,24 @@ class RCTTabViewImpl {
   fun setItems(view: ReactBottomNavigationView, items: ReadableArray) {
     val itemsArray = mutableListOf<TabInfo>()
     for (i in 0 until items.size()) {
-      items.getMap(i).let { item ->
-        itemsArray.add(
-          TabInfo(
-            key = item.getString("key") ?: "",
-            title = item.getString("title") ?: "",
-            badge = item.getString("badge") ?: "",
-            activeTintColor = if (item.hasKey("activeTintColor")) item.getInt("activeTintColor") else null,
-            hidden = if (item.hasKey("hidden")) item.getBoolean("hidden") else false,
-            testID = item.getString("testID")
+      items.getMap(i)?.let { item ->
+          itemsArray.add(
+            TabInfo(
+              key = item.getString("key") ?: "",
+              title = item.getString("title") ?: "",
+              badge = item.getString("badge") ?: "",
+              activeTintColor = if (item.hasKey("activeTintColor")) item.getInt("activeTintColor") else null,
+              hidden = if (item.hasKey("hidden")) item.getBoolean("hidden") else false,
+              testID = item.getString("testID")
+            )
           )
-        )
       }
     }
     view.updateItems(itemsArray)
   }
 
   fun setSelectedPage(view: ReactBottomNavigationView, key: String) {
     view.setSelectedItem(key)
-//    view.items?.indexOfFirst { it.key == key }?.let {
-//      view.setSelectedItemId(it)
-//    }
   }
 
   fun setLabeled(view: ReactBottomNavigationView, flag: Boolean?) {

packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/Utils.kt

@@ -27,5 +27,13 @@ class Utils {
       )
       return baseColor.defaultColor
     }
+
+    // Detect `react-native-edge-to-edge` (https://github.com/zoontek/react-native-edge-to-edge)
+    fun isEdgeToEdge() = try {
+      Class.forName("com.zoontek.rnedgetoedge.EdgeToEdgePackage")
+      true
+    } catch (exception: ClassNotFoundException) {
+      false
+    }
   }
 }