Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6213

react navigation getparam with typescript

$
0
0

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>    );}

Viewing all articles
Browse latest Browse all 6213

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>