CODEWITHSUNDEEP
reactjstypescriptreact-native
Kartiikeya
Kartiikeya

Reputation: 2516

React-Native Navigation with typescript

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.

Upvotes: 0

Views: 1686

Answers (1)

cnps
cnps

Reputation: 151

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.

Upvotes: 1

Related Questions