How to use navigation types inside list child component?

Question

I have a problem to set proper types on card component that I render from flat list which should navigate from list to details screen.
All this works but I am getting types errors.
This is my navigators types:

export type RootStackParams = {
  Drawer: DrawerStackParams;
};

export type DrawerStackParams = {
  AppTabStack: AppTabStackParams;
};

export type AppTabStackParams = {
  AppTabStack: HomeStackParams;
  Clients: ClientsStackParams;
};

export type ClientsStackParams = {
  Clients: undefined;
  ClientDetails: {
    clientId: number;
  };
};

This is app tab navigator which contain clients navigator:

<AppTabStack.Navigator>
   <AppTabStack.Screen
        name="Clients"
        component={ClientsScreenStack}
        }}
      />
</AppTabStack.Navigator>

export const ClientsScreenStack = () => {
  return (
    <ClientsStack.Navigator>
      <ClientsStack.Screen name="Clients" component={ClientsScreen} />
      <ClientsStack.Screen
        name="ClientDetails"
        component={ClientDetailsScreen}
      />
    </ClientsStack.Navigator>
  );
};

In flat list in clients screen I have renderItem() component:

<FlatList ...
      renderItem={({ item }) => (
        <ClientCard id={item.id} navigation={navigation} />
      )}
    />

Which should navigate to another screen:

const onCardPress = () => {
    navigation.navigate('ClientDetails', { clientId: id });
  };

This card component has following props:

type ClientCardProps = {
  id: number;
  navigation: NativeStackScreenProps<ClientsStackParams, 'Clients'>;
};
const ClientCard: FC<ClientCardProps> = ({ id, navigation }) => {...

But if I try to call navigation.navigate('ClientDetails', { clientId: id }); I get:

Property 'navigate' does not exist on type 'NativeStackScreenProps<ClientsStackParams, "Clients", undefined>'

Answer 1

Please use props to use navigation.