0b4bf1dcc8
The `unmountInactiveScreens` prop lets user unmount all inactive screens for the whole navigator when they go out of focus. It'll be better to have the option to do that per screen, so I have added the `unmountOnBlur` option instead. To get the previous behaviour, user can specify the option in `screenOptions`.
@react-navigation/drawer
Bottom tab navigator for React Navigation following iOS design guidelines.
Documentation can be found on the React Navigation website.
Installation
Open a Terminal in your project's folder and run,
yarn add @react-navigation/native @react-navigation/drawer
Now we need to install react-native-gesture-handler, react-native-reanimated and react-native-safe-area-context.
If you are using Expo, to ensure that you get the compatible versions of the libraries, run:
expo install react-native-gesture-handler react-native-reanimated react-native-safe-area-context
If you are not using Expo, run the following:
yarn add react-native-reanimated react-native-gesture-handler react-native-safe-area-context
If you are using Expo, you are done. Otherwise, continue to the next steps.
To complete the linking on iOS, make sure you have Cocoapods installed. Then run:
cd ios
pod install
cd ..
IMPORTANT: There are additional steps required for react-native-gesture-handler on Android after linking (for all React Native versions). Check the this guide to complete the installation.
Usage
import { createDrawerNavigator } from '@react-navigation/drawer';
const Drawer = createDrawerNavigator();
export default function App() {
return (
<Drawer.Navigator>
<Drawer.Screen name="home" component={Home} options={{ title: 'Home' }} />
<Drawer.Screen name="feed" component={Feed} options={{ title: 'Feed' }} />
<Drawer.Screen
name="profile"
component={Profile}
options={{ title: 'Profile' }}
/>
</Drawer.Navigator>
);
}