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

Correct way to initialize a React Native Component with Navigation

$
0
0

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)


Viewing all articles
Browse latest Browse all 6287

Trending Articles



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