How to use both custom TabNavigator and StackNavigator in react-navigation

Question

I'm having some issue with react-navigation.

My navigation routes :

StackNavigator: main app navigation
-- WelcomeScreen
-- GuideScreen 
-- TabNavigator: this is CustomTabs
 + MyHomeScreen
 + MyNotificationsScreen 
 + MySettingsScreen
-- OtherScreen.

I use createNavigator, createNavigationContainer to build my own Navigation. You can view live for custom tab here: https://snack.expo.io/rJnUK4nrZ

import React from 'react';
import {
  Button,
  Platform,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import {
  createNavigator,
  createNavigationContainer,
  TabRouter,
  addNavigationHelpers,
} from 'react-navigation'; // 1.0.0-beta.11

const SampleText = ({ children }) => (
  <Text style={styles.sampleText}>{children}</Text>
);

const MyNavScreen = ({ navigation, banner }) => (
  <ScrollView>
    <SampleText>{banner}</SampleText>
    <Button
      onPress={() => {
        navigation.goBack(null);
      }}
      title="Go back"
    />
  </ScrollView>
);

const MyHomeScreen = ({ navigation }) => (
  <MyNavScreen banner="Home Screen" navigation={navigation} />
);

const MyNotificationsScreen = ({ navigation }) => (
  <MyNavScreen banner="Notifications Screen" navigation={navigation} />
);

const MySettingsScreen = ({ navigation }) => (
  <MyNavScreen banner="Settings Screen" navigation={navigation} />
);

const CustomTabBar = ({ navigation }) => {
  const { routes } = navigation.state;
  return (
    <View style={styles.tabContainer}>
      {routes.map(route => (
        <TouchableOpacity
          onPress={() => navigation.navigate(route.routeName)}
          style={styles.tab}
          key={route.routeName}
        >
          <Text>{route.routeName}</Text>
        </TouchableOpacity>
      ))}
    </View>
  );
};

const CustomTabView = ({ router, navigation }) => {
  const { routes, index } = navigation.state;
  const ActiveScreen = router.getComponentForState(navigation.state);
  return (
    <View style={styles.container}>
      <CustomTabBar navigation={navigation} />
      <ActiveScreen
        navigation={addNavigationHelpers({
          ...navigation,
          state: routes[index],
        })}
      />
    </View>
  );
};

const CustomTabRouter = TabRouter(
  {
    Home: {
      screen: MyHomeScreen,
      path: '',
    },
    Notifications: {
      screen: MyNotificationsScreen,
      path: 'notifications',
    },
    Settings: {
      screen: MySettingsScreen,
      path: 'settings',
    },
  },
  {
    // Change this to start on a different tab
    initialRouteName: 'Home',
  }
);

const CustomTabs = createNavigationContainer(
  createNavigator(CustomTabRouter)(CustomTabView)
);

const styles = StyleSheet.create({
  container: {
    marginTop: Platform.OS === 'ios' ? 20 : 0,
  },
  tabContainer: {
    flexDirection: 'row',
    height: 48,
  },
  tab: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    margin: 4,
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 4,
  },
  sampleText: {
    margin: 14,
  },
});

export default CustomTabs;

In the App.js

import { connect } from "react-redux";
import { addNavigationHelpers, StackNavigator } from "react-navigation";
import Welcome from "@components/WelcomeScreen";
import Welcome from "@components/GuideScreen";
import Welcome from "@components/OtherScreen";

// import CustomTabs 

export const AppNavigator = StackNavigator(
  {
    Welcome: { screen: WelcomeScreen },
    Guide: { screen: GuideScreen },
    Home: { screen: CustomTabs }, // I want to use CustomTabs TabNavigation here?
    Other: { screen: OtherScreen },
  },
  {
    initialRouteName: "Welcome",
    headerMode: "none"
  }
);

const Routes= ({ dispatch, nav }) => (
  <AppNavigator navigation={addNavigationHelpers({ dispatch, state: nav })} />
);

const mapStateToProps = state => ({
  nav: state.nav
});

const mapDispatchToProps = dispatch => ({
  dispatch
});

export default connect(mapStateToProps, mapDispatchToProps)(AppWithNavigationState);

How to add my custom TabNavigator to main StackNavigator?

What I'm doing wrong? The app integrated with redux, saga. If you have other example about custom stack and tab using react-navigation, please give me to reference.

Answer 1

Update Your Code:

import Tab1Screen from "@components/Tab1Screen" 
import Tab2Screen from "@components/Tab2Screen" 
export const AppNavigator = StackNavigator(
  {
    Welcome: { screen: WelcomeScreen },
    Guide: { screen: GuideScreen },
    Home: { 
        screen: TabNavigator(
             {
               Tab1Screen: {screen: Tab1Screen},
               Tab2Screen: {screen: Tab2Screen}
             },{
                tabBarPosition: "bottom"
             })
    }, 
    Other: { screen: OtherScreen },
  },
  {
    initialRouteName: "Welcome",
    headerMode: "none"
  }
);