CODEWITHSUNDEEP
reactjsreact-native
S S
S S

Reputation: 1503

React Native - Moving between screens error in navigation

I am learning moving between screens tutorial. I came up to HomeScreen.js file where I get red error on navigation. When I hover on navigation I get error

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

And When I hover on 'react-navigation' I get 

"[ts]
Could not find a declaration file for module 'react-navigation'. 'd:/react-workspace/stack-navigator/node_modules/react-navigation/src/react-navigation.js' implicitly has an 'any' type.
  Try `npm install @types/react-navigation` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-navigation';`"

This is my code

import React, { Component } from 'react';
import {
    View,
    Text,
    StyleSheet,
    Button
} from 'react-native';
import { createStackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Home Screen</Text>
                <Button
                    title="Go to Details"
                    onPress={() => this.props.navigation.navigate('Details')}
                />
            </View>
        );
    }
}


export default HomeScreen;

Upvotes: 2

Views: 2605

Answers (4)

Zaid E.
Zaid E.

Reputation: 1034

To solve the first error, I used the answer from this blog post:

import React, { Component } from 'react'
import { NavigationScreenProp, NavigationState } from 'react-navigation';

interface NavigationParams {
  my_param: string; // You can change "string" to what you are using
}

type Navigation = NavigationScreenProp<NavigationState, NavigationParams>;

interface Props {
  navigation: Navigation;
}

class MyComponent extends Component<Props> {
  render() {
    const my_param: string = this.props.navigation.getParam('my_param', {})
    // rest of the code
  }
}

To solve the second error, do as instructed: 

npm install --save-dev @types/react-navigation

Upvotes: -1

bamtheboozle
bamtheboozle

Reputation: 6406

As the second error message says, you need to install the typescript definition module for the react-navigation package. You can do that with npm install --save-dev @types/react-navigation.

Also, regarding the first error, make sure you're actually wrapping your component with createStackNavigator. This will give you access to the navigation prop.

export default createStackNavigator({
  Home: {
    screen: HomeScreen
  },
});

Since you're using typescript, you need to declare the interfaces for your state and props. You should look into typescript with react, it would look something like:

class HomeScreen extends React.Component<PropsInterface, StateInterfaces>, where PropsInterface would be something like:

export interface HelloProps { navigation: <Type_From_Definition>; }

Upvotes: 3

Hemadri Dasari
Hemadri Dasari

Reputation: 33974

This is not solution for your problem but In terms of improvement I would recommend you to check whether this.props.navigation is not undefined because you are directly accessing this.props.navigation.navigate so this will create an issue if do that directly when this is this.props.navigation undefined

To be on safer side add conditional check something like below

 {this.props.navigation && this.props.navigation != undefined && <Button title="Go to Details" onPress={() => this.props.navigation.navigate('Details')} />}

Upvotes: 0

morteza ataiy
morteza ataiy

Reputation: 923

This error:

   Could not find a declaration file for module 'react-navigation'.
   Try `npm install @types/react-navigation

say you to install react-navigation module.

so just install it by run this command in your project folder:

npm install react-navigation

or

npm install @types/react-navigation

Upvotes: 1

Related Questions