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

How to declare react navigation argument with typescript?

$
0
0

I want to use typescript with my react hook component.

I use react-navigation for my router.

Create project with npx react-native init MyTSProject --template react-native-template-typescript@6.2.0

version is

"react": "16.8.6",
"react-native": "0.60.5",

Here is what I try

RootScreen.tsx

import React from 'react';

import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity
} from 'react-native';

interface IRootScreen {
  navigation: () => void;
}

const RootScreen: React.FC<IRootScreen> = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={() => navigation.navigate('MainStack')}>
        <Text style={{ fontSize: 40 }}>I am RootScreen</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

export default RootScreen;

I can navigate to MainStack successfully.

But navigation.navigate('MainStack') will shows type () => void no argument navigate on my editor Visual Studio Code.

Is any thing wrong with my interface or I still have to do something with the code ?

Any help would be appreciated.


Viewing all articles
Browse latest Browse all 6208

Trending Articles



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