From 5b908e8bc3e7ef145c5e72bba5e0f222e17412b8 Mon Sep 17 00:00:00 2001 From: shubhamguptadream11 Date: Sun, 3 Nov 2024 16:43:32 +0530 Subject: [PATCH 1/6] feat: added freezeOnBlur --- example/src/App.tsx | 5 ++ .../Examples/NativeBottomTabsFreezeOnBlur.tsx | 85 +++++++++++++++++++ package.json | 7 +- src/TabView.tsx | 21 ++++- src/react-navigation/types.ts | 9 ++ .../views/NativeBottomTabView.tsx | 3 + src/react-navigation/views/ScreenFallback.tsx | 30 +++++++ src/types.ts | 1 + yarn.lock | 17 ++++ 9 files changed, 174 insertions(+), 4 deletions(-) create mode 100644 example/src/Examples/NativeBottomTabsFreezeOnBlur.tsx create mode 100644 src/react-navigation/views/ScreenFallback.tsx diff --git a/example/src/App.tsx b/example/src/App.tsx index 2c53eb9..ea21e3f 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -31,6 +31,7 @@ import LabeledTabs from './Examples/Labeled'; import NativeBottomTabs from './Examples/NativeBottomTabs'; import TintColorsExample from './Examples/TintColors'; import NativeBottomTabsVectorIcons from './Examples/NativeBottomTabsVectorIcons'; +import NativeBottomTabsFreezeOnBlur from './Examples/NativeBottomTabsFreezeOnBlur'; const FourTabsIgnoreSafeArea = () => { return ; @@ -112,6 +113,10 @@ const examples = [ component: NativeBottomTabsVectorIcons, name: 'Native Bottom Tabs with Vector Icons', }, + { + component: NativeBottomTabsFreezeOnBlur, + name: 'Native Bottom Tabs with FreezeOnBlur', + }, { component: NativeBottomTabs, name: 'Native Bottom Tabs' }, { component: JSBottomTabs, name: 'JS Bottom Tabs' }, { diff --git a/example/src/Examples/NativeBottomTabsFreezeOnBlur.tsx b/example/src/Examples/NativeBottomTabsFreezeOnBlur.tsx new file mode 100644 index 0000000..9af2f44 --- /dev/null +++ b/example/src/Examples/NativeBottomTabsFreezeOnBlur.tsx @@ -0,0 +1,85 @@ +import * as React from 'react'; +import { Text, View } from 'react-native'; +import createNativeBottomTabNavigator from '../../../src/react-navigation/navigators/createNativeBottomTabNavigator'; +// import { enableFreeze } from 'react-native-screens'; + +const store = new Set(); +// enableFreeze(true) + +type Dispatch = (value: number) => void; + +function useValue() { + const [value, setValue] = React.useState(0); // integer state + + React.useEffect(() => { + const dispatch = (value: number) => { + setValue(value); + }; + store.add(dispatch); + return () => { + store.delete(dispatch); + }; + }, [setValue]); + + return value; +} + +function HomeScreen() { + return ( + + Home! + + ); +} + +function DetailsScreen() { + const value = useValue(); + const random = React.useRef(Math.random()); + // only 1 'render' should appear at the time + console.log('Details Screen render', value, random); + return ( + + Details! + + Details Screen {value + random.current} + + + ); +} +const Tab = createNativeBottomTabNavigator(); + +export default function NativeBottomTabsFreezeOnBlur() { + React.useEffect(() => { + let timer = 0; + const interval = setInterval(() => { + timer = timer + 1; + store.forEach((dispatch) => dispatch(timer)); + }, 3000); + return () => clearInterval(interval); + }, []); + + return ( + + + + + + + ); +} diff --git a/package.json b/package.json index 1366a0d..5bf3c2e 100644 --- a/package.json +++ b/package.json @@ -100,6 +100,7 @@ "react": "18.3.1", "react-native": "0.75.3", "react-native-builder-bob": "^0.30.2", + "react-native-screens": "^3.16.0", "release-it": "^15.0.0", "turbo": "^1.10.7", "typescript": "^5.2.2" @@ -110,11 +111,15 @@ "peerDependencies": { "@react-navigation/native": ">=6", "react": "*", - "react-native": "*" + "react-native": "*", + "react-native-screens": ">=3.16.0" }, "peerDependenciesMeta": { "@react-navigation/native": { "optional": true + }, + "react-native-screens": { + "optional": true } }, "workspaces": [ diff --git a/src/TabView.tsx b/src/TabView.tsx index fe27620..72ad02b 100644 --- a/src/TabView.tsx +++ b/src/TabView.tsx @@ -14,6 +14,7 @@ import TabViewAdapter from './TabViewAdapter'; import useLatestCallback from 'use-latest-callback'; import { useMemo, useState } from 'react'; import type { BaseRoute, NavigationState } from './types'; +import { MaybeScreen } from './react-navigation/views/ScreenFallback'; const isAppleSymbol = (icon: any): icon is { sfSymbol: string } => icon?.sfSymbol; @@ -104,6 +105,13 @@ interface Props { focused: boolean; }) => ImageSource | undefined; + /** + * Get freezeOnBlur for the current screen. Uses false by default. + * Defaults to `true` when `enableFreeze()` is run at the top of the application. + * + */ + getFreezeOnBlur?: (props: { route: Route }) => boolean | undefined; + /** * Background color of the tab bar. */ @@ -136,6 +144,7 @@ const TabView = ({ : route.focusedIcon, barTintColor, getActiveTintColor = ({ route }: { route: Route }) => route.activeTintColor, + getFreezeOnBlur = ({ route }: { route: Route }) => route.freezeOnBlur, tabBarActiveTintColor: activeTintColor, tabBarInactiveTintColor: inactiveTintColor, hapticFeedbackEnabled = true, @@ -253,14 +262,20 @@ const TabView = ({ ); } + const freezeOnBlur = getFreezeOnBlur({ route }); + const isFocused = route.key === focusedKey; + return ( - @@ -268,7 +283,7 @@ const TabView = ({ route, jumpTo, })} - + ); })} diff --git a/src/react-navigation/types.ts b/src/react-navigation/types.ts index 1d26653..fe77833 100644 --- a/src/react-navigation/types.ts +++ b/src/react-navigation/types.ts @@ -81,6 +81,15 @@ export type NativeBottomTabNavigationOptions = { * Active tab color. */ tabBarActiveTintColor?: string; + + /** + * Whether inactive screens should be suspended from re-rendering. Defaults to `false`. + * Defaults to `true` when `enableFreeze()` is run at the top of the application. + * Requires `react-native-screens` version >=3.16.0. + * + * Only supported on iOS and Android. + */ + freezeOnBlur?: boolean; }; export type NativeBottomTabDescriptor = Descriptor< diff --git a/src/react-navigation/views/NativeBottomTabView.tsx b/src/react-navigation/views/NativeBottomTabView.tsx index 43f74ed..2ce8310 100644 --- a/src/react-navigation/views/NativeBottomTabView.tsx +++ b/src/react-navigation/views/NativeBottomTabView.tsx @@ -50,6 +50,9 @@ export default function NativeBottomTabView({ return null; }} + getFreezeOnBlur={({ route }) => + descriptors[route.key]?.options.freezeOnBlur + } getLazy={({ route }) => descriptors[route.key]?.options.lazy ?? true} onTabLongPress={(index) => { const route = state.routes[index]; diff --git a/src/react-navigation/views/ScreenFallback.tsx b/src/react-navigation/views/ScreenFallback.tsx new file mode 100644 index 0000000..8aa322c --- /dev/null +++ b/src/react-navigation/views/ScreenFallback.tsx @@ -0,0 +1,30 @@ +import * as React from 'react'; +import { StyleProp, View, ViewStyle } from 'react-native'; + +type Props = { + visible: boolean; + children: React.ReactNode; + enabled: boolean; + freezeOnBlur?: boolean; + style?: StyleProp; + collapsable?: boolean; +}; + +let Screens: typeof import('react-native-screens') | undefined; + +try { + Screens = require('react-native-screens'); +} catch (e) { + // Ignore +} + +export function MaybeScreen({ visible, children, ...rest }: Props) { + if (Screens?.screensEnabled?.()) { + return ( + + {children} + + ); + } + return {children}; +} diff --git a/src/types.ts b/src/types.ts index 5ddf5aa..ff49bb8 100644 --- a/src/types.ts +++ b/src/types.ts @@ -13,6 +13,7 @@ export type BaseRoute = { focusedIcon?: ImageSourcePropType | AppleIcon; unfocusedIcon?: ImageSourcePropType | AppleIcon; activeTintColor?: string; + freezeOnBlur?: boolean; }; export type NavigationState = { diff --git a/yarn.lock b/yarn.lock index c8e0aee..7f45dc4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13786,6 +13786,7 @@ __metadata: react: 18.3.1 react-native: 0.75.3 react-native-builder-bob: ^0.30.2 + react-native-screens: ^3.16.0 release-it: ^15.0.0 sf-symbols-typescript: ^2.0.0 turbo: ^1.10.7 @@ -13795,9 +13796,12 @@ __metadata: "@react-navigation/native": ">=6" react: "*" react-native: "*" + react-native-screens: ">=3.16.0" peerDependenciesMeta: "@react-navigation/native": optional: true + react-native-screens: + optional: true languageName: unknown linkType: soft @@ -13874,6 +13878,19 @@ __metadata: languageName: node linkType: hard +"react-native-screens@npm:^3.16.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: cb8a0c8d8a41a8a1065cc2253e4272a970366a7d80bc54e889b2f48de7ccccd3e828e2701de39c0453a67956ec0cad140fb506324cce04419b5e2eb495c038c2 + languageName: node + linkType: hard + "react-native-screens@npm:^3.34.0": version: 3.34.0 resolution: "react-native-screens@npm:3.34.0" From dcb3e8193a6b952c2b5d2d306ca9be94972a89e5 Mon Sep 17 00:00:00 2001 From: shubhamguptadream11 Date: Sun, 3 Nov 2024 17:49:40 +0530 Subject: [PATCH 2/6] feat: screen container implemented --- .../Examples/NativeBottomTabsFreezeOnBlur.tsx | 53 +++++++---- src/TabView.tsx | 93 ++++++++++++------- src/react-navigation/views/ScreenFallback.tsx | 17 +++- 3 files changed, 110 insertions(+), 53 deletions(-) diff --git a/example/src/Examples/NativeBottomTabsFreezeOnBlur.tsx b/example/src/Examples/NativeBottomTabsFreezeOnBlur.tsx index 9af2f44..dabc24b 100644 --- a/example/src/Examples/NativeBottomTabsFreezeOnBlur.tsx +++ b/example/src/Examples/NativeBottomTabsFreezeOnBlur.tsx @@ -1,15 +1,13 @@ import * as React from 'react'; import { Text, View } from 'react-native'; import createNativeBottomTabNavigator from '../../../src/react-navigation/navigators/createNativeBottomTabNavigator'; -// import { enableFreeze } from 'react-native-screens'; const store = new Set(); -// enableFreeze(true) type Dispatch = (value: number) => void; function useValue() { - const [value, setValue] = React.useState(0); // integer state + const [value, setValue] = React.useState(0); React.useEffect(() => { const dispatch = (value: number) => { @@ -28,8 +26,6 @@ function HomeScreen() { return ( Details! - - Details Screen {value + random.current} - + Details Screen {value} ); } @@ -75,11 +66,39 @@ export default function NativeBottomTabsFreezeOnBlur() { }, []); return ( - - - - - + + require('../../assets/icons/article_dark.png'), + }} + /> + require('../../assets/icons/grid_dark.png'), + }} + /> + require('../../assets/icons/person_dark.png'), + }} + /> + require('../../assets/icons/chat_dark.png'), + }} + /> ); } diff --git a/src/TabView.tsx b/src/TabView.tsx index 72ad02b..19ab9fb 100644 --- a/src/TabView.tsx +++ b/src/TabView.tsx @@ -14,7 +14,10 @@ import TabViewAdapter from './TabViewAdapter'; import useLatestCallback from 'use-latest-callback'; import { useMemo, useState } from 'react'; import type { BaseRoute, NavigationState } from './types'; -import { MaybeScreen } from './react-navigation/views/ScreenFallback'; +import { + MaybeScreen, + MaybeScreenContainer, +} from './react-navigation/views/ScreenFallback'; const isAppleSymbol = (icon: any): icon is { sfSymbol: string } => icon?.sfSymbol; @@ -125,6 +128,13 @@ interface Props { * Color of tab indicator. (Android only) */ activeIndicatorColor?: ColorValue; + + /** + * Whether inactive screens should be detached from the view hierarchy to save memory. + * Make sure to call `enableScreens` from `react-native-screens` to make it work. + * Defaults to `true` on Android. + */ + detachInactiveScreens?: boolean; } const ANDROID_MAX_TABS = 6; @@ -145,6 +155,9 @@ const TabView = ({ barTintColor, getActiveTintColor = ({ route }: { route: Route }) => route.activeTintColor, getFreezeOnBlur = ({ route }: { route: Route }) => route.freezeOnBlur, + detachInactiveScreens = Platform.OS === 'web' || + Platform.OS === 'android' || + Platform.OS === 'ios', tabBarActiveTintColor: activeTintColor, tabBarInactiveTintColor: inactiveTintColor, hapticFeedbackEnabled = true, @@ -247,45 +260,51 @@ const TabView = ({ barTintColor={barTintColor} rippleColor={rippleColor} > - {trimmedRoutes.map((route) => { - if (getLazy({ route }) !== false && !loaded.includes(route.key)) { - // Don't render a screen if we've never navigated to it - if (Platform.OS === 'android') { - return null; + + {trimmedRoutes.map((route) => { + if (getLazy({ route }) !== false && !loaded.includes(route.key)) { + // Don't render a screen if we've never navigated to it + if (Platform.OS === 'android') { + return null; + } + return ( + + ); } + + const freezeOnBlur = getFreezeOnBlur({ route }); + const isFocused = route.key === focusedKey; + return ( - + style={[ + styles.fullWidth, + Platform.OS === 'android' && { + display: isFocused ? 'flex' : 'none', + }, + ]} + > + {renderScene({ + route, + jumpTo, + })} + ); - } - - const freezeOnBlur = getFreezeOnBlur({ route }); - const isFocused = route.key === focusedKey; - - return ( - - {renderScene({ - route, - jumpTo, - })} - - ); - })} + })} + ); }; @@ -295,6 +314,10 @@ const styles = StyleSheet.create({ width: '100%', height: '100%', }, + container: { + flex: 1, + overflow: 'hidden', + }, }); export default TabView; diff --git a/src/react-navigation/views/ScreenFallback.tsx b/src/react-navigation/views/ScreenFallback.tsx index 8aa322c..2cb2fa9 100644 --- a/src/react-navigation/views/ScreenFallback.tsx +++ b/src/react-navigation/views/ScreenFallback.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { StyleProp, View, ViewStyle } from 'react-native'; +import { StyleProp, View, ViewProps, ViewStyle } from 'react-native'; type Props = { visible: boolean; @@ -18,6 +18,21 @@ try { // Ignore } +export const MaybeScreenContainer = ({ + enabled, + ...rest +}: ViewProps & { + enabled: boolean; + hasTwoStates: boolean; + children: React.ReactNode; +}) => { + if (Screens?.screensEnabled?.()) { + return ; + } + + return ; +}; + export function MaybeScreen({ visible, children, ...rest }: Props) { if (Screens?.screensEnabled?.()) { return ( From b143d5aad1c261b691dd15d87aa3a103eff40dba Mon Sep 17 00:00:00 2001 From: shubhamguptadream11 Date: Sun, 3 Nov 2024 17:52:23 +0530 Subject: [PATCH 3/6] fix: inline styles removed --- .../Examples/NativeBottomTabsFreezeOnBlur.tsx | 26 ++++++++----------- 1 file changed, 11 insertions(+), 15 deletions(-) diff --git a/example/src/Examples/NativeBottomTabsFreezeOnBlur.tsx b/example/src/Examples/NativeBottomTabsFreezeOnBlur.tsx index dabc24b..5e5ed45 100644 --- a/example/src/Examples/NativeBottomTabsFreezeOnBlur.tsx +++ b/example/src/Examples/NativeBottomTabsFreezeOnBlur.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Text, View } from 'react-native'; +import { StyleSheet, Text, View } from 'react-native'; import createNativeBottomTabNavigator from '../../../src/react-navigation/navigators/createNativeBottomTabNavigator'; const store = new Set(); @@ -24,13 +24,7 @@ function useValue() { function HomeScreen() { return ( - + Home! ); @@ -41,13 +35,7 @@ function DetailsScreen() { // only 1 'render' should appear at the time console.log('Details Screen render', value); return ( - + Details! Details Screen {value} @@ -102,3 +90,11 @@ export default function NativeBottomTabsFreezeOnBlur() { ); } + +const styles = StyleSheet.create({ + screenContainer: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }, +}); From 9ae95cff718181d18a601869893117b51ebfa974 Mon Sep 17 00:00:00 2001 From: shubhamguptadream11 Date: Sun, 3 Nov 2024 17:57:33 +0530 Subject: [PATCH 4/6] fix: updated docs --- .../docs/docs/guides/usage-with-react-navigation.mdx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/docs/docs/docs/guides/usage-with-react-navigation.mdx b/docs/docs/docs/guides/usage-with-react-navigation.mdx index e5b5c3e..4643d79 100644 --- a/docs/docs/docs/guides/usage-with-react-navigation.mdx +++ b/docs/docs/docs/guides/usage-with-react-navigation.mdx @@ -126,6 +126,10 @@ Tab views using the sidebar adaptable style have an appearance Whether to enable haptic feedback on tab press. Defaults to true. +#### `detachInactiveScreens` + +Boolean used to indicate whether inactive screens should be detached from the view hierarchy to save memory. This enables integration with `react-native-screens`. Defaults to `true`. + ### Options The following options can be used to configure the screens in the navigator. These can be specified under `screenOptions` prop of `Tab.navigator` or `options` prop of `Tab.Screen`. @@ -174,6 +178,14 @@ Badge to show on the tab icon. Whether this screens should render the first time it's accessed. Defaults to true. Set it to false if you want to render the screen on initial render. +#### `freezeOnBlur` + +Boolean indicating whether to prevent inactive screens from re-rendering. Defaults to `false`. Defaults to `true` when `enableFreeze()` from `react-native-screens` package is run at the top of the application. + +Requires `react-native-screens` version >=3.16.0. + +Only supported on iOS and Android. + ### Events The navigator can emit events on certain actions. Supported events are: From 8d929422b0c94e67f3c6d4101bee6f637b0c2fdc Mon Sep 17 00:00:00 2001 From: shubhamguptadream11 Date: Mon, 4 Nov 2024 17:41:11 +0530 Subject: [PATCH 5/6] fix: iOS crash fixed --- .../Examples/NativeBottomTabsFreezeOnBlur.tsx | 4 +-- src/TabView.tsx | 10 ++++--- src/react-navigation/views/ScreenFallback.tsx | 29 ++++++++++--------- 3 files changed, 23 insertions(+), 20 deletions(-) diff --git a/example/src/Examples/NativeBottomTabsFreezeOnBlur.tsx b/example/src/Examples/NativeBottomTabsFreezeOnBlur.tsx index 5e5ed45..e1bcb18 100644 --- a/example/src/Examples/NativeBottomTabsFreezeOnBlur.tsx +++ b/example/src/Examples/NativeBottomTabsFreezeOnBlur.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { StyleSheet, Text, View } from 'react-native'; +import { Platform, StyleSheet, Text, View } from 'react-native'; import createNativeBottomTabNavigator from '../../../src/react-navigation/navigators/createNativeBottomTabNavigator'; const store = new Set(); @@ -33,7 +33,7 @@ function HomeScreen() { function DetailsScreen() { const value = useValue(); // only 1 'render' should appear at the time - console.log('Details Screen render', value); + console.log(`${Platform.OS} Details Screen render ${value}`); return ( Details! diff --git a/src/TabView.tsx b/src/TabView.tsx index 19ab9fb..f9632fa 100644 --- a/src/TabView.tsx +++ b/src/TabView.tsx @@ -4,7 +4,6 @@ import { Image, Platform, StyleSheet, - View, processColor, } from 'react-native'; @@ -266,22 +265,25 @@ const TabView = ({ style={styles.container} > {trimmedRoutes.map((route) => { + const isFocused = route.key === focusedKey; + if (getLazy({ route }) !== false && !loaded.includes(route.key)) { // Don't render a screen if we've never navigated to it if (Platform.OS === 'android') { return null; } return ( - ); } const freezeOnBlur = getFreezeOnBlur({ route }); - const isFocused = route.key === focusedKey; return ( ; @@ -20,26 +20,27 @@ try { export const MaybeScreenContainer = ({ enabled, + children, ...rest }: ViewProps & { enabled: boolean; hasTwoStates: boolean; - children: React.ReactNode; + children?: React.ReactNode; }) => { - if (Screens?.screensEnabled?.()) { - return ; + if (Platform.OS === 'android' && Screens?.screensEnabled()) { + return ( + + {children} + + ); } - return ; + return <>{children}; }; -export function MaybeScreen({ visible, children, ...rest }: Props) { - if (Screens?.screensEnabled?.()) { - return ( - - {children} - - ); +export function MaybeScreen({ visible, ...rest }: Props) { + if (Screens?.screensEnabled()) { + return ; } - return {children}; + return ; } From 4cbdd6ddbe6f2679929fabbc725941e8feb87490 Mon Sep 17 00:00:00 2001 From: shubhamguptadream11 Date: Wed, 11 Dec 2024 21:58:37 +0530 Subject: [PATCH 6/6] feat: detach inactive screen removed for android --- .../guides/usage-with-react-navigation.mdx | 4 ---- .../Examples/NativeBottomTabsFreezeOnBlur.tsx | 21 ++++++++++++++++--- src/TabView.tsx | 18 +--------------- src/react-navigation/views/ScreenFallback.tsx | 15 ++----------- 4 files changed, 21 insertions(+), 37 deletions(-) diff --git a/docs/docs/docs/guides/usage-with-react-navigation.mdx b/docs/docs/docs/guides/usage-with-react-navigation.mdx index 4643d79..6dd1dae 100644 --- a/docs/docs/docs/guides/usage-with-react-navigation.mdx +++ b/docs/docs/docs/guides/usage-with-react-navigation.mdx @@ -126,10 +126,6 @@ Tab views using the sidebar adaptable style have an appearance Whether to enable haptic feedback on tab press. Defaults to true. -#### `detachInactiveScreens` - -Boolean used to indicate whether inactive screens should be detached from the view hierarchy to save memory. This enables integration with `react-native-screens`. Defaults to `true`. - ### Options The following options can be used to configure the screens in the navigator. These can be specified under `screenOptions` prop of `Tab.navigator` or `options` prop of `Tab.Screen`. diff --git a/example/src/Examples/NativeBottomTabsFreezeOnBlur.tsx b/example/src/Examples/NativeBottomTabsFreezeOnBlur.tsx index e1bcb18..f71c6ec 100644 --- a/example/src/Examples/NativeBottomTabsFreezeOnBlur.tsx +++ b/example/src/Examples/NativeBottomTabsFreezeOnBlur.tsx @@ -30,14 +30,17 @@ function HomeScreen() { ); } -function DetailsScreen() { +function DetailsScreen(props: any) { const value = useValue(); + const screenName = props?.route?.params?.screenName; // only 1 'render' should appear at the time - console.log(`${Platform.OS} Details Screen render ${value}`); + console.log(`${Platform.OS} Details Screen render ${value} ${screenName}`); return ( Details! - Details Screen {value} + + Details Screen {value} {screenName ? screenName : ''}{' '} + ); } @@ -62,6 +65,9 @@ export default function NativeBottomTabsFreezeOnBlur() { require('../../assets/icons/article_dark.png'), }} @@ -69,6 +75,9 @@ export default function NativeBottomTabsFreezeOnBlur() { require('../../assets/icons/grid_dark.png'), }} @@ -76,6 +85,9 @@ export default function NativeBottomTabsFreezeOnBlur() { require('../../assets/icons/person_dark.png'), }} @@ -83,6 +95,9 @@ export default function NativeBottomTabsFreezeOnBlur() { require('../../assets/icons/chat_dark.png'), }} diff --git a/src/TabView.tsx b/src/TabView.tsx index f9632fa..7fae8f5 100644 --- a/src/TabView.tsx +++ b/src/TabView.tsx @@ -127,13 +127,6 @@ interface Props { * Color of tab indicator. (Android only) */ activeIndicatorColor?: ColorValue; - - /** - * Whether inactive screens should be detached from the view hierarchy to save memory. - * Make sure to call `enableScreens` from `react-native-screens` to make it work. - * Defaults to `true` on Android. - */ - detachInactiveScreens?: boolean; } const ANDROID_MAX_TABS = 6; @@ -154,9 +147,6 @@ const TabView = ({ barTintColor, getActiveTintColor = ({ route }: { route: Route }) => route.activeTintColor, getFreezeOnBlur = ({ route }: { route: Route }) => route.freezeOnBlur, - detachInactiveScreens = Platform.OS === 'web' || - Platform.OS === 'android' || - Platform.OS === 'ios', tabBarActiveTintColor: activeTintColor, tabBarInactiveTintColor: inactiveTintColor, hapticFeedbackEnabled = true, @@ -259,11 +249,7 @@ const TabView = ({ barTintColor={barTintColor} rippleColor={rippleColor} > - + {trimmedRoutes.map((route) => { const isFocused = route.key === focusedKey; @@ -276,7 +262,6 @@ const TabView = ({ @@ -289,7 +274,6 @@ const TabView = ({ ; collapsable?: boolean; @@ -18,20 +17,10 @@ try { // Ignore } -export const MaybeScreenContainer = ({ - enabled, - children, - ...rest -}: ViewProps & { - enabled: boolean; - hasTwoStates: boolean; - children?: React.ReactNode; -}) => { +export const MaybeScreenContainer = ({ children, ...rest }: ViewProps) => { if (Platform.OS === 'android' && Screens?.screensEnabled()) { return ( - - {children} - + {children} ); }