Complex Navigation Example with React Native

-

 Run the following command with your project directory

    npm i react-navigation react-navigation-drawer react-navigation-tabs react-navigation-stack

Project Structure

src
    ->actions
    ->common
    ->components
    ->containers
    ->navigation
        -index.js
    ->reducers
    ->services
    ->store

code for complex navigation

    open navigation folder inside index.js in any code editor with the following code

index.js

import React from 'react';
import { createAppContainer, createSwitchNavigator } from "react-navigation";
import { createDrawerNavigator } from 'react-navigation-drawer';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createStackNavigator } from 'react-navigation-stack';

import Example from './containers/Example';

const FeedStack = createStackNavigator({
    Feed: {
        screen: Example,
        navigationOptions: {
            headerTitle: 'Feed',
        },
    },
    Details: {
        screen: Example,
        navigationOptions: {
            headerTitle: 'Details',
        },
     },
});

const SearchStack = createStackNavigator({
    Search: {
        screen: Example,
        navigationOptions: {
            headerTitle: 'Search',
        },
    },
    Details: {
        screen: Example,
        navigationOptions: {
            headerTitle: 'Details',
        },
    },
});

const DiscoverStack = createStackNavigator({
    Discover: {
        screen: Example,
        navigationOptions: {
            headerTitle: 'Discover',
        },
    },
    Details: {
        screen: Example,
        navigationOptions: {
            headerTitle: 'Details',
        },
    },
});

const MainTabs = createBottomTabNavigator({
    Feed: {
        screen: FeedStack,
        navigationOptions: {
            tabBarLabel: 'Feed',
        },
    },
    Search: {
        screen: SearchStack,
        navigationOptions: {
            tabBarLabel: 'Search',
        },
    },
    Discover: {
        screen: DiscoverStack,
        navigationOptions: {
            tabBarLabel: 'Discover',
        },
      },
});

const SettingsStack = createStackNavigator({
    SettingsList: {
        screen: Example,
        navigationOptions: {
            headerTitle: 'Settings List',
        },
    },
    Profile: {
        screen: Example,
        navigationOptions: {
            headerTitle: 'Profile',
        },
    },
});

const MainDrawer = createDrawerNavigator({
    MainTabs: MainTabs,
    Settings: SettingsStack,
});

const AuthStack = createStackNavigator({
      SignIn: {
            screen: Example,
            navigationOptions: {
                  headerTitle: 'Sign In',
            },
      },
      CreateAccount: {
            screen: Example,
            navigationOptions: {
                  headerTitle: 'Create Account',
            },
       },
      ForgotPassword: {
            screen: Example,
            navigationOptions: {
                  headerTitle: 'Forgot Password',
            },
      },
      ResetPassword: {
            screen: Example,
            navigationOptions: {
                  headerTitle: 'Reset Password',
            },
        },
});

const App = createSwitchNavigator({

    Loading: {
        screen: Example,
    },
    Auth: {
        screen: AuthStack,
     },
     App: {
        screen: MainDrawer,
     },
});

export default createAppContainer(App);

Comments

Post a Comment

Popular posts from this blog

React Native Floating Label Textinput

-
Image
Run the following command with your project directory           npm i react-native-floating-label-input Code for  Floating   Label Text input in React Native Open App.js in any code editor and replace the code with the following code App.js import React,{Component} from 'react'; import {   StyleSheet,   View,   Button,   Image,   Text } from 'react-native'; import { FloatingLabelInput } from 'react-native-floating-label-input'; export default class App extends Component {   constructor(props) {     super(props);     this.state = {       email: ' ',        password: ' '      };   }   render() {     const {          email,          password      } = this.state;     return (       <View style={styles.container}>            <FloatingLabelInput              label="Email"               containerStyle={{margin: 5}}              value={email}             onChangeText={text => this.setState({email: text})}            />          
Read more

React Native Tab View

-
Image
 Run the following command with your project directory     npm i react-native-tab-view      npm i react-native-gesture-handler react-native-reanimated code for tab view in react native      open App.js in any code editor and replace the code with the following code App.js import React,{ Component } from 'react'; import {     StyleSheet,     View,      Dimensions } from 'react-native'; import { TabView, SceneMap } from 'react-native-tab-view'; export default class App extends Component {     constructor(props) {          super(props);          this.state = {               index: 0,               routes: [                    { key: 'first' , title: 'First' },                    { key: 'second' , title: 'Second'}               ]          }     }      renderScene = ({ route }) => {           switch (route.key) {                case 'first':                     return <View style={[styles.scene, { backgroundColor: '#f
Read more

React Native Modal box

-
Run the following command with your project directory     npm i react-native-modalbox Code for modal box      Open index.js and replace the code with the following code index.js  import React,{Component} from 'react'; import { View, Button } from "react-native"; import styles from './styles'; import ModalBox from "./ModalBox"; class Account extends Component {     closePhoto = () => {         this._modalPhoto.close();     };     openPhoto = () => {         this._modalPhoto.open();     };     render() {         return (             <View style={styles.container}>                 <Button title="open" onPress={this.openPhoto}></Button>                 <Login ref={(com) => (this._modalPhoto = com)} />             </View>         );     } } export default Account; ModalBox.js import React, { Component, useState } from "react"; import { Text, TouchableOpacity } from "react-native"; import
Read more