Custom navigator menu in React Native

Question

I'm new in React Native and have a project with a kind of menu on the right side (5 buttons) on several screens. What I want to do is to use this menu only once for the whole app with a container, and change the content of the container according to the selected button, like in Android with fragment and fragmentManager.replace...

Screens and menu are developed but I really don't know how to mix everything properly .

I read doc about react-navigation (https://reactnavigation.org/docs/en/custom-navigators.html) but do not understand well everything. However I just need a kind of TabNavigator with custom Tab on the ride side.

Please help me.

Answer 1

Not sure what do you mean, but i think you could try something like this:

const CustomDrawer = createDrawerNavigator({
  Screen1: {
    screen: Screen1,
  },
  Screen2: {
    screen: Screen2,
  },
})

const RootNavigator = createStackNavigator({
  MainScreen: {
    screen: MainScreen,
  },
  CustomDrawer: { screen: CustomDrawer }
},
{
  initialRouteName: 'Init',
})

Basically, you can create a Drawer on the right/left. And add your 5 screens on it, then you will use the drawer to navigate between those screens. Plus you'll instantiate your drawer on a stackNavigator which will handle the navigation. You can also set your main screen on it and everything else.

Answer 2

I think you want drawer in react native app using react-navigation..

use createDrawerNavigator it providers you to custom design your side bar

createDrawerNavigator({
    screen: {..your screen stack here...}
}, {
  headerMode: 'none',
  gesturesEnabled: false,
  contentComponent: DrawerContainer, /// DrawerContainer is custom component container for all tabs
  drawerBackgroundColor: 'transparent',
  drawerWidth: 240,
  useNativeAnimations: true
});

DrawerContainer .js :---

export default class DrawerContainer extends React.Component { 
 render() {
    return ( 
         <View style={{flex:1}}>
            <TouchableOpacity
              style={{borderBottomColor: '#fff', height: 40}}
              onPress={() => this.props.navigation.navigate('screen name')}
            >
              <Text style={{color: '#FFFFFF',fontSize: 18}} 
               type='h5White'>your tab name</Text>
            </TouchableOpacity> 
         </View> 
   ); 
 } 

}

for more detail go to https://medium.freecodecamp.org/how-to-build-a-nested-drawer-menu-with-react-native-a1c2fdcab6c9

go for this medium tutorial https://medium.com/@mehulmistri/drawer-navigation-with-custom-side-menu-react-native-fbd5680060ba

create custom side bar always fixed:--- Don't use drawer. I m making it by using hoc (Higher-Order Components) Fist make Higher-Order Components as sidebar.js

    import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';


const withSidebar = WrappedComponent => class extends Component {

     constructor(props) {
        super(props);
        this.state = { isConnected: true };
     }

      render() {
        return (
            <View style={styles.container}>
                 <View style={{width:50, top:20, backgroundColor: 'grey',}}>
                    <TouchableOpacity
                        style={styles.menu}
                        onPress={() => console.log('code')}
                    >
                        <Text style={styles.menuText} type='h5White'>first</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={styles.menu}
                        onPress={() => console.log('code')}
                    >
                        <Text style={styles.menuText} type='h5White'>second</Text>
                    </TouchableOpacity>
                </View>
                <View style={{flex:1, backgroundColor: 'red', top:20}}>
                    <WrappedComponent {...this.props} /> 
                </View>

            </View>
         );
      }
}; 


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
    flexDirection: 'row',
  },
  welcome: {
    flex: 1,
    margin: 20,
    backgroundColor: 'orange',
    margin: 10,
    textAlign: 'center',
    fontSize: 20,
    paddingTop: 70,
  },
  menu: {
        paddingHorizontal: 7,
        borderBottomWidth: 1,
        borderBottomColor: '#fff',
        height: 40,
        justifyContent: 'center'
    },
    menuText: {
        justifyContent: 'center',
        color: '#FFFFFF',
        fontSize: 10,
        fontWeight: 'bold'
    },
});

export default withSidebar;

Now only connect your screen with this hoc:--

import sidebar.js in your screen as
import withSidebar from 'sidebar'

export default connect(mapStateToProps, mapDispatchToProps)(withSidebar(yourScreenName));

This HOC is available for every screen where you want just use above syntax. You can also put it in your root level component only once to get it for whole components (its over you how you implement this).