diff --git a/packages/drawer/example/App.js b/packages/drawer/example/App.js index a000d644..e2ba3907 100644 --- a/packages/drawer/example/App.js +++ b/packages/drawer/example/App.js @@ -5,12 +5,21 @@ import { createAppContainer } from '@react-navigation/native'; // eslint-disable-next-line import/named import { createStackNavigator } from 'react-navigation-stack'; import { List, Divider } from 'react-native-paper'; -import SimpleDrawer from './src/SimpleDrawer'; +import { SimpleDrawer, SimpleDrawerUnmountInactive } from './src/SimpleDrawer'; import StyledDrawer from './src/StyledDrawer'; import GestureInteraction from './src/GestureInteraction'; const data = [ - { component: SimpleDrawer, title: 'Simple', routeName: 'SimpleDrawer' }, + { + component: SimpleDrawer, + title: 'Simple - persistent routes like tabs', + routeName: 'SimpleDrawer', + }, + { + component: SimpleDrawerUnmountInactive, + title: 'Simple - unmount inactive routes', + routeName: 'SimpleDrawerUnmountInactive', + }, { component: StyledDrawer, title: 'Styled', routeName: 'StyledDrawer' }, { component: GestureInteraction, diff --git a/packages/drawer/example/src/SimpleDrawer.js b/packages/drawer/example/src/SimpleDrawer.js index 93b5825e..2b5e6b42 100644 --- a/packages/drawer/example/src/SimpleDrawer.js +++ b/packages/drawer/example/src/SimpleDrawer.js @@ -122,27 +122,35 @@ DraftsStack.navigationOptions = { ), }; -const DrawerExample = createDrawerNavigator( - { - Inbox: { - path: '/', - screen: InboxStack, +function createDrawerExample(options = {}) { + let DrawerExample = createDrawerNavigator( + { + Inbox: { + path: '/', + screen: InboxStack, + }, + Drafts: { + path: '/sent', + screen: DraftsStack, + }, }, - Drafts: { - path: '/sent', - screen: DraftsStack, - }, - }, - { - initialRouteName: 'Drafts', - drawerWidth: 210, - navigationOptions: { - header: null, - }, - contentOptions: { - activeTintColor: '#e91e63', - }, - } -); + { + initialRouteName: 'Drafts', + drawerWidth: 210, + navigationOptions: { + header: null, + }, + contentOptions: { + activeTintColor: '#e91e63', + }, + ...options, + } + ); -export default DrawerExample; + return DrawerExample; +} + +export const SimpleDrawer = createDrawerExample(); +export const SimpleDrawerUnmountInactive = createDrawerExample({ + unmountInactiveRoutes: true, +}); diff --git a/packages/drawer/src/navigators/__tests__/__snapshots__/createDrawerNavigator-test.js.snap b/packages/drawer/src/navigators/__tests__/__snapshots__/createDrawerNavigator-test.js.snap index 5533cdbc..e9076969 100644 --- a/packages/drawer/src/navigators/__tests__/__snapshots__/createDrawerNavigator-test.js.snap +++ b/packages/drawer/src/navigators/__tests__/__snapshots__/createDrawerNavigator-test.js.snap @@ -2,6 +2,7 @@ exports[`createDrawerNavigator renders successfully 1`] = ` { export default (routeConfigs, config = {}) => { config = { ...config }; - config = withDefaultValue(config, 'resetOnBlur', false); + config = withDefaultValue( + config, + 'resetOnBlur', + config.unmountInactiveRoutes ? true : !!config.resetOnBlur + ); config = withDefaultValue(config, 'backBehavior', 'initialRoute'); const switchRouter = SwitchRouter(routeConfigs, config); diff --git a/packages/drawer/src/views/DrawerSidebar.js b/packages/drawer/src/views/DrawerSidebar.js index bbd2e3e5..12519c42 100644 --- a/packages/drawer/src/views/DrawerSidebar.js +++ b/packages/drawer/src/views/DrawerSidebar.js @@ -1,7 +1,7 @@ import React from 'react'; import { StyleSheet, View } from 'react-native'; -import { NavigationActions, StackActions } from '@react-navigation/core'; +import { NavigationActions } from '@react-navigation/core'; import invariant from '../utils/invariant'; /** diff --git a/packages/drawer/src/views/DrawerView.js b/packages/drawer/src/views/DrawerView.js index 1bf315ef..2ab181f1 100644 --- a/packages/drawer/src/views/DrawerView.js +++ b/packages/drawer/src/views/DrawerView.js @@ -139,12 +139,59 @@ export default class DrawerView extends React.PureComponent { ); }; + _renderContent = () => { + let { lazy, navigation } = this.props; + let { loaded } = this.state; + let { routes } = navigation.state; + + if (this.props.navigationConfig.unmountInactiveRoutes) { + let activeKey = navigation.state.routes[navigation.state.index].key; + let descriptor = this.props.descriptors[activeKey]; + + return ( + + ); + } else { + return ( + + {routes.map((route, index) => { + if (lazy && !loaded.includes(index)) { + // Don't render a screen if we've never navigated to it + return null; + } + + let isFocused = navigation.state.index === index; + let descriptor = this.props.descriptors[route.key]; + + return ( + + + + ); + })} + + ); + } + }; + render() { - const { lazy, navigation } = this.props; - const { loaded } = this.state; - const { state } = navigation; - const { routes } = state; - const activeKey = routes[state.index].key; + const { navigation } = this.props; + const activeKey = navigation.state.routes[navigation.state.index].key; const { drawerLockMode } = this.props.descriptors[activeKey].options; return ( @@ -180,37 +227,12 @@ export default class DrawerView extends React.PureComponent { statusBarAnimation={this.props.navigationConfig.statusBarAnimation} minSwipeDistance={this.props.navigationConfig.minSwipeDistance} overlayColor={this.props.navigationConfig.overlayColor} - contentContainerStyle={this.props.navigationConfig.contentContainerStyle} + contentContainerStyle={ + this.props.navigationConfig.contentContainerStyle + } > - - {routes.map((route, index) => { - if (lazy && !loaded.includes(index)) { - // Don't render a screen if we've never navigated to it - return null; - } - - const isFocused = navigation.state.index === index; - const descriptor = this.props.descriptors[route.key]; - - return ( - - - - ); - })} - + {this._renderContent()} );