fix: hide routes with opacity 0 for Android (#129)

okwasniewski · web-flow · commit 3d4db5f6801f · 2024-11-08T09:58:05.000+01:00
diff --git a/src/TabView.tsx b/src/TabView.tsx
@@ -271,6 +271,7 @@ const TabView = <Route extends BaseRoute>({
         }
 
         const focused = route.key === focusedKey;
+        const opacity = focused ? 1 : 0;
         const zIndex = focused ? 0 : -1;
 
         return (
@@ -282,7 +283,7 @@ const TabView = <Route extends BaseRoute>({
             importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
             style={
               Platform.OS === 'android'
-                ? [StyleSheet.absoluteFill, { zIndex }]
+                ? [StyleSheet.absoluteFill, { zIndex, opacity }]
                 : styles.fullWidth
             }
           >

Original file line number	Diff line number	Diff line change
`@@ -271,6 +271,7 @@ const TabView = <Route extends BaseRoute>({`
`271`	`271`	`}`
`272`	`272`
`273`	`273`	`const focused = route.key === focusedKey;`
	`274`	`+ const opacity = focused ? 1 : 0;`
`274`	`275`	`const zIndex = focused ? 0 : -1;`
`275`	`276`
`276`	`277`	`return (`
`@@ -282,7 +283,7 @@ const TabView = <Route extends BaseRoute>({`
`282`	`283`	`importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}`
`283`	`284`	`style={`
`284`	`285`	`Platform.OS === 'android'`
`285`		`- ? [StyleSheet.absoluteFill, { zIndex }]`
	`286`	`+ ? [StyleSheet.absoluteFill, { zIndex, opacity }]`
`286`	`287`	`: styles.fullWidth`
`287`	`288`	`}`
`288`	`289`	`>`