Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6208

React Navigation Typescript Error On Stack Navigator

$
0
0

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.


Viewing all articles
Browse latest Browse all 6208

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>