Why can I not navigate to another page from FlatList component in react native?-CodePudding

I'm not sure what's wrong here, as far as I can tell I am doing this correctly as it has worked everywhere else in my app. The only difference is that I'm trying to do this from a FlatList component. What is wrong with this? I've also tried putting {navigation} in renderMyItem instead of FLToyCard brackets, didn't work either. Error I'm getting is: TypeError: undefined is not an object (evaluating 'navigation.navigate').

import { StyleSheet, Text, View, FlatList } from 'react-native'
import React from 'react'

import Toy from './Database'
import ToyCard from './ToyCard'

const FLToyCard = ({navigation}) => {
    
    const headerComp = () => {
        return(
            <View style={{alignSelf: 'center'}}>
                <Text style={{fontSize: 25, padding: 10}}>All Toys For Sale</Text>
            </View>
        )
    }
    
    const renderMyItem = ({item}) => {
        return(
            <View style={{flex: 1}}>
                <ToyCard 
                name={item.name}
                image={item.image}
                price={item.price}
                desc={item.desc}
                seller={item.seller}
                onPress={()=>navigation.navigate('SlugProduct')}
                />
            </View>
        )
    }
    
    return(
        <View>
            <FlatList 
                data={Toy}
                renderItem={renderMyItem}
                keyExtractor={(item)=>item.id}
                numColumns={2}
                ListHeaderComponent={headerComp}
            />
        </View>
    )
}

export default FLToyCard

This is my App.js:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native'
import { createNativeStackNavigator } from '@react-navigation/native-stack';


import SlugProduct from './Screens/SlugProduct';

export default function App() {
  const Stack = createNativeStackNavigator()
  return (
    <NavigationContainer>
        <Stack.Navigator initialRouteName='Login' >
             // list of other pages
             <Stack.Screen name="SlugProduct" component={SlugProduct} />
             <Stack.Screen name='ViewToys' component={ViewToys}
        </Stack.Navigator>
    </NavigationContainer>
  );
}

EDIT: heres the ViewToys page that FLToyCard is being input into. I've tried adding the onPress into both Views and FLToyCard but got the same error each time.

import { StyleSheet, Text, View, ScrollView} from 'react-native'
import React from 'react'

import FLToyCard from '../Components/FlatListCards'

const ViewToys = ({navigation}) => {
  return (
    <View style={{backgroundColor: '#ffce20', height: '100%'}}>
      <View>
        <FLToyCard />
      </View>
    </View>
  )
}

export default ViewToys

CodePudding user response：

The issue is that your not passing navigation props from screen ViewToys into component FLToyCard.

Try this

In ViewToys Screen:

import { StyleSheet, Text, View, ScrollView} from 'react-native'
import React from 'react'

import FLToyCard from '../Components/FlatListCards'

const ViewToys = ({navigation}) => {
  return (
    <View style={{backgroundColor: '#ffce20', height: '100%'}}>
      <View>
        <FLToyCard navigation={navigation}/>
      </View>
    </View>
  )
}

export default ViewToys

CodePudding user response：

change this <FLToyCard /> to this <FLToyCard navigation={navigation} /> and you are all done.

you are getting undefined in navigation in FLToyCard component that's why you are getting this error.

CodePudding user response：

This error come when we do not put these mention in a page
import { NavigationContainer,useFocusEffect } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
So I think put above in every page once your problem will solve,