add with-drawer-navigation example

with-drawer-navigation/App.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Button, View } from 'react-native';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+import { NavigationContainer } from '@react-navigation/native';
+
+function HomeScreen({ navigation }) {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Button
+        onPress={navigation.openDrawer}
+        title="Open navigation drawer"
+      />
+      <Button
+        onPress={() => navigation.navigate('Notifications')}
+        title="Go to notifications"
+      />
+    </View>
+  );
+}
+
+function NotificationsScreen({ navigation }) {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Button
+        onPress={navigation.openDrawer}
+        title="Open navigation drawer"
+      />
+      <Button
+        onPress={() => navigation.goBack()}
+        title="Go back home"
+      />
+    </View>
+  );
+}
+
+const Drawer = createDrawerNavigator();
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Drawer.Navigator initialRouteName="Home">
+        <Drawer.Screen name="Home" component={HomeScreen} />
+        <Drawer.Screen name="Notifications" component={NotificationsScreen} />
+      </Drawer.Navigator>
+    </NavigationContainer>
+  );
+}

with-drawer-navigation/README.md

@@ -0,0 +1,20 @@
+# Drawer navigation example
+
+<p>
+  <!-- iOS -->
+  <img alt="Supports Expo iOS" longdesc="Supports Expo iOS" src="https://img.shields.io/badge/iOS-4630EB.svg?style=flat-square&logo=APPLE&labelColor=999999&logoColor=fff" />
+  <!-- Android -->
+  <img alt="Supports Expo Android" longdesc="Supports Expo Android" src="https://img.shields.io/badge/Android-4630EB.svg?style=flat-square&logo=ANDROID&labelColor=A4C639&logoColor=fff" />
+  <!-- Web -->
+  <img alt="Supports Expo Web" longdesc="Supports Expo Web" src="https://img.shields.io/badge/web-4630EB.svg?style=flat-square&logo=GOOGLE-CHROME&labelColor=4285F4&logoColor=fff" />
+</p>
+
+## 🚀 How to use
+
+- Install with `yarn` or `npm install`.
+- Run `expo start` to try it out.
+
+## 📝 Notes
+
+- This is a very basic example from the [react navigation](https://reactnavigation.org/) docs.
+- [Drawer navigation documentation](https://reactnavigation.org/docs/drawer-based-navigation).

with-drawer-navigation/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

with-drawer-navigation/package.json

@@ -0,0 +1,19 @@
+{
+  "dependencies": {
+    "@react-native-community/masked-view": "0.1.6",
+    "@react-navigation/drawer": "^5.7.5",
+    "@react-navigation/native": "^5.4.0",
+    "expo": "~37.0.3",
+    "react": "~16.9.0",
+    "react-dom": "~16.9.0",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
+    "react-native-gesture-handler": "~1.6.0",
+    "react-native-reanimated": "~1.7.0",
+    "react-native-safe-area-context": "0.7.3",
+    "react-native-screens": "~2.2.0",
+    "react-native-web": "~0.11.7"
+  },
+  "devDependencies": {
+    "babel-preset-expo": "~8.1.0"
+  }
+}