I am working on an app where I navigate from a FlatList to a custom component and I need to access the data i pass to the component. The FlatList component currently looks like this:
import React from 'react';import { View, Text, StyleSheet, FlatList, TouchableOpacity } from 'react-native';import Order from '../../components/Order/Order';import { NavigationParams, NavigationScreenProp, NavigationState,} from 'react-navigation';export interface IProps { navigation: NavigationScreenProp<NavigationState, NavigationParams>;}const OrdersOverview : React.FC<IProps> = props => { const { navigation } = props; return(<View><FlatList keyExtractor={(item) => item.order_id} data={orders} renderItem={({ item }) => (<TouchableOpacity onPress= {() => { navigation.navigate('OrderDetails', item); }}><Order orderNumber={item.order_id} orderDate={item.orderDate} dueDate={item.dueDate} invoiceAmount={item.invoiceAmount} status={item.state} customer={item.customer} /></TouchableOpacity> )} /></View> );}
I am trying to pass the item I clicked to a detail screen. However I cannot access the items and I don't know why it isn't working. I am trying to access the items like this:
import React, { useState } from 'react';import { View, Text, StyleSheet } from 'react-native';import { NavigationParams, NavigationScreenProp, NavigationState,} from 'react-navigation';export interface IProps { navigation: NavigationScreenProp<NavigationState, NavigationParams>;}const OrderDetails : React.FC<IProps> = (props) => { const { navigation } = props; const [categoryName, setCategoryName] = useState('information'); return(<View><Text>{ navigation.getParam('orderDate') }</Text></View> );}