I have a problem making stack-navigator inside tab-navigator with react-navigation

Question

I'm struggling to make a view using react-navigation that BottomTabNavigator wrapping each StackNavigator, but it prints error: undefined is not an object (evaluating 'state.routes').

app structure I tried to make is

App.js (BottomTabNavigator)
ㄴ HomeScreen (React.Component and initial routing)
ㄴ JumoonScreen (React.Component)
ㄴ WalletScreen (React.Component)
ㄴ ShoppingScreen (StackNavigator <- problem caused)

App.js code is :

const TabBar = createBottomTabNavigator();
export default function App() {
  return (
    <NavigationContainer>
      <TabBar.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            if (route.name === '홈') {
              return <Feather
                name='home' size={22} color={color} />;
            } else if (route.name === '주문내역') {
              return <Ionicons
                name='ios-list' size={22} color={color} />;
            } else if (route.name === '내 지갑') {
              return <SimpleLineIcons
                name='wallet' size={21} color={color} />;
            } else if (route.name === '쇼핑') {
              return <SimpleLineIcons
                name='handbag' size={22} color={color} />;
            }
          },
        })}
        tabBarOptions={{
          activeTintColor: '#0098EB',
          inactiveTintColor: '#999999',
        }}>

        <TabBar.Screen name="홈" component={HomeScreen} />
        <TabBar.Screen name="주문내역" component={JumoonScreen} />
        <TabBar.Screen name="내 지갑" component={WalletScreen} />
        <TabBar.Screen name="쇼핑" component={ShoppingScreen} />
      </TabBar.Navigator>
    </NavigationContainer>
  );
}

and ShoppingScreen Component imported from ShoppingScreen.js is :

class FirstSubScreen extends Component {
  render() {
    return (
      <View>
        <Text>
          sample text
              </Text>
      </View>
    );
  }
}

export default class ShoppingScreen extends Component {
  render() {
    const { navigation } = this.props;
    const Stack = createStackNavigator();

    return (
      <NavigationContainer independent={true}>
        <Stack.Navigator>
          <Stack.Screen name="샘플" component={FirstSubScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

however, if I make ShoppingScreen.js like this, it worked.

export default class ShoppingScreen extends Component {
  render() {
    const { navigation } = this.props;
    const Tab = createMaterialTopTabNavigator();

    return (
      <NavigationContainer independent={true}>
        <Tab.Navigator>
          <Tab.Screen name="샘플" component={FirstSubScreen} />
        </Tab.Navigator>
      </NavigationContainer>

    );
  }
}

what's wrong with my code?

When you present your code, always mention the imports, or your package.json. This will highlight the versions of the dependencies you are using. Clearly you can see in the warning in the log console that you are using old version of ReactNavigation dependency, and correct yourself (for example). — Abhinav Saxena

poodlepoodle poodlepoodle · Accepted Answer · 2020-02-26T07:50:59

I solved it myself, by correcting

import { createStackNavigator } from 'react-navigation-stack';

to

npm install @react-navigation/stack.

import { createStackNavigator } from '@react-navigation/stack';

thank you for your help.

I have a problem making stack-navigator inside tab-navigator with react-navigation

1 Answers