Here is my navigator. I have a bottomTab with 3 stack navigators as screens 'Home''Profile''Discover', and main root stack navigator with bottom tab navigator and few modal screens. I can not understand how to do Type checking with TypeScript right from guide in docs. Can someone explain me what am i doing wrong. For right now if i want to navigate from tab Home to tab Profile i can see only to 'Home' and all modal screens and to tabNavigator itself but not to tabs of my tabNavigator:
my code of mainNavigator:
export type TabParamList = { Home: undefined; Discover: undefined; Profile: undefined;}export type MainStackParamList = { TabNavigator: undefined; ModalStreamsPlayer: { streamsQualitys: ParsedStream[], stream: Stream} | undefined; ModalWebBrowser: { url: string, title: string } | undefined; ModalVideoPlayer: { video: Video } | undefined;}export type HomeStackParamList = { Home: undefined;}export type DiscoverStackParamList = { Discover: undefined;}export type ProfileStackParamList = { Profile: undefined;}const Tab = createBottomTabNavigator<TabParamList>();const RootStack = createStackNavigator<MainStackParamList>();const HomeStack = createStackNavigator<HomeStackParamList>();const DiscoverStack = createStackNavigator<DiscoverStackParamList>();const ProfileStack = createStackNavigator<ProfileStackParamList>();const screenOptions = ({ route }): StackNavigationOptions => { return { title: route.name, headerTitleStyle: { fontFamily: 'ProximaNova-Semibold', fontSize: 18, textTransform: 'uppercase', lineHeight: 22, color: '#D6FFFD' }, headerStyle: { backgroundColor: '#133740', elevation: 0, shadowOpacity: 0, borderBottomWidth: 0 }, headerTintColor: '#D6FFFD', headerTitleAlign: 'center', }}const TabHomeStack = () => { return (<HomeStack.Navigator><HomeStack.Screen name='Home' component={HomeScreen} options={screenOptions} /></HomeStack.Navigator> );};const TabDiscoverStack = () => { return (<DiscoverStack.Navigator><DiscoverStack.Screen name='Discover' component={DiscoverScreen} options={screenOptions} /></DiscoverStack.Navigator> );}const TabProfileStack = () => { return (<ProfileStack.Navigator><ProfileStack.Screen name='Profile' component={ProfileScreen} options={screenOptions} /></ProfileStack.Navigator> )}const TabNavigator = () => { return (<Tab.Navigator tabBarOptions={{ showLabel: false, // activeTintColor: '#2F80ED', // inactiveTintColor: '#999999', style: { backgroundColor: '#133740', height: Platform.OS === 'ios' ? 94 : 60, borderTopWidth: 0 } }}><Tab.Screen name='Home' component={TabHomeStack} options={{ tabBarIcon: ({color, focused, size}) => (<Image source={ focused ? images.tabBarIconHomeActive : images.tabBarIconHomeNormal } /> )}} /><Tab.Screen name='Discover' component={TabDiscoverStack} options={{ tabBarIcon: ({color, focused, size}) => (<Image source={ focused ? images.tabBarIconDiscoverActive : images.tabBarIconDiscoverNormal } /> )}} /><Tab.Screen name='Profile' component={TabProfileStack} options={{ tabBarIcon: ({color, focused, size}) => (<Image source={ focused ? images.tabBarIconProfileActive : images.tabBarIconProfileNormal } /> )}} /></Tab.Navigator> );};const RootStackNavigator = () => { return (<RootStack.Navigator mode='modal'><RootStack.Screen name='TabNavigator' component={TabNavigator} options={{ headerShown: false }} /><RootStack.Screen name='ModalStreamsPlayer' component={StreamsPlayer} options={{ headerShown: false }} /><RootStack.Screen name='ModalWebBrowser' component={WebScreen} options={{ headerShown: false }} /><RootStack.Screen name='ModalVideoPlayer' component={YoutubePlayer} options={{ headerShown: false }} /></RootStack.Navigator> );}export default RootStackNavigator;Home screen from Home tab:
type HomeScreenNavigationProp = CompositeNavigationProp< BottomTabNavigationProp<HomeStackParamList, 'Home'>, StackNavigationProp<MainStackParamList>>;type HomeScreenRouteProp = RouteProp< HomeStackParamList, 'Home'>;export type HomeProps = { navigation: HomeScreenNavigationProp; route: HomeScreenRouteProp;};export default class HomeScreen extends React.Component<HomeProps> { render() { return (<View style={styles.container}><ScrollView style={styles.scrollView}><View style={{ paddingBottom: 24 }}><StreamsScreen navigation={this.props.navigation} /><View style={styles.separator}></View><NewsScreen navigation={this.props.navigation} /><View style={styles.separator}></View><VideosScreen navigation={this.props.navigation} /><View style={styles.separator}></View></View></ScrollView></View> ); }}