I'm having a typescript issue with creating a stack navigator using React Navigation in combination with a component wrapped with a couple Higher Order Components (HOCs). I'm using compose
to string my HOCs together but typescript is saying the returned component is not compatible with stack nagivator screen prop. Here is my code:
import { createStackNavigator, StackNavigationProp } from '@react-navigation/stack';
import { View, Button } from 'react-native';
import { compose } from 'recompose';
import { RouteProp } from '@react-navigation/native';
type RootStackParamList = {
Home: IProps
};
type IProps = {
message: string;
user: string;
navigation: StackNavigationProp<RootStackParamList, 'Home'>;
route: RouteProp<RootStackParamList, 'Home'>
}
const Home = (props: IProps) => {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button onPress={() => alert(props.message)} title='Message' />
</View>
);
}
const withMessage = (Component: React.ComponentType<{ message: string }>) => <Component message='hello' />
const withUser = (Component: React.ComponentType<{ user: string }>) => <Component user='Joe' />
const homeWithMoreProps = compose<IProps, {}>(
withMessage,
withUser
)(Home);
const RootStack = createStackNavigator<RootStackParamList>();
<RootStack.Navigator initialRouteName='Home'>
<RootStack.Screen name='Home' component={homeWithMoreProps} /> // <-- Error is here
</RootStack.Navigator>
Using "@react-navigation/stack": "^5.0.0-alpha.58"
The error is:
Type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>' is missing the following properties from type 'Readonly<{ route: RouteProp<RootStackParamList, "Home">; navigation: any; }>': route, navigation
Basically telling me the homeWithMoreProps
component is missing the navigation and route props, but based on my IProps typing it shouldn't be. I'm trying to follow these instructions but to no avail: https://reactnavigation.org/docs/en/next/typescript.html.