fix: layouting on Android move to zIndex (#125)

* fix: layouting on Android move to zIndex

* fix: fabric

Author: okwasniewski

example/package.json

@@ -25,7 +25,7 @@
     "react-native-gesture-handler": "^2.20.0",
     "react-native-paper": "^5.12.5",
     "react-native-safe-area-context": "^4.11.0",
-    "react-native-screens": "^3.34.0",
+    "react-native-screens": "^3.35.0",
     "react-native-vector-icons": "^10.2.0"
   },
   "devDependencies": {

src/TabView.tsx

@@ -253,16 +253,21 @@ const TabView = <Route extends BaseRoute>({
           );
         }
 
+        const focused = route.key === focusedKey;
+        const zIndex = focused ? 0 : -1;
+
         return (
           <View
             key={route.key}
             collapsable={false}
-            style={[
-              styles.fullWidth,
-              Platform.OS === 'android' && {
-                display: route.key === focusedKey ? 'flex' : 'none',
-              },
-            ]}
+            pointerEvents={focused ? 'auto' : 'none'}
+            accessibilityElementsHidden={!focused}
+            importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
+            style={
+              Platform.OS === 'android'
+                ? [StyleSheet.absoluteFill, { zIndex }]
+                : styles.fullWidth
+            }
           >
             {renderScene({
               route,

src/TabViewAdapter.android.tsx

@@ -2,11 +2,11 @@ import NativeTabView from './TabViewNativeComponent';
 import type { TabViewProps } from './TabViewNativeComponent';
 import { StyleSheet, View } from 'react-native';
 
-const TabViewAdapter = ({ children, ...props }: TabViewProps) => {
+const TabViewAdapter = ({ children, style: _, ...props }: TabViewProps) => {
   return (
     <>
       <View style={styles.content}>{children}</View>
-      <NativeTabView {...props} style={styles.tabBar} />
+      <NativeTabView {...props} />
     </>
   );
 };
@@ -24,7 +24,6 @@ const styles = StyleSheet.create({
     width: '100%',
     height: '100%',
   },
-  tabBar: {},
 });
 
 export default TabViewAdapter;

yarn.lock

@@ -13756,7 +13756,7 @@ __metadata:
     react-native-gesture-handler: ^2.20.0
     react-native-paper: ^5.12.5
     react-native-safe-area-context: ^4.11.0
-    react-native-screens: ^3.34.0
+    react-native-screens: ^3.35.0
     react-native-test-app: ^3.10.10
     react-native-vector-icons: ^10.2.0
   languageName: unknown
@@ -13874,16 +13874,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-screens@npm:^3.34.0":
-  version: 3.34.0
-  resolution: "react-native-screens@npm:3.34.0"
+"react-native-screens@npm:^3.35.0":
+  version: 3.35.0
+  resolution: "react-native-screens@npm:3.35.0"
   dependencies:
     react-freeze: ^1.0.0
     warn-once: ^0.1.0
   peerDependencies:
     react: "*"
     react-native: "*"
-  checksum: 28c1f6e556c318ffcbd79d153b9612cc8a0b8d8b70f909d3cde2fd6d0586a7c151a449e57400d8996f4ee6c3b5140c5c4f643a427e974f6dc573b2bcd8eb7356
+  checksum: cb8a0c8d8a41a8a1065cc2253e4272a970366a7d80bc54e889b2f48de7ccccd3e828e2701de39c0453a67956ec0cad140fb506324cce04419b5e2eb495c038c2
   languageName: node
   linkType: hard