'React Navigation for React Native not navigating - anything missing?

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?

Solution 1:^[1]

I still do not know exactly why, but the issue was with my component Touchable01. For any reason, the touch was not triggering the "navigate", I'm not sure whether it expects it to come from a button component.

Anyways, changing it caused it to work.

Thanks all!

Solution 2:^[2]

I'm not sure I fully understand your case. But I encountered something similar before. Try this and please let me know if it works.

This is to navigate to 'TabOneScreen'

navigation.navigate('Root', {
    screen: 'TabOne',
    params: {
        screen: 'TabOneScreen',
      },
})

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	rdrgtec
Solution 2	DharmanBot

'React Navigation for React Native not navigating - anything missing?

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]