I'm using react-native-calendar module and navigation, and I want to send the dateString data from 'CalendarScreen' to 'MainScreen' when date button clicked.

I get this error 'TypeError: Cannot read properties of undefined (reading 'params')' when I click any date number button. Here is react-native-calendar document: https://github.com/wix/react-native-calendars I tried passing another data nothing to do with calendar module but it didn't work

I'll thank for any advice

Main.js

import React, { useState } from 'react';
import {viewStyles, textStyles} from './styles';

export default function App({navigation, route}) {
  ...
  const [currentDate, setDate] = useState(route.params.date);
  ...
  return(
    <SafeAreaView>
      ...
      <Text style={textStyles.title}>{currentDate}</Text>
      ...
    <SafeAreaView>
  )

}

Calendar.js

import React, {Component, useState, useEffect} from 'react';
import { View, StyleSheet, Dimensions} from 'react-native';
import { theme } from "../theme";
import { Calendar, CalndarList, Agenda, LocaleConfig } from "react-native-calendars";
import { images } from '../images';
import IconButton from './IconButton';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { useNavigation } from '@react-navigation/native';

const calendar = () => {

    const navigation = useNavigation();

    return (
        <View>
            <View style={calStyle.top}>
                <TouchableOpacity onPress={() => navigation.navigate('SearchScreen')}>
                    <IconButton type={images.search} />
                </TouchableOpacity>
            </View>

            <Calendar 
                ...
                
                onDayPress = {(day) => {
                    navigation.navigate('MainScreen', {
                        date: day.toString,
                    });
                }}

                ...
            />
        </View>
    )
}

App.js

import React from 'react';
import {StatusBar} from 'react-native';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import { viewStyles, textStyles } from './styles';
import Calendar from './components/Calendar';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import SearchEngine from './Search'
import App from './Main.js';

function CalendarScreen(){
    return (
        <SafeAreaView style={viewStyles.container}>
            <Calendar />
        </SafeAreaView>
    )
}

function SearchScreen(){
    return (
        <SafeAreaView style = {viewStyles.container}>
            <SearchEngine/>
        </SafeAreaView>
    )
}

function categoryScreen(){
    return (
        <SafeAreaView style = {viewStyles.container}>
            <Category />
        </SafeAreaView>
    )
}

function mainScreen(){
    return (
        <App/>
    )
}

function EditScreen(){
    return (
        <SafeAreaView style = {viewStyles.container}>
            <editScreen/>
        </SafeAreaView>
    )
}

const Stack = createStackNavigator();

export default function calendar_s(props){
    return (
        <SafeAreaProvider>
        <NavigationContainer >
                <StatusBar barStyle="light-content" style={textStyles.statusBar}/>
                <Stack.Navigator initialRouteName="calendar" screenOptions = {{headerShown: true}}>
                    <Stack.Screen name = "calendar" component = {CalendarScreen} />
                    <Stack.Screen name = "SearchScreen" component = {SearchScreen} />
                    <Stack.Screen name = "MainScreen" component = {mainScreen} />
                    <Stack.Screen name = "editScreen" component = {EditScreen} />
                </Stack.Navigator>
        </NavigationContainer>
        </SafeAreaProvider>
    );
};

CodePudding user response：

Your passing params to MainScreen not App.

function mainScreen({ route, navigation }){
    return (
        <App route={route} navigation={navigation} /* <-- Pass navigation or use useNavigation() */ />
    )
}