react-native useNavigation invalid Hook call in a functional component

Viewed 716

I try to use useNavigation hook in my functional component but have this error

enter image description here

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?

1 Answers

You need to set the functional component in render, not passing the function:

<FlatList
        contentContainerStyle={{ flexGrow: 1, paddingBottom: 25 }}
        scrollEnabled={true}
        data={transactions || searchTransactions}
        showsVerticalScrollIndicator={false}
        keyExtractor={item => `row-${item.id}`}
        renderItem={(props)=> <RenderItem {...props} />}
      />
Related