Data is not being retreived from one component to another in React Native-> no error messages-CodePudding

As the title says, I'm trying to send data from a Flatlist component and send it to another component (click on toy in list, opens up the toy details). I've tried numerous alternative approaches, and can't figure out what isn't working. This is the closest I've come to it working, where there's no error messages. Alternatively would prefer to use useState to pass data

Passing the data through my flatlist component:

import { StyleSheet, Text, View, FlatList, TouchableOpacity } from 'react-native'
import React, {useState} 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>
        )
    }

    return(
        <View>
            <FlatList 
                data={Toy}
                renderItem={({item})=>{const {name, id, image, price, desc, seller, type, longDesc} = item; return(<View style={{flex:1}}><ToyCard name={name} image={image} price={price} desc={desc} seller={seller} id={id} type={type} longDesc={longDesc} onPress={()=>navigation.navigate('ToyDetails', {name, id, image, price, seller, desc, longDesc, type})}/></View>)}}
                keyExtractor={(item)=>item.id}
                numColumns={2}
                ListHeaderComponent={headerComp}
            />
        </View>
    )
}

export default FLToyCard

Retrieving the data (would prefer it being retreived into the SlugFormat component, but its not a navigational page so just in case, I added one of the props to this page to see if its retrieving the data):

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

import SlugFormat from '../Components/SlugFormat'

const ToyDetails = ({navigation, name}) => {
  return (
    <View>
      <SlugFormat navigation={navigation}/>
      <Text>{name}</Text>
    </View>
  )
}

export default ToyDetails

This is based off the help someone tried to give me on my last post, you can see it see here if necessary.

CodePudding user response：

when you go to any page using navigation that time this props is received inside route.params

 const ToyDetails = ({route,navigation}) => {
    const {name } =route.params
  return (
    <View>
      <SlugFormat navigation={navigation}/>
      <Text>{name}</Text>
    </View>
  )
}