×

Welcome to TagMyCode

Please login or create account to add a snippet.
 

React Native - drawer-based navigation

0
0
 
0
Language: Javascript
Posted by: Alen Abraham
Added: May 18, 2020 3:18 PM
Modified: May 18, 2020 3:25 PM
Views: 4339
Tags: drawer navigation
  1. import * as React from 'react';
  2. import { Button, View } from 'react-native';
  3. import { createDrawerNavigator } from '@react-navigation/drawer';
  4. import { NavigationContainer } from '@react-navigation/native';
  5.  
  6. function HomeScreen({ navigation }) {
  7.   return (
  8.     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
  9.       <Button
  10.         onPress={() => navigation.navigate('Notifications')}
  11.         title="Go to notifications"
  12.       />
  13.     </View>
  14.   );
  15. }
  16.  
  17. function NotificationsScreen({ navigation }) {
  18.   return (
  19.     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
  20.       <Button onPress={() => navigation.goBack()} title="Go back home" />
  21.     </View>
  22.   );
  23. }
  24.  
  25. const Drawer = createDrawerNavigator();
  26.  
  27. export default function App() {
  28.   return (
  29.     <NavigationContainer>
  30.       <Drawer.Navigator initialRouteName="Home">
  31.         <Drawer.Screen name="Home" component={HomeScreen} />
  32.         <Drawer.Screen name="Notifications" component={NotificationsScreen} />
  33.       </Drawer.Navigator>
  34.     </NavigationContainer>
  35.   );
  36. }
  37.  
  38. //Opening and closing drawers
  39. navigation.openDrawer();
  40. navigation.closeDrawer();
  41.  
  42. navigation.toggleDrawer();
  43.  
  44. npm install @react-navigation/drawer
  45.  
  46.  

Write a comment

To post comments, please log in or register.