├── .expo-shared └── assets.json ├── .gitignore ├── App.js ├── README.md ├── app.json ├── assets ├── icon.png └── splash.png ├── babel.config.js ├── navigation ├── DrawerNavigator.js ├── StackNavigator.js └── TabNavigator.js ├── package-lock.json ├── package.json ├── screens ├── About.jsx ├── Contact.jsx └── Home.jsx └── yarn.lock /.expo-shared/assets.json: -------------------------------------------------------------------------------- 1 | { 2 | "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true, 3 | "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true 4 | } 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/**/* 2 | .expo/* 3 | npm-debug.* 4 | *.jks 5 | *.p8 6 | *.p12 7 | *.key 8 | *.mobileprovision 9 | *.orig.* 10 | web-build/ 11 | web-report/ 12 | 13 | # macOS 14 | .DS_Store 15 | -------------------------------------------------------------------------------- /App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { NavigationContainer } from "@react-navigation/native"; 3 | 4 | import DrawerNavigator from "./navigation/DrawerNavigator"; 5 | 6 | const App = () => { 7 | return ( 8 | 9 | 10 | 11 | ); 12 | }; 13 | 14 | export default App; 15 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Easybuoy/react-native-navigation/9fd041bf15c2ccbd60451f45f4658502d6d51689/README.md -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "react-native-navigation", 4 | "slug": "react-native-navigation", 5 | "platforms": [ 6 | "ios", 7 | "android", 8 | "web" 9 | ], 10 | "version": "1.0.0", 11 | "orientation": "portrait", 12 | "icon": "./assets/icon.png", 13 | "splash": { 14 | "image": "./assets/splash.png", 15 | "resizeMode": "contain", 16 | "backgroundColor": "#ffffff" 17 | }, 18 | "updates": { 19 | "fallbackToCacheTimeout": 0 20 | }, 21 | "assetBundlePatterns": [ 22 | "**/*" 23 | ], 24 | "ios": { 25 | "supportsTablet": true 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Easybuoy/react-native-navigation/9fd041bf15c2ccbd60451f45f4658502d6d51689/assets/icon.png -------------------------------------------------------------------------------- /assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Easybuoy/react-native-navigation/9fd041bf15c2ccbd60451f45f4658502d6d51689/assets/splash.png -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /navigation/DrawerNavigator.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import { createDrawerNavigator } from "@react-navigation/drawer"; 4 | 5 | import { ContactStackNavigator } from "./StackNavigator"; 6 | import TabNavigator from "./TabNavigator"; 7 | 8 | const Drawer = createDrawerNavigator(); 9 | 10 | const DrawerNavigator = () => { 11 | return ( 12 | 13 | 14 | 15 | 16 | ); 17 | }; 18 | 19 | export default DrawerNavigator; 20 | -------------------------------------------------------------------------------- /navigation/StackNavigator.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createStackNavigator } from "@react-navigation/stack"; 3 | 4 | import Home from "../screens/Home"; 5 | import About from "../screens/About"; 6 | import Contact from "../screens/Contact"; 7 | 8 | const Stack = createStackNavigator(); 9 | 10 | const screenOptionStyle = { 11 | headerStyle: { 12 | backgroundColor: "#9AC4F8", 13 | }, 14 | headerTintColor: "white", 15 | headerBackTitle: "Back", 16 | }; 17 | 18 | const MainStackNavigator = () => { 19 | return ( 20 | 21 | 22 | 23 | 24 | ); 25 | }; 26 | 27 | const ContactStackNavigator = () => { 28 | return ( 29 | 30 | 31 | 32 | ); 33 | }; 34 | 35 | export { MainStackNavigator, ContactStackNavigator }; 36 | -------------------------------------------------------------------------------- /navigation/TabNavigator.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; 3 | 4 | import { MainStackNavigator, ContactStackNavigator } from './StackNavigator' 5 | 6 | const Tab = createBottomTabNavigator(); 7 | 8 | const BottomTabNavigator = () => { 9 | return ( 10 | 11 | 12 | 13 | 14 | ); 15 | } 16 | 17 | export default BottomTabNavigator -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "node_modules/expo/AppEntry.js", 3 | "scripts": { 4 | "start": "expo start", 5 | "android": "expo start --android", 6 | "ios": "expo start --ios", 7 | "web": "expo start --web", 8 | "eject": "expo eject" 9 | }, 10 | "dependencies": { 11 | "@react-native-community/masked-view": "0.1.6", 12 | "@react-navigation/bottom-tabs": "^5.5.1", 13 | "@react-navigation/drawer": "^5.8.1", 14 | "@react-navigation/native": "^5.5.0", 15 | "@react-navigation/stack": "^5.4.1", 16 | "expo": "~37.0.3", 17 | "react": "~16.9.0", 18 | "react-dom": "~16.9.0", 19 | "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz", 20 | "react-native-gesture-handler": "~1.6.0", 21 | "react-native-reanimated": "~1.7.0", 22 | "react-native-safe-area-context": "0.7.3", 23 | "react-native-screens": "~2.2.0", 24 | "react-native-web": "~0.11.7" 25 | }, 26 | "devDependencies": { 27 | "@babel/core": "^7.8.6", 28 | "babel-preset-expo": "~8.1.0" 29 | }, 30 | "private": true 31 | } 32 | -------------------------------------------------------------------------------- /screens/About.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { View, StyleSheet, Text } from "react-native"; 3 | 4 | const About = () => { 5 | return ( 6 | 7 | This is the about screen 8 | 9 | ); 10 | }; 11 | 12 | const styles = StyleSheet.create({ 13 | center: { 14 | flex: 1, 15 | justifyContent: "center", 16 | alignItems: "center", 17 | textAlign: "center", 18 | }, 19 | }); 20 | 21 | export default About; 22 | -------------------------------------------------------------------------------- /screens/Contact.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { View, StyleSheet, Text } from "react-native"; 3 | 4 | const Contact = () => { 5 | return ( 6 | 7 | This is the contact screen 8 | 9 | ); 10 | }; 11 | 12 | const styles = StyleSheet.create({ 13 | center: { 14 | flex: 1, 15 | justifyContent: "center", 16 | alignItems: "center", 17 | textAlign: "center", 18 | }, 19 | }); 20 | 21 | export default Contact; 22 | -------------------------------------------------------------------------------- /screens/Home.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { View, Button, Text, StyleSheet } from "react-native"; 3 | 4 | const Home = ({ navigation }) => { 5 | return ( 6 | 7 | This is the home screen 8 |