This is my first try on using react navigation, and I did not get it to work out of the first time. I have create another screen called 'First', and declared it like this:
types.tsx:
export type RootStackParamList = { Root: NavigatorScreenParams<RootTabParamList> | undefined; Modal: undefined; NotFound: undefined; First: undefined;};navigation/index.tsx:
import { FontAwesome } from '@expo/vector-icons';import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';import { NavigationContainer, DefaultTheme, DarkTheme } from '@react-navigation/native';import { createNativeStackNavigator } from '@react-navigation/native-stack';import * as React from 'react';import { ColorSchemeName, Pressable } from 'react-native';import Colors from '../constants/Colors';import useColorScheme from '../hooks/useColorScheme';import ModalScreen from '../screens/ModalScreen';import NotFoundScreen from '../screens/NotFoundScreen';import TabOneScreen from '../screens/TabOneScreen';import TabTwoScreen from '../screens/TabTwoScreen';import First from '../screens/FirstScreen'import { RootStackParamList, RootTabParamList, RootTabScreenProps } from '../types';import LinkingConfiguration from './LinkingConfiguration';function RootNavigator() { return (<Stack.Navigator><Stack.Screen name="First" component={First} options={{ headerShown: false}} /><Stack.Screen name="Root" component={BottomTabNavigator} options={{ headerShown: false }} /><Stack.Screen name="NotFound" component={NotFoundScreen} options={{ title: 'Oops!' }} /><Stack.Group screenOptions={{ presentation: 'modal' }}><Stack.Screen name="Modal" component={ModalScreen} /></Stack.Group></Stack.Navigator> );}navigation/LinkingConfiguration.ts:
import { LinkingOptions } from '@react-navigation/native';import * as Linking from 'expo-linking';import { RootStackParamList } from '../types';const linking: LinkingOptions<RootStackParamList> = { prefixes: [Linking.makeUrl('/')], config: { screens: { Root: { screens: { TabOne: { screens: { TabOneScreen: 'one', }, }, TabTwo: { screens: { TabTwoScreen: 'two', }, }, }, }, Modal: 'modal', NotFound: '*', First: 'first' }, },};export default linking;And this is how I am trying to navigate:
screens/FirstScreen.tsx:
import { useRef, useEffect } from 'react'import { StatusBar } from 'expo-status-bar';import { Platform, StyleSheet, Image, Button, Animated, TouchableOpacity } from 'react-native';import FadeInShrinkView from '../components/FadeInShrinkView';import Touchable01 from '../components/Touchable01';import { Text, View } from '../components/Themed';import Navigation from '../navigation';import { NavigationContainerRefContext, useNavigation } from '@react-navigation/native';import { RootStackScreenProps } from '../types';export default function First() { const navigation = useNavigation() return (<View style={styles.container}><Touchable01 title='Go Now' onTouch={()=> navigation.navigate('Root') } /> </View>)} When testing in Expo Go, it does not navigate to the Root tab. Am I doing something wrong on all of that?