React Native NavigationStack screen component type mismatch

Question

I'm trying to build an app with React Native and React Navigation. I use typescript. I created RootStackParams type for my routes. The code is below: App.tsx

export type RootStackParams = {
  Explore: undefined;
  Restaurants: undefined;
  Profile: undefined;
  Restaurant: {
    name: string;
  };
};

const RootStack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <RootStack.Navigator initialRouteName="Profile">
        <RootStack.Screen name="Profile" component={ProfileScreen} />
        <RootStack.Screen name="Explore" component={ExploreScreen} />
        <RootStack.Screen name="Restaurants" component={RestaurantsScreen} />
        <RootStack.Screen name="Restaurant" component={RestaurantScreen} />
      </RootStack.Navigator>
    </NavigationContainer>
  );
}

Restaurants.tsx

type RestaurantsScreenProps = NativeStackScreenProps<
  RootStackParams,
  'Restaurants'
>;

const RestaurantsScreen: React.FC<RestaurantsScreenProps> = ({navigation}) => {
  return (
    <View style={styles.container}>
      <Text>Restaurants</Text>
      <ScrollView>
        {names.map((name, i) => (
          <RestaurantCard
            key={i}
            name={name}
            onPress={() => navigation.navigate('Restaurant', {name: name})}
          />
        ))}
      </ScrollView>
    </View>
  );
};

The error I'm getting about type mismatch

Type '({ navigation, route }: RestaurantProps) => React.JSX.Element' is not assignable to type 'ScreenComponentType<ParamListBase, "Restaurant"> | undefined'.
  Type '({ navigation, route }: RestaurantProps) => React.JSX.Element' is not assignable to type 'FunctionComponent<{}>'.
    Types of parameters '__0' and 'props' are incompatible.
      Type '{}' is missing the following properties from type 'RestaurantProps': navigation, routets(2322)

I don't understand what I need to change to solve this issue

Answer 1

Change from :

type RestaurantsScreenProps = NativeStackScreenProps<
  RootStackParams,
  'Restaurants'
>;

const RestaurantsScreen: React.FC<RestaurantsScreenProps> = ({navigation}) => {
  //
}

to:

type RestaurantsScreenProps = NativeStackScreenProps<
  RootStackParams,
  'Restaurants'
>;

const RestaurantsScreen = ({navigation}: RestaurantsScreenProps) => {
  //
}