CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
Adnan Salahuddin
Adnan Salahuddin

Reputation: 81

TypeError: navigation.getParam is not a function

I am using react navigation with stack 5 version.

App.js

export default class App extends React.Component {
  render() {
     return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Movie" component={Movie} />
      </Stack.Navigator>
    </NavigationContainer>
     )
  }
}

Home.js

     <TouchableHighlight onPress={() => { this.props.navigation.navigate('Movie', { title: item.title, img: item.img, id: item.imdbID }) }}>
      // code omitted               
      </TouchableHighlight>

I clicked movie item to movie details but I am getting error message and it says:

TypeError: navigation.getParam is not a function

Movie.js

   componentDidMount() {
        this.getMovieDetails(this.props.navigation.getParam('id', 'n/a')) 
    }

    getMovieDetails = async (id) => {
         const results = await fetchById(id)
         this.setState({ info: results })
    }

    render() {
        const { navigation } = this.props
        const title = navigation.getParam('title', 'N/A');
        const img = navigation.getParam('img', 'https://banner2.kisspng.com/20180216/kee/kisspng-photographic-film-reel-clip-art-movie-film-5a8677562304e0.0541516415187618141435.jpg');
}

enter image description here

Could you please help me with this issue? I am waiting for your response.

Thanks in advance

Upvotes: 0

Views: 4848

Answers (3)

Ramachandra Reddy Avula
Ramachandra Reddy Avula

Reputation: 1114

this.state = {
    do:{
      name: props.route.params.name,
      color: props.route.params.color
    }
};

Upvotes: 0

Waheed Akhtar
Waheed Akhtar

Reputation: 3187

Here is a snack with the solution that you required, I have made a few changes in your code and your error is fixed now in this snack. You were trying to access getParams function but that wasn't available inside the navigation object so instead of getting params with getParams function I directly get these params from this.pros.navigation.route.params

https://snack.expo.io/@waheed25/home_movie

Upvotes: 1

Ajin Kabeer
Ajin Kabeer

Reputation: 2186

This is a common issue in react-native while passing props with navigation. You could try this approach to see if it works.

//Home.js

<TouchableHighlight onPress={() => { this.props.navigation.navigate({'Movie', { title: item.title, img: item.img, id: item.imdbID }}) }}>

And in the Movie.js you can access the props like this.

//Movie.js
componentDidMount() {
        this.getMovieDetails(this.props.route.params) 
    }

Update:

 //Home.js
    <TouchableHighlight onPress={() => { this.props.navigation.navigate('Movie', { title: item.title, img: item.img, id: item.imdbID }) }}>
      // code omitted               
      </TouchableHighlight>

    //Movie.js
    componentDidMount(){
          const navObject = this.props.navigation.state.params 
          console.log(navObject )
    }

Upvotes: 0

Related Questions