Question 248786 in React native Question posted in
The official React Native documentation can be found here.

React Native NavigationStack screen component type mismatch

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

Tags:

2

Answers


  1. 0

    Replace this line

    const RestaurantsScreen: React.FC<RestaurantsScreenProps>

    by the following

    const RestaurantsScreen: React.FunctionComponent<
  NativeStackScreenProps<RootStackParams, "Restaurants">
>

    I think this may solve the problem since the FC is currently unknown and by adding this line, it follows the names in your list.

    Login or Signup to reply.
  2. 0

    Change from :

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

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

    to:

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

const RestaurantsScreen = ({navigation}: RestaurantsScreenProps) => {
  //
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search