diff --git a/packages/bottom-tabs/src/types.tsx b/packages/bottom-tabs/src/types.tsx index cd85d917..76e259ff 100644 --- a/packages/bottom-tabs/src/types.tsx +++ b/packages/bottom-tabs/src/types.tsx @@ -99,6 +99,12 @@ export type BottomTabNavigationOptions = { * Renders `TouchableWithoutFeedback` by default. */ tabBarButton?: (props: BottomTabBarButtonProps) => React.ReactNode; + + /** + * Whether this screen should be unmounted when navigating away from it. + * Defaults to `false`. + */ + unmountOnBlur?: boolean; }; export type BottomTabDescriptor = Descriptor< @@ -118,11 +124,6 @@ export type BottomTabNavigationConfig = { * Set it to `false` if you want to render all screens on initial render. */ lazy?: boolean; - /** - * Whether a screen should be unmounted when navigating away from it. - * Defaults to `false`. - */ - unmountInactiveScreens?: boolean; /** * Function that returns a React element to display as the tab bar. */ diff --git a/packages/bottom-tabs/src/views/BottomTabView.tsx b/packages/bottom-tabs/src/views/BottomTabView.tsx index c986ef46..9df0668b 100644 --- a/packages/bottom-tabs/src/views/BottomTabView.tsx +++ b/packages/bottom-tabs/src/views/BottomTabView.tsx @@ -92,7 +92,7 @@ export default class BottomTabView extends React.Component { }; render() { - const { state, descriptors, lazy, unmountInactiveScreens } = this.props; + const { state, descriptors, lazy } = this.props; const { routes } = state; const { loaded } = this.state; @@ -101,17 +101,19 @@ export default class BottomTabView extends React.Component { {routes.map((route, index) => { - if (unmountInactiveScreens && index !== state.index) { + const descriptor = descriptors[route.key]; + const { unmountOnBlur } = descriptor.options; + const isFocused = state.index === index; + + if (unmountOnBlur && !isFocused) { return null; } - if (lazy && !loaded.includes(index)) { + if (lazy && !loaded.includes(index) && !isFocused) { // Don't render a screen if we've never navigated to it return null; } - const isFocused = state.index === index; - return ( { isVisible={isFocused} > - {descriptors[route.key].render()} + {descriptor.render()} ); diff --git a/packages/drawer/src/types.tsx b/packages/drawer/src/types.tsx index bb0e9579..c863a259 100644 --- a/packages/drawer/src/types.tsx +++ b/packages/drawer/src/types.tsx @@ -63,11 +63,6 @@ export type DrawerNavigationConfig = { * Set it to `false` if you want to render all screens on initial render. */ lazy?: boolean; - /** - * Whether a screen should be unmounted when navigating away from it. - * Defaults to `false`. - */ - unmountInactiveScreens?: boolean; /** * Function that returns React element to render as the content of the drawer, for example, navigation items. * Defaults to `DrawerContent`. @@ -117,6 +112,11 @@ export type DrawerNavigationOptions = { * Defaults to `true` */ gestureEnabled?: boolean; + /** + * Whether this screen should be unmounted when navigating away from it. + * Defaults to `false`. + */ + unmountOnBlur?: boolean; }; export type DrawerContentComponentProps = T & { diff --git a/packages/drawer/src/views/DrawerView.tsx b/packages/drawer/src/views/DrawerView.tsx index c8683e51..0192f870 100644 --- a/packages/drawer/src/views/DrawerView.tsx +++ b/packages/drawer/src/views/DrawerView.tsx @@ -77,7 +77,6 @@ export default function DrawerView({ gestureHandlerProps, minSwipeDistance, sceneContainerStyle, - unmountInactiveScreens, }: Props) { const [loaded, setLoaded] = React.useState([state.index]); const [drawerWidth, setDrawerWidth] = React.useState(() => @@ -135,18 +134,19 @@ export default function DrawerView({ return ( {state.routes.map((route, index) => { - if (unmountInactiveScreens && index !== state.index) { + const descriptor = descriptors[route.key]; + const { unmountOnBlur } = descriptor.options; + const isFocused = state.index === index; + + if (unmountOnBlur && !isFocused) { return null; } - if (lazy && !loaded.includes(index) && index !== state.index) { + if (lazy && !loaded.includes(index) && !isFocused) { // Don't render a screen if we've never navigated to it return null; } - const isFocused = state.index === index; - const descriptor = descriptors[route.key]; - return (