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

@@ -44,7 +44,7 @@ class ReactBottomNavigationView(context: ReactContext) : FrameLayout(context) {
   var onTabLongPressedListener: ((key: String) -> Unit)? = null
   var onNativeLayoutListener: ((width: Double, height: Double) -> Unit)? = null
   var disablePageTransitions = false
-  var items: MutableList<TabInfo>? = null
+  var items: MutableList<TabInfo> = mutableListOf()
 
   private var selectedItem: String? = null
   private val iconSources: MutableMap<Int, ImageSource> = mutableMapOf()
@@ -106,17 +106,15 @@ class ReactBottomNavigationView(context: ReactContext) : FrameLayout(context) {
 
   fun setSelectedItem(value: String) {
     selectedItem = value
-    items?.indexOfFirst { it.key == value }?.let {
-      setSelectedIndex(it)
-    }
+    setSelectedIndex(items.indexOfFirst { it.key == value })
   }
 
   override fun addView(child: View, index: Int, params: ViewGroup.LayoutParams?) {
     if (child === viewPager || child === bottomNavigation) {
       super.addView(child, index, params)
     } else {
       viewPagerAdapter.addChild(child, index)
-      val itemKey = items?.get(index)?.key
+      val itemKey = items[index].key
       if (selectedItem == itemKey) {
         setSelectedIndex(index)
       }
@@ -157,22 +155,26 @@ class ReactBottomNavigationView(context: ReactContext) : FrameLayout(context) {
   }
 
   private fun onTabSelected(item: MenuItem) {
-    val selectedItem = items?.first { it.title == item.title }
-    selectedItem?.let {
+    val selectedItem = items.first { it.title == item.title }
+    selectedItem.let {
       onTabSelectedListener?.invoke(selectedItem.key)
       emitHapticFeedback(HapticFeedbackConstants.CONTEXT_CLICK)
     }
   }
 
   private fun onTabLongPressed(item: MenuItem) {
-    val longPressedItem = items?.firstOrNull { it.title == item.title }
+    val longPressedItem = items.firstOrNull { it.title == item.title }
     longPressedItem?.let {
       onTabLongPressedListener?.invoke(longPressedItem.key)
       emitHapticFeedback(HapticFeedbackConstants.LONG_PRESS)
     }
   }
 
   fun updateItems(items: MutableList<TabInfo>) {
+    // If an item got removed, let's re-add all items
+    if (items.size < this.items.size) {
+      bottomNavigation.menu.clear()
+    }
     this.items = items
     items.forEachIndexed { index, item ->
       val menuItem = getOrCreateItem(index, item.title)
@@ -248,11 +250,9 @@ class ReactBottomNavigationView(context: ReactContext) : FrameLayout(context) {
       false -> {
         LABEL_VISIBILITY_UNLABELED
       }
-
       true -> {
         LABEL_VISIBILITY_LABELED
       }
-
       else -> {
         LABEL_VISIBILITY_AUTO
       }
@@ -291,7 +291,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?) {
@@ -359,7 +361,7 @@ class ReactBottomNavigationView(context: ReactContext) : FrameLayout(context) {
 
   private fun updateTintColors(item: MenuItem? = null) {
     // First let's check current item color.
-    val currentItemTintColor = items?.find { it.title == item?.title }?.activeTintColor
+    val currentItemTintColor = items.find { it.title == item?.title }?.activeTintColor
 
     // getDefaultColor will always return a valid color but to satisfy the compiler we need to check for null
     val colorPrimary = currentItemTintColor ?: activeTintColor ?: Utils.getDefaultColorFor(
@@ -380,6 +382,9 @@ 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
+    }
+    imageLoader.shutdown()
   }
 }

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
+    }
   }
 }