fix: make pressable items work when switching screens on new arch (#288)

* fix: make pressable items work when switching screens on new arch

* chore: add pressable testing examples

Author: okwasniewski

.changeset/cold-rabbits-grin.md

@@ -0,0 +1,5 @@
+---
+'react-native-bottom-tabs': patch
+---
+
+fix: make pressable items work when switching screens on new arch

apps/example/src/Screens/Chat.tsx

@@ -8,6 +8,8 @@ import {
   Text,
   TextInput,
   View,
+  Button,
+  Alert,
 } from 'react-native';
 
 const MESSAGES = [
@@ -27,6 +29,7 @@ export function Chat({
       behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
       style={styles.container}
     >
+      <Button onPress={() => Alert.alert('Hey')} title="Press me" />
       <ScrollView
         contentInsetAdjustmentBehavior="automatic"
         style={styles.inverted}

apps/example/src/Screens/Contacts.tsx

@@ -1,12 +1,14 @@
 import { useScrollToTop } from '@react-navigation/native';
 import * as React from 'react';
 import {
+  Alert,
   FlatList,
   type FlatListProps,
   Platform,
   SafeAreaView,
   StyleSheet,
   Text,
+  TouchableOpacity,
   View,
 } from 'react-native';
 import { useBottomTabBarHeight } from 'react-native-bottom-tabs';
@@ -74,7 +76,10 @@ const CONTACTS: Item[] = [
 const ContactItem = React.memo(
   ({ item }: { item: { name: string; number: number } }) => {
     return (
-      <View style={[styles.item, { backgroundColor: '#fff' }]}>
+      <TouchableOpacity
+        style={[styles.item, { backgroundColor: '#fff' }]}
+        onPress={() => Alert.alert(`Pressed: ${item.name}`)}
+      >
         <View style={styles.avatar}>
           <Text style={styles.letter}>
             {item.name.slice(0, 1).toUpperCase()}
@@ -84,7 +89,7 @@ const ContactItem = React.memo(
           <Text style={styles.name}>{item.name}</Text>
           <Text style={[styles.number, { opacity: 0.5 }]}>{item.number}</Text>
         </View>
-      </View>
+      </TouchableOpacity>
     );
   }
 );

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

@@ -18,7 +18,6 @@ import android.view.ViewGroup
 import android.widget.FrameLayout
 import android.widget.LinearLayout
 import android.widget.TextView
-import androidx.core.view.children
 import androidx.core.view.forEachIndexed
 import coil3.ImageLoader
 import coil3.asDrawable
@@ -138,7 +137,6 @@ class ReactBottomNavigationView(context: Context) : LinearLayout(context) {
     }
 
     val container = createContainer()
-    child.isEnabled = false
     container.addView(child, params)
     layoutHolder.addView(container, index)
 
@@ -155,7 +153,8 @@ class ReactBottomNavigationView(context: Context) : LinearLayout(context) {
         FrameLayout.LayoutParams.MATCH_PARENT,
         FrameLayout.LayoutParams.MATCH_PARENT
       )
-      visibility = INVISIBLE
+      isSaveEnabled = false
+      visibility = GONE
       isEnabled = false
     }
     return container
@@ -183,12 +182,8 @@ class ReactBottomNavigationView(context: Context) : LinearLayout(context) {
   private fun toggleViewVisibility(view: View, isVisible: Boolean) {
     check(view is ViewGroup) { "Native component tree is corrupted." }
 
-    view.visibility = if (isVisible) VISIBLE else INVISIBLE
+    view.visibility = if (isVisible) VISIBLE else GONE
     view.isEnabled = isVisible
-
-    // Container has only 1 child, wrapped React Native view.
-    val reactNativeView = view.children.first()
-    reactNativeView.isEnabled = isVisible
   }
 
   private fun onTabSelected(item: MenuItem) {

packages/react-native-bottom-tabs/src/TabView.tsx

@@ -324,11 +324,7 @@ const TabView = <Route extends BaseRoute>({
               importantForAccessibility={
                 focused ? 'auto' : 'no-hide-descendants'
               }
-              style={
-                Platform.OS === 'android'
-                  ? [measuredDimensions]
-                  : [{ position: 'absolute' }, measuredDimensions]
-              }
+              style={[{ position: 'absolute' }, measuredDimensions]}
             >
               {renderScene({
                 route,