How do I fix my navigation in React Native?

  android, ios, javascript, react-native, reactjs

I’m simply trying to make the buttons in my homeScreen navigate to other screens when pressed so I used react-navigation to make a navigation stack to handle this. However, I’m getting this error whenever I try to navigate to another screen by pressing the appropriate buttons: "The action ‘NAVIGATE’ with payload {"name":"Client Connect"} was not handled by any navigator.

Do you have a screen named ‘Client Connect’?

If you’re trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator."

I’m not sure how to fix this how so I would really appreciate some help with this. Thank you

homeScreen(Screen with buttons that should navigate to other pages):

import React from 'react';
import {View, FlatList, Text, TouchableOpacity, Dimensions} from 'react-native';
import LinearGradientScreen from './linearGradientScreen';
import Feather from 'react-native-vector-icons/Feather';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import Entypo from 'react-native-vector-icons/Entypo';

const CellComponent = (props) => {
  return (
    <TouchableOpacity
      onPress={() => props.navigation.navigate(props.item.name)}
      style={{
        backgroundColor: props.item.color,
        height: (13 * Dimensions.get('window').height) / 100,
        width: 132,
        borderRadius: 5,
        shadowColor: 'rgba(52,2,2,1)',
        shadowOffset: {
          width: 3,
          height: 3,
        },
        elevation: 5,
        shadowOpacity: 1,
        shadowRadius: 0,
        margin: 20,
        alignItems: 'center',
        justifyContent: 'center',
      }}>
      {props.item.family === 'Feather' ? (
        <Feather
          type={props.item.type}
          color={'rgba(255,255,255,1)'}
          name={props.item.icon}
          size={30}
        />
      ) : null}
      {props.item.family === 'MaterialCommunityIcons1' ? (
        <MaterialCommunityIcons
          type={props.item.type}
          color={'rgba(255,255,255,1)'}
          name={props.item.icon}
          size={30}
        />
      ) : null}
      {props.item.family === 'Entypo' ? (
        <Entypo
          type={props.item.type}
          color={'rgba(255,255,255,1)'}
          name={props.item.icon}
          size={30}
        />
      ) : null}
      {props.item.family === 'MaterialCommunityIcons2' ? (
        <MaterialCommunityIcons
          type={props.item.type}
          color={'rgba(255,255,255,1)'}
          name={props.item.icon}
          size={30}
        />
      ) : null}
      {props.item.family === 'MaterialCommunityIcons' ? (
        <MaterialCommunityIcons
          type={props.item.type}
          color={'rgba(255,255,255,1)'}
          name={props.item.icon}
          size={30}
        />
      ) : null}
      {props.item.family === 'FontAwesome' ? (
        <FontAwesome
          type={props.item.type}
          color={'rgba(255,255,255,1)'}
          name={props.item.icon}
          size={30}
        />
      ) : null}
      <Text
        style={{
          color: 'white',
          fontSize: 18 * Dimensions.get('window').fontScale,
        }}>
        {props.item.name}
      </Text>
    </TouchableOpacity>
  );
};
const HomeScreen = (props) => {
  return (
    <LinearGradientScreen>
      <View style={{alignItems: 'center', justifyContent: 'center'}}>
        <Text
          style={{
            marginTop: '20%',
            fontSize: 50 * Dimensions.get('window').fontScale,
            color: 'white',
            fontWeight: 'bold',
          }}>
          Home
        </Text>
        <Text
          style={{
            fontSize: 25 * Dimensions.get('window').fontScale,
            color: 'white',
            fontWeight: '400',
            marginBottom: '10%',
          }}>
          Select a service
        </Text>
        <FlatList
          numColumns={2}
          data={HomeScreenData}
          renderItem={({item}) => {
            return <CellComponent {...props} item={item} />;
          }}
        />
      </View>
    </LinearGradientScreen>
  );
};
const HomeScreenData = [
  {
    id: 1,
    name: 'AI Chat',
    icon: 'cpu',
    family: 'Feather',
    routeName: 'AiScreen',
    color: 'rgba(247,52,122,1)',
  },
  {
    id: 2,
    name: 'Live Chat',
    icon: 'wechat',
    family: 'FontAwesome',
    color: 'rgba(16,165,245,1)',
  },
  {
    id: 3,
    name: 'Resources',
    icon: 'file-document-outline',
    family: 'MaterialCommunityIcons',
    color: 'rgba(74,74,74,1)',
  },
  {
    id: 1,
    name: 'Client Connect',
    icon: 'gesture-swipe-horizontal',
    family: 'MaterialCommunityIcons1',
    color: 'rgba(237,41,57,1)',
  },
  {
    id: 1,
    name: 'DM',
    icon: 'message',
    family: 'Entypo',
    color: 'rgba(74,144,226,1)',
  },
  {
    id: 1,
    name: 'Profile',
    icon: 'tooltip-account',
    family: 'MaterialCommunityIcons2',
    color: 'rgba(144,19,254,1)',
  },
];
export default HomeScreen;

Navigation Stack:

import * as React from 'react';
import { Button, View, Text, FlatList } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './HomeScreen';
import AiScreen from './AiScreen';

function AiChatScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Ai AiChatScreen</Text>
    </View>
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="AI Chat" component={AiScreen} />
        <Stack.Screen name="Resources" component={ResourcesScreen} />
        <Stack.Screen name="DM" component={DmScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
        <Stack.Screen name="Live Chat" component={LiveChatScreen} />
        <Stack.Screen name="Client Connect" component={ClientConnectScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

function LiveChatScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Live Chat Screen</Text>
    </View>
  );
}

function ResourcesScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Resources Screen</Text>
    </View>
  );
}

function ClientConnectScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Client Connect Screen</Text>
    </View>
  );
}

function DmScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>DM Screen</Text>
    </View>
  );
}

function ProfileScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Profile Screen</Text>
    </View>
  );
}

export default App;

Source: Android Questions

One Reply to “How do I fix my navigation in React Native?”

LEAVE A COMMENT