├── .env ├── .gitattributes ├── .gitignore ├── App.js ├── ReadMe.md ├── app.config.js ├── babel.config.js ├── package-lock.json ├── package.json └── src ├── assets └── images │ ├── adaptive-icon.png │ ├── favicon.png │ ├── icon.png │ ├── rn-nested-navigation_01.jpg │ ├── rn-nested-navigation_02.jpg │ ├── rn-nested-navigation_03.jpg │ ├── rn-nested-navigation_04.jpg │ ├── rn-nested-navigation_05.jpg │ ├── rn-nested-navigation_06.jpg │ └── splash.png ├── config └── config.js ├── navigations ├── Bottomtabnav.js ├── Drawernav.js ├── Navigation.js ├── Stacknav.js └── Toptabnav.js └── screens ├── About.js ├── Contact.js ├── Details.js ├── Home.js └── Profile.js /.env: -------------------------------------------------------------------------------- 1 | API_KEY=AIz.... 2 | AUTH_DOMAIN= 3 | PROJECT_ID=re 4 | STORAGE_BUCKET= 5 | MESSAGING_SENDER_ID= 6 | APP_ID= 7 | MEASUREMENT_ID= 8 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .expo/ 3 | dist/ 4 | npm-debug.* 5 | *.jks 6 | *.p8 7 | *.p12 8 | *.key 9 | *.mobileprovision 10 | *.orig.* 11 | web-build/ 12 | 13 | # macOS 14 | .DS_Store 15 | -------------------------------------------------------------------------------- /App.js: -------------------------------------------------------------------------------- 1 | import Navigation from "./src/navigations/Navigation"; 2 | 3 | export default function App() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /ReadMe.md: -------------------------------------------------------------------------------- 1 | # React Native Navigation 6.x - Nested Navigation 2 | 3 | Stack, Bottom Tab & Drawer Nested Navigation using React Navigation v6 with Expo. 4 | 5 | **Developed with ❤️ by [Henok R. Bedassa](https://henok.us/). If you love my project please star ⭐️ my repo!** 6 | 7 | ## Home Screen 8 | 9 | With Drawer Navigation, **Go to Details Screen** Stack Navigation and **Home** + **Profile** Bottom Tab Navigation 10 | 11 | [![image](https://github.com/jackbalageru/react-native-navigation-6.x-nested/blob/master/src/assets/images/rn-nested-navigation_01.jpg)](https://henok.us/) 12 | 13 | ## Detials Screen 14 | 15 | Details Screen with **Back** Header Arrow 16 | 17 | [![image](https://github.com/jackbalageru/react-native-navigation-6.x-nested/blob/master/src/assets/images/rn-nested-navigation_02.jpg)](https://henok.us/) 18 | 19 | ## Profile Screen 20 | 21 | Profile Screen 22 | 23 | [![image](https://github.com/jackbalageru/react-native-navigation-6.x-nested/blob/master/src/assets/images/rn-nested-navigation_03.jpg)](https://henok.us/) 24 | 25 | ## Drawer Navigation 26 | 27 | Drawer Navigation with **Home, About and Contact** Navigations 28 | 29 | [![image](https://github.com/jackbalageru/react-native-navigation-6.x-nested/blob/master/src/assets/images/rn-nested-navigation_04.jpg)](https://henok.us/) 30 | 31 | ## About Screen 32 | 33 | About Screen 34 | 35 | [![image](https://github.com/jackbalageru/react-native-navigation-6.x-nested/blob/master/src/assets/images/rn-nested-navigation_05.jpg)](https://henok.us/) 36 | 37 | ## Contact Screen 38 | 39 | Contact Screen 40 | 41 | [![image](https://github.com/jackbalageru/react-native-navigation-6.x-nested/blob/master/src/assets/images/rn-nested-navigation_06.jpg)](https://henok.us/) 42 | 43 | ## Tips 44 | 45 | This Boilerplate is Firebase ready. You can put your credentials in .env file. 46 | 47 | ## Installation 48 | 49 | 1. Clone repository 50 | 51 | ```shell 52 | git clone https://github.com/jackbalageru/react-native-navigation-6.x-nested 53 | ``` 54 | 55 | 2. This Boilerplate uses Expo. Install dependencies, **expo start** and happy coding. 56 | 57 | ## View Project 58 | 59 | You can either use **Android Emulator from Android Studio** or **Expo** app to view the Project 60 | 61 | ## Support 62 | 63 | For any additional information please refer to [Henok R. Bedassa](https://henok.us). 64 | 65 | **Thank you** 66 | -------------------------------------------------------------------------------- /app.config.js: -------------------------------------------------------------------------------- 1 | import "react-native-dotenv"; 2 | 3 | export default { 4 | expo: { 5 | name: "boilerplate", 6 | slug: "boilerplate", 7 | version: "1.0.0", 8 | orientation: "portrait", 9 | icon: ".src/assets/images/icon.png", 10 | userInterfaceStyle: "light", 11 | splash: { 12 | image: ".src/assets/images/splash.png", 13 | resizeMode: "contain", 14 | backgroundColor: "#ffffff", 15 | }, 16 | updates: { 17 | fallbackToCacheTimeout: 0, 18 | }, 19 | assetBundlePatterns: ["**/*"], 20 | ios: { 21 | supportsTablet: true, 22 | }, 23 | android: { 24 | adaptiveIcon: { 25 | foregroundImage: ".src/assets/images/adaptive-icon.png", 26 | backgroundColor: "#FFFFFF", 27 | }, 28 | }, 29 | web: { 30 | favicon: ".src/assets/images/favicon.png", 31 | }, 32 | extra: { 33 | apiKey: process.env.API_KEY, 34 | authDomain: process.env.AUTH_DOMAIN, 35 | projectId: process.env.PROJECT_ID, 36 | storageBucket: process.env.STORAGE_BUCKET, 37 | messagingSenderId: process.env.MESSAGING_SENDER_ID, 38 | appId: process.env.APP_ID, 39 | measurementId: process.env.MEASUREMENT_ID, 40 | }, 41 | }, 42 | }; 43 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function (api) { 2 | api.cache(true); 3 | return { 4 | presets: ["babel-preset-expo"], 5 | plugins: ["react-native-reanimated/plugin"], 6 | }; 7 | }; 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rn-boilerplate", 3 | "version": "1.0.0", 4 | "main": "node_modules/expo/AppEntry.js", 5 | "scripts": { 6 | "start": "expo start", 7 | "android": "expo start --android", 8 | "ios": "expo start --ios", 9 | "web": "expo start --web" 10 | }, 11 | "dependencies": { 12 | "@react-navigation/bottom-tabs": "^6.5.2", 13 | "@react-navigation/drawer": "^6.5.6", 14 | "@react-navigation/material-top-tabs": "^6.5.1", 15 | "@react-navigation/native": "^6.1.1", 16 | "@react-navigation/native-stack": "^6.9.7", 17 | "expo": "~47.0.9", 18 | "expo-status-bar": "~1.4.2", 19 | "firebase": "^9.15.0", 20 | "react": "18.1.0", 21 | "react-native": "0.70.5", 22 | "react-native-dotenv": "^3.4.6", 23 | "react-native-gesture-handler": "~2.8.0", 24 | "react-native-pager-view": "6.0.1", 25 | "react-native-reanimated": "~2.12.0", 26 | "react-native-safe-area-context": "4.4.1", 27 | "react-native-screens": "~3.18.0", 28 | "react-native-tab-view": "^3.3.4", 29 | "react-native-vector-icons": "^9.2.0" 30 | }, 31 | "devDependencies": { 32 | "@babel/core": "^7.12.9" 33 | }, 34 | "private": true 35 | } 36 | -------------------------------------------------------------------------------- /src/assets/images/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/henokrb/react-native-navigation-6.x-nested/bd5c66dd1c6ca510ae29d10893800404092c2134/src/assets/images/adaptive-icon.png -------------------------------------------------------------------------------- /src/assets/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/henokrb/react-native-navigation-6.x-nested/bd5c66dd1c6ca510ae29d10893800404092c2134/src/assets/images/favicon.png -------------------------------------------------------------------------------- /src/assets/images/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/henokrb/react-native-navigation-6.x-nested/bd5c66dd1c6ca510ae29d10893800404092c2134/src/assets/images/icon.png -------------------------------------------------------------------------------- /src/assets/images/rn-nested-navigation_01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/henokrb/react-native-navigation-6.x-nested/bd5c66dd1c6ca510ae29d10893800404092c2134/src/assets/images/rn-nested-navigation_01.jpg -------------------------------------------------------------------------------- /src/assets/images/rn-nested-navigation_02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/henokrb/react-native-navigation-6.x-nested/bd5c66dd1c6ca510ae29d10893800404092c2134/src/assets/images/rn-nested-navigation_02.jpg -------------------------------------------------------------------------------- /src/assets/images/rn-nested-navigation_03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/henokrb/react-native-navigation-6.x-nested/bd5c66dd1c6ca510ae29d10893800404092c2134/src/assets/images/rn-nested-navigation_03.jpg -------------------------------------------------------------------------------- /src/assets/images/rn-nested-navigation_04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/henokrb/react-native-navigation-6.x-nested/bd5c66dd1c6ca510ae29d10893800404092c2134/src/assets/images/rn-nested-navigation_04.jpg -------------------------------------------------------------------------------- /src/assets/images/rn-nested-navigation_05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/henokrb/react-native-navigation-6.x-nested/bd5c66dd1c6ca510ae29d10893800404092c2134/src/assets/images/rn-nested-navigation_05.jpg -------------------------------------------------------------------------------- /src/assets/images/rn-nested-navigation_06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/henokrb/react-native-navigation-6.x-nested/bd5c66dd1c6ca510ae29d10893800404092c2134/src/assets/images/rn-nested-navigation_06.jpg -------------------------------------------------------------------------------- /src/assets/images/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/henokrb/react-native-navigation-6.x-nested/bd5c66dd1c6ca510ae29d10893800404092c2134/src/assets/images/splash.png -------------------------------------------------------------------------------- /src/config/config.js: -------------------------------------------------------------------------------- 1 | // Import the functions you need from the SDKs you need 2 | import { initializeApp } from "firebase/app"; 3 | import { getAnalytics } from "firebase/analytics"; 4 | import { getFirestore } from "firebase/firestore"; 5 | import Constants from "expo-Constants"; 6 | 7 | // TODO: Add SDKs for Firebase products that you want to use 8 | // https://firebase.google.com/docs/web/setup#available-libraries 9 | 10 | // Your web app's Firebase configuration 11 | // For Firebase JS SDK v7.20.0 and later, measurementId is optional 12 | const firebaseConfig = { 13 | apiKey: Constants.manifest.extra.apiKey, 14 | authDomain: Constants.manifest.extra.authDomain, 15 | projectId: Constants.manifest.extra.projectId, 16 | storageBucket: Constants.manifest.extra.storageBucket, 17 | messagingSenderId: Constants.manifest.extra.messagingSenderId, 18 | appId: Constants.manifest.extra.appId, 19 | measurementId: Constants.manifest.extra.measurementId, 20 | databaseURL: Constants.manifest.extra.databaseURL, 21 | }; 22 | 23 | // Initialize Firebase 24 | const app = initializeApp(firebaseConfig); 25 | const analytics = getAnalytics(app); 26 | 27 | // Initialize Firestore 28 | export const db = getFirestore(app); 29 | -------------------------------------------------------------------------------- /src/navigations/Bottomtabnav.js: -------------------------------------------------------------------------------- 1 | import { NavigationContainer } from "@react-navigation/native"; 2 | import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; 3 | import { MaterialCommunityIcons } from "@expo/vector-icons"; 4 | 5 | import Home from "../screens/Home"; 6 | import Profile from "../screens/Profile"; 7 | 8 | const BottomTab = createBottomTabNavigator(); 9 | 10 | export default function Bottomtabnav() { 11 | return ( 12 | 13 | ( 19 | 20 | ), 21 | }} 22 | /> 23 | ( 29 | 30 | ), 31 | }} 32 | /> 33 | 34 | ); 35 | } 36 | -------------------------------------------------------------------------------- /src/navigations/Drawernav.js: -------------------------------------------------------------------------------- 1 | import "react-native-gesture-handler"; 2 | import { createDrawerNavigator } from "@react-navigation/drawer"; 3 | 4 | import Bottomtabnav from "./Bottomtabnav"; 5 | 6 | import About from "../screens/About"; 7 | import Contact from "../screens/Contact"; 8 | 9 | const Drawer = createDrawerNavigator(); 10 | 11 | export default function Drawernav() { 12 | return ( 13 | 14 | 19 | 24 | 29 | 30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /src/navigations/Navigation.js: -------------------------------------------------------------------------------- 1 | import Stacknav from "./Stacknav"; 2 | 3 | export default function Navigation() { 4 | return ( 5 | <> 6 | 7 | 8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /src/navigations/Stacknav.js: -------------------------------------------------------------------------------- 1 | import { NavigationContainer } from "@react-navigation/native"; 2 | import { createNativeStackNavigator } from "@react-navigation/native-stack"; 3 | 4 | import Drawernav from "./Drawernav"; 5 | 6 | import Details from "../screens/Details"; 7 | 8 | const Stack = createNativeStackNavigator(); 9 | 10 | export default function Stacknav() { 11 | return ( 12 | 13 | 19 | 20 | 28 | 29 | 30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /src/navigations/Toptabnav.js: -------------------------------------------------------------------------------- 1 | import { NavigationContainer } from "@react-navigation/native"; 2 | import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs"; 3 | import { MaterialCommunityIcons } from "@expo/vector-icons"; 4 | 5 | import Home from "../screens/Home"; 6 | import Profile from "../screens/Profile"; 7 | 8 | const TopTab = createMaterialTopTabNavigator(); 9 | 10 | function MyTopTabs() { 11 | return ( 12 | 13 | ( 19 | 20 | ), 21 | }} 22 | /> 23 | ( 29 | 30 | ), 31 | }} 32 | /> 33 | 34 | ); 35 | } 36 | 37 | export default function Toptabnav() { 38 | return ( 39 | 40 | 41 | 42 | ); 43 | } 44 | -------------------------------------------------------------------------------- /src/screens/About.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet, Text, View } from "react-native"; 2 | 3 | export default function About() { 4 | return ( 5 | 6 | About Us Page... 7 | 8 | ); 9 | } 10 | 11 | const styles = StyleSheet.create({ 12 | container: { 13 | flex: 1, 14 | backgroundColor: "#fff", 15 | alignItems: "center", 16 | justifyContent: "center", 17 | }, 18 | }); 19 | -------------------------------------------------------------------------------- /src/screens/Contact.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet, Text, View } from "react-native"; 2 | 3 | export default function Contact() { 4 | return ( 5 | 6 | Contact Us Page... 7 | 8 | ); 9 | } 10 | 11 | const styles = StyleSheet.create({ 12 | container: { 13 | flex: 1, 14 | backgroundColor: "#fff", 15 | alignItems: "center", 16 | justifyContent: "center", 17 | }, 18 | }); 19 | -------------------------------------------------------------------------------- /src/screens/Details.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet, Text, View } from "react-native"; 2 | 3 | export default function Details(props) { 4 | return ( 5 | 6 | Details Page... 7 | 8 | ); 9 | } 10 | 11 | const styles = StyleSheet.create({ 12 | container: { 13 | flex: 1, 14 | backgroundColor: "#fff", 15 | alignItems: "center", 16 | justifyContent: "center", 17 | }, 18 | }); 19 | -------------------------------------------------------------------------------- /src/screens/Home.js: -------------------------------------------------------------------------------- 1 | import { Text, View, StyleSheet, Button } from "react-native"; 2 | import { useNavigation } from "@react-navigation/native"; 3 | 4 | export default function Home() { 5 | const navigation = useNavigation(); 6 | 7 | return ( 8 | 9 | Home Screen 10 |