I try to use useNavigation hook in my functional component but have this error
My main component is like this:
const TransactionsList: React.FunctionComponent<ITransactionsListProps> = ({
transactions,
searchTransactions,
}) => {
return (
<Container>
<DateContainer>
<DateLabel text={I18n.t('currentAccount.dateToday')} />
</DateContainer>
<FlatList
contentContainerStyle={{ flexGrow: 1, paddingBottom: 25 }}
scrollEnabled={true}
data={transactions || searchTransactions}
showsVerticalScrollIndicator={false}
keyExtractor={item => `row-${item.id}`}
renderItem={RenderItem}
/>
</Container>
);
};
export default TransactionsList;
and the RenderItem component just above where I try to use useNavigation:
interface IFakeTransactions {
fisrstName: string;
lastName: string;
amount: string;
co2Cost: string;
type: string;
status: string;
id: string;
side: string;
}
const RenderItem: ListRenderItem<IFakeTransactions> = ({
item
}): JSX.Element => {
const navigation = useNavigation();
return (
<TouchableOpacity
onPress={() => {
navigation.navigate('TransactionDetails')
}}>
<TransactionItem
fisrstName={item.fisrstName}
lastName={item.lastName}
amount={item.amount}
co2Cost={item.co2Cost}
type={item.type}
status={item.status}
side={item.side}
/>
</TouchableOpacity>
);
};
How can I use this hook or the navigation props?
