CODEWITHSUNDEEP
react-nativemenunavigation
Thomsath
Thomsath

Reputation: 197

How to mix two types of navigation in react native

I'm working on an application using React Native. I would like to have a bottom navigation on my application (5.x). After this done, I also would like to let user to navigate on other users profile view. But, I don't want that this new screen appear on the bottom navigation. I don't know how to do that. Does I need to mix stack navigation and bottom navigation ? How to do that ?

Upvotes: 3

Views: 6351

Answers (3)

Davia
Davia

Reputation: 129

ReactNative uses Nesting Navigators for this.

You would create 2 separate components for each type of navigation needed then pass the secondary navigator into the primary one as a screen with the component prop value being the navigator that is being passed.

The navigator that is being passed should not be surrounded by NavigationContainer, as that would throw an error saying that a container was already provided or something of the sort.

As you said, passing two of them as separate component in App.js would create a split screen. @Thomsath

See this link for more details: https://reactnavigation.org/docs/nesting-navigators/

this image was also taken from the above link. enter image description here

Upvotes: 3

Thiago Robles
Thiago Robles

Reputation: 76

As the react-navigation docs says, it's not a good usage to do nesting navigation, but you can do that in version 5.x of react-navigation, as the others answers says. Bu if you want to, you can use react-navigation 4.x to do it better, like mixing stack-navigatior with bottom-navigator, as the below pic shows. Follow the code to do it:

yarn add react-navigation

if you are running a bare react-native project, run this code below

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

if you are running an expo project, run this: 

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

And then, to finish up the dependencies installations, run:

yarn add react-navigation-tabs

You can keep reading the docs of version 4.x to finish some other details. The pic below show the structure to nest navigators. enter image description here

Giving a better explanation, this code will first open the route(screen) name SignIn, and if the prop SignedIn is true, then Dashboard route will open. Of course is always better to use the newest stable version, as it is 5.x, and follow the doc's tips and advices. Hope this helps.

Upvotes: 0

Thomsath
Thomsath

Reputation: 197

I've add a bottom tab navigator like this : 

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import DetailsScreen from '../Screens/DetailsScreen';
import HomeScreen from '../Screens/HomeScreen';
import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import TestScreen from '../Screens/TestScreen';
import {StyleSheet} from 'react-native';

const Tab = createBottomTabNavigator();

export default class Navigation {
    render() {
        return (
            <NavigationContainer style={styles.navigationContainer}>
                <Tab.Navigator style={styles.tabNavigator}>
                    <Tab.Screen style={styles.tabScreen} name="Detail" component={DetailsScreen} />
                    <Tab.Screen style={styles.tabScreen} name="Home" component={HomeScreen} />
                    <Tab.Screen style={styles.tabScreen} name="Test" component={TestScreen} hide={true} />
                </Tab.Navigator>
            </NavigationContainer>
        );
    }
}

const styles = StyleSheet.create({

});

This works fine ! After that, I added a stack navigator into my home screen (in order to have navigation through screens that are not in the tab navigator).

But, it doesn't works fine because it split my screen. My stack navigator looks like this : 

import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from '../Screens/HomeScreen';
import DetailsScreen from '../Screens/DetailsScreen';
import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
const Stack = createStackNavigator();

export default function StackNavigation() {
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name="Home" component={HomeScreen} />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

I added those two files into my App file like using the tags and , after import.

import ....

class App extends React.Component{

  render(){
    return (
        <View style={styles.container}>
          <Navigation />
          <StackNavigation />
        </View>
    );
  }
};

Upvotes: 1

Related Questions