Can't seem to access the params in react navigation

Question

So I'm trying to access params sent through this.props.navigation.push but can't figure it out for the life of me. I always get undefined is not an object. Any help is appreciated.

App.js:

import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack'

import { SearchScreen } from './screens/SearchScreen.js'
import { ResultsScreen } from './screens/ResultsScreen.js'
import { NavigationContainer } from '@react-navigation/native'

const AppNavigator = createStackNavigator()

export default class App extends React.Component {
  render() {
    return (
      <NavigationContainer>
        <AppNavigator.Navigator>
          <AppNavigator.Screen name="ResultsScreen" component={ResultsScreen} />
          <AppNavigator.Screen name="SearchScreen" component={SearchScreen} />
        </AppNavigator.Navigator>
      </NavigationContainer>
    );
  }
}

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

SearchScreen (screen through which params are sent):

import React from  'react'
import { KeyboardAvoidingView, TextInput, Button, StyleSheet } from 'react-native'
import { url } from '../mockData.js'

export class SearchScreen extends React.Component {
    state = {
        title: "",
        year: 0,
        ID: "",
        isValid: false
    }

    componentDidUpdate(prevProps, prevState) {
        if (this.state.title !== prevState.title || 
            this.state.year !== prevState.year ||
            this.state.ID !== prevState.ID) 
        {
            this.isInputValid()
        }
    }

    getHandler = key => val => {
        this.setState({ [key]: val })
    }

    handleTitleChange = this.getHandler('title')
    handleYearChange = this.getHandler('year')
    handleIDChange = this.getHandler('ID')

    handleSubmit = () => {
        movieArr = [this.state.title, this.state.year, this.state.ID]
        movies = getMovies(movieArr)
        this.props.navigation.push('ResultsScreen', {movies: movies})
    }
    isInputValid = () => {
        if (this.state.title || this.state.year || this.state.ID) {
            this.setState({ isValid: true })
        }
    }

    render() {
        return (
            <KeyboardAvoidingView behavior="padding">
                <TextInput 
                    placeholder='title'
                    value={this.state.title} 
                    onChangeText={this.handleTitleChange} 
                    style={styles.input}
                />
                <TextInput 
                    placeholder='phone'
                    value={this.state.phone} 
                    onChangeText={this.handlePhoneChange} 
                    style={styles.input}
                    keyboardType='numeric'
                />
                <TextInput 
                    placeholder='imdb ID'
                    value={this.state.ID} 
                    onChangeText={this.handleIDChange} 
                    style={styles.input}
                />
                <Button 
                    title='submit'
                    onPress={this.handleSubmit}
                    disabled={!this.state.isValid}
                />
            </KeyboardAvoidingView>
        )
    }
}
async function getMovies(info) {
    if (info[0] !== "") {
        if (info[2] !== "") {
            url += `&t=${info[0]}&i=${info[2]}`
        } else { 
            url += `&s=${info[0]}`
        }
    }
    if (info[1] !== 0) {
        url += `&y=${info[1]}`
    }

    return await fetch(url)
}

styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
    },
    input: {
        borderWidth: 1,
        borderColor: 'black',
        minHeight: 20,
        minWidth: 100
    }
})

ResultsScreen (screen through which I want to access params):

import React from 'react'
import {Text, StyleSheet} from 'react-native'
import MovieSections from '../MovieSections.js'

export class ResultsScreen extends React.Component {
    movies = this.props.navigation.getParam('movies')

    validate = () => {
        if (this.movies.Error === "Incorrect IMDb ID.") {
            return <Text>The imdbID is invalid...Check for any typos.</Text>
        } else if (this.movies.Error === "Movie not found!") {
            return <Text>The movie wasn't found 😢... See if you entered the information correctly!</Text>
        }
    }

    goToDetails = () => {
        this.props.navigation.navigate('SearchScreen')
    }

    render() {
        return(
            <MovieSections movies={this.props.movies} goToDetails={this.goToDetails}/>
        )
    }
}

styles = StyleSheet.create({
    error: {
        color: 'red',
        alignSelf: 'center'
    }
})

BTW, if you find anything else that might cause an error, please tell me. Thanks

Answer 1

First of all navigation parameter should be object. So you have to pass parameter like this :

this.props.navigation.push('ResultsScreen',{
  movies: movies
})

Then you can access navigation parameter by this.props.navigation.getParam() method. So instead of

movies = this.props.route.params.movies

you should use :

movies = this.props.navigation.getParam('movies');