I'm currently struggeling using React native navigation and class components.Before I had no extra options in the StackNavigator and just the <MainStack.Screen name="HomeScreen" component={HomeScreen} />;
, that worked fine.
Now I want to pass the dataservice so I can pass a mocked implementation of the interface for tests. However this throws me type errors regarding the navigation object and I cant figure out how to pass both.
The class component:
interface IHomeScreenState { ...//Some data}interface IHomeScreenProps { navigation: NavigationStackProp<{userId: string}>; //navigation: any; dataService: IDataService;}// eslint-disable-next-line prettier/prettierexport class HomeScreen extends React.Component< IHomeScreenProps, IHomeScreenState> { constructor(props: IHomeScreenProps) { super(props); this.state = { //... }; }}
My stack navigation:
export const MainScreenStack = ({navigation}: any) => { return (<MainStack.Navigator initialRouteName="HomeScreen" screenOptions={{ headerShown: false, }}><MainStack.Screen name="HomeScreen" component={HomeScreen} options={{navigation: navigation, dataService: new DataService()}} /></MainStack.Navigator> );};
I get the following error in the options={{navigation: navigation, dataService: new DataService()}}
line:
Type '{ navigation: any; dataService: DataService; }' is not assignable to type 'NativeStackNavigationOptions | ((props: { route: RouteProp<MainStackParams, "HomeScreen">; navigation: any; }) => NativeStackNavigationOptions) | undefined'.Object literal may only specify known properties, and 'navigation' does not exist in type 'NativeStackNavigationOptions | ((props: { route: RouteProp<MainStackParams, "HomeScreen">; navigation: any; }) => NativeStackNavigationOptions)'.ts(2322)