Complex React Navigation states

Question

I want to use React Navigation in my React Native app, but I'm not sure how to get this specific functionality: Demo from Samsung Health, where there is a bottom tab navigator, and in each tab screen there is a menu button in the header that opens a drawer navigator, and each option in the drawer navigator opens a stack navigator (which is the same for all tabs, i.e. the Home tab "For you" button opens the exact same "For you" screen as the Together tab and so on)

I've tried various combinations of stackNavigator, drawerNavigator, and bottomTabNavigator, but none behave in a sensible way, or at least in the way I wanted. I've made a basic bottomTabNavigator, but I don't know where to put the drawerNavigator in there;

const HomeStack = createStackNavigator({
  Home: HomeScreen
});
const NotifyStack = createStackNavigator({
  Notify: NotifyScreen
});
const ProfileStack = createStackNavigator({
  Profile: ProfileScreen
});
const SettingsStack = createStackNavigator({
  Settings: SettingsScreen
});

const DrawerStack1 = createStackNavigator({
  DrawerStack: DrawerScreen1
});
const DrawerStack2= createStackNavigator({
  DrawerStack: DrawerScreen2
});
const DrawerStack3 = createStackNavigator({
  DrawerStack: DrawerScreen3
});


const Drawer = createDrawerNavigator({
  DrawerStack1,
  DrawerStack2,
  DrawerStack3
});

const AppBottomTabs = createMaterialBottomTabNavigator({
  Home: HomeStack,
  Notify: NotifyStack,
  Profile: ProfileStack,
  Settings: SettingsStack
});

Mehran Khan Mehran Khan · Accepted Answer · 2019-10-21T05:28:02

I have created sample project for you which have 3 tabs and drawer in each tab . Drawer have options(Events,ForYou) which will open separate screen

App Demo

Complete Sample Code

import React from 'react';
import {View, Text, Image, TouchableOpacity} from 'react-native';
import {createAppContainer} from 'react-navigation';
import {createDrawerNavigator} from 'react-navigation-drawer';
import {createStackNavigator} from 'react-navigation-stack';
import {createBottomTabNavigator} from 'react-navigation-tabs';

/*
Components
*/
class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>Home!</Text>
      </View>
    );
  }
}

class Together extends React.Component {
  render() {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>Together</Text>
      </View>
    );
  }
}

class Discover extends React.Component {
  render() {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>Discover</Text>
      </View>
    );
  }
}

class Events extends React.Component {
  render() {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>Events</Text>
      </View>
    );
  }
}

class ForYou extends React.Component {
  render() {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>ForYou</Text>
      </View>
    );
  }
}

class DrawerComponent extends React.Component {
  drawerOptions = [
    {title: 'For you', route: 'ForYou'},
    {title: 'Events', route: 'Events'},
  ];

  render() {
    return (
      <View style={{flex: 1, marginTop: 60}}>
        {this.drawerOptions.map(item => (
          <TouchableOpacity
            style={{padding: 16}}
            onPress={() => {
              this.props.navigation.toggleDrawer();
              this.props.navigation.navigate(item.route);
            }}
            key={item.title}>
            <Text>{item.title}</Text>
          </TouchableOpacity>
        ))}
      </View>
    );
  }
}

/*
Navigator
*/
const TabNavigator = createStackNavigator(
  {
    TabsStack: {
      screen: createBottomTabNavigator({
        HomeScreen,
        Together,
        Discover,
      }),
    },
  },
  {
    defaultNavigationOptions: ({navigation}) => ({
      title: 'SamSung Health',
      headerLeft: (
        <TouchableOpacity
          style={{padding: 16}}
          onPress={() => navigation.toggleDrawer()}>
          <Image
            source={require('./drawer.png')}
            style={{width: 30, height: 30}}
          />
        </TouchableOpacity>
      ),
    }),
  },
);

const DrawerNavigator = createDrawerNavigator(
  {
    Home: {
      screen: TabNavigator,
    },
  },
  {drawerType: 'slide', contentComponent: DrawerComponent},
);

DrawerNavigator.navigationOptions = {
  header: null,
};

const AppNavigator = createStackNavigator({
  Home: {
    screen: DrawerNavigator,
  },
  Events,
  ForYou,
});

const AppContainer = createAppContainer(AppNavigator);

// render App Component
export default class App extends React.Component {
  render() {
    return (
      <View style={{flex: 1}}>
        <AppContainer />
      </View>
    );
  }
}

Snack Link : https://snack.expo.io/@mehran.khan/3d6749 (please check in Android/IOS)

Complex React Navigation states

1 Answers