React-Native Navigation with typescript

Question

I was trying to implement react native with Typescript. while trying to access react-navigation library . Its throwing typescript errors.

Property 'navigation' does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>'.

My component.tsx

    import React, { Component } from "react";
import { View, Text, TouchableHighlight, Alert } from "react-native";
import {
  NavigationParams,
  NavigationScreenProp,
  NavigationState,
} from 'react-navigation';

class FirstPage extends Component {

  public static navigationOptions = {
    title: 'Test Screen',
  };

constructor(props: any) {
    super(props);
}



_call = (firstName:string,lastName:string) => {

    Alert.alert(
        'Title',
        `${firstName} ${lastName}`,
        [
          {text: 'Ask me later', onPress: () => console.log('Ask me later pressed')},
          {
            text: 'Cancel',
            onPress: () => console.log('Cancel Pressed'),
            style: 'cancel',
          },
          {text: 'OK', onPress: () => console.log('OK Pressed')},
        ],
        {cancelable: false},
      );
   // Alert( `$(firstname) $(lastName)`)
}


_nav=()=>
{
 this.props.navigation.navigate('second');
}

render() {

    return (
        <View>
            <Text>Hello First Page</Text>
            <TouchableHighlight onPress={()=>this._call('hello','user')} >
                <Text>Types Button</Text>
            </TouchableHighlight>
            <TouchableHighlight onPress={()=>this._nav} >
                <Text>Types Button</Text>
            </TouchableHighlight>
        </View>
    )

}

}

export default FirstPage;

Please let me know how to resolve this errors. In addition please point me towards implementing types using interfaces.

cnps · Accepted Answer · 2019-09-16 10:35:42Z

1

I think this error is due to TypeScript's strict mode and no types on your props, as it won't compile props without types in strict mode hence your error. This is because you create a new class, with a completely new constructor, and TypeScript does not know which parameters to expect.

I'm not familiar with TS and react, but you can try something like this:

interface IPropType { 
  // props goes here
  // title: string;
  // quantity: number;
}

class FirstPage extends Component<IPropType> {

constructor(props: IPropType) {
    super(props);
}

You can also import the type(s)/interfaces from a model file, it does't matter.

answered Sep 16, 2019 at 10:35

cnps

15111 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React-Native Navigation with typescript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related