How can i navigate to another navigation inside BottomTabNavigator in react native?

Question

I want to navigate to a stack navigator from BottomTabNavigator. But when i assign stack navigator inside BottomTabNavigator then, The component for route 'route_name' must be a React component error shows.

Here is my code:

const BottomTabNavigator = createAppContainer(createBottomTabNavigator(
  {
    Home: {
      screen: HomeScreen,
      navigationOptions:{
        tabBarLabel: 'Home',
        tabBarIcon: ({ tintColor }) => (  
          <View>  
              <Icon style={[{color: tintColor}]} size={25} name={'ios-home'}/>
          </View>)
        }
    },
    Profile: {
      screen: ProfileStackNavigator,
      navigationOptions:({ navigation }) => ({
        tabBarLabel: 'Profile',
        tabBarIcon: ({ tintColor }) => (  
          <View>  
              <Icon style={[{color: tintColor}]} size={25} name={'ios-contact'}/>
          </View>),
        }),
    },
  },
  {
    tabBarOptions: {
      activeTintColor: '#2383F7',
      // inactiveTintColor: 'gray',
    },
  }
));

const ProfileStackNavigator = createAppContainer(createStackNavigator({
  ProfileHome: 
  {
    screen: ProfileScreen,
    // headerMode: 'none',
    navigationOptions:
    {
      header: null,
    }

  },
  ChangePasswordFromProfile: 
  {
    screen: ChangePasswordScreen,
    // navigationOptions:
    // {
    //   header: null,
    // }
  }
}))

Here is the all version of navigations:

"react-navigation": "^4.0.10", "react-navigation-drawer": "^2.3.3", "react-navigation-stack": "^1.10.3", "react-navigation-tabs": "^2.6.2"

Thanks in advance

Answer 1

by the time you create BottomTabNavigator, ProfileStackNavigator variable is not yet created. So, move your const ProfileStackNavigator = ... code above const BottomTabNavigator = ...

Answer 2

I believe u should only have one createAppContainer? Remove the createAppContainer from the stack navigator and try.