react-nativemenunavigation

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 ?

Solution

  • 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>
    );
  }
};