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?
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 => {