Flow type of Navigation Screen components [React Navigation]

Question

I want to create nested navigation for React Native app but had problem with flow. My App.js code:

const Drawer = createDrawerNavigator();

const App: () => React$Node = () => {
  const isWeb = Platform.OS === 'web';

  return (
    <NavigationContainer>
      <Drawer.Navigator
        drawerType={'front'}
        drawerContent={(props) => (
          <DrawerContentScrollView {...props}>
            <DrawerItem label="First Item" onPress={() => {}}></DrawerItem>
            <DrawerItem label="Second Item" onPress={() => {}}></DrawerItem>
          </DrawerContentScrollView>
        )}>
        <Drawer.Screen component={HomeStack} name="Home" />
      </Drawer.Navigator>
    </NavigationContainer>
  );
};

My HomeStack

const Stack = createStackNavigator();

export const HomeStack = () => {
  return (
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen
        name="HomeScreen"
        component={HomeScreen}
        options={({navigation}) => ({
          title: 'Home',
          headerLeft: () => (
            <Button title="Menu" onPress={() => navigation.toggleDrawer()} />
          ),
        })}
      />
      <Stack.Screen name="Details" component={DetailScreen} />
    </Stack.Navigator>
  );
};

I get this Flowtype message in App.js at <Drawer.Screen component={HomeStack} name="Home" />:

() => any
(alias) const HomeStack: () => JSX.Element
import HomeStack
Cannot create `Drawer.Screen` element because property `navigation` is missing in  function type [1] but exists in  props [2] in property `component`.Flow(prop-missing)
HomeStack.js(15, 26): [1] function type
drawer_v5.x.x.js(915, 41): [2] props
Cannot create `Drawer.Screen` element because property `route` is missing in  function type [1] but exists in  props [2] in property `component`.Flow(prop-missing)
HomeStack.js(15, 26): [1] function type
drawer_v5.x.x.js(915, 41): [2] props

and this in HomeStack at HomeStack = () => {

Cannot build a typed interface for this module. You should annotate the exports of this module with types. Missing type annotation at function return:Flow(signature-verification-failure)

I tried to import type NavigationScreenProp or NavigationScreenProps from @react-navigation/native but Flow announces that there is no such type exported. (I had run flow-typed install for all npm modules). What should I do? Is that the type I should import?

Answer 1

I assume you're on the latest version of flow, 0.134.0 which is the first version with types-first enabled by default.

As a result, you need to type all variables before you export them. So you HomeStack would change to,

export const HomeStack = (): React.Node => {

Your issue with Drawer.Screen is because it's looking for a component that accepts the props, navigation and route. So you can update your props like so,

type Props = {|
  navigation: any,
  route: any,
|};

export const HomeStack = (props: Props): React.Node => {