Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6211

How to compose ParamList for nested navigators in v5?

$
0
0

Say I have two navigators like this:

export type RootStackParamList = {
  Bootstrap: undefined;
  Login: undefined;
  MainApp: undefined;
};

export type MainTabsParamList = {
  Explore: undefined;
  Profile: undefined;
};

const MainTabs = createBottomTabNavigator<MainTabsParamList>();
const MainApp = () => (
  <MainTabs.Navigator >
    <MainTabs.Screen
      name="Explore"
      component={Explore}
    />
    <MainTabs.Screen
      name="Profile"
      component={Profile}
    />
  </MainTabs.Navigator>
);

const RootStack = createStackNavigator<RootStackParamList>();
const App = () => {
  return (
    <NavigationContainer>
      <RootStack.Navigator initialRouteName="Bootstrap" headerMode="none">
        <RootStack.Screen name="Bootstrap" component={Bootstrap} />
        <RootStack.Screen name="Login" component={Login} />
        <RootStack.Screen name="MainApp" component={MainApp} />
      </RootStack.Navigator>
    </NavigationContainer>
  );
};

Now if I want to navigate to Profile screen from Bootstrap screen. I have to write: (navigation prop properly annotated)

navigation.navigate('MainApp', {screen: 'Profile'})

But typescript gives error here. Saying Type '{ screen: string; }' is not assignable to type 'undefined'. This is because typescript doesn't know MainApp has child screens. So I have to somehow compose the ParamLists so typescript knows about the child screens. How do I do that? Does react-navigation v5 support that?


Viewing all articles
Browse latest Browse all 6211

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>