How can I solve the problem of data not passing between views in React Native?

Question

I recently started developing apps using React Native. During development, I needed to move data from a calendar to another view selected by the user. I used async storage for this process. Please refer to the following link. How can I solve the old date displaying error in React Native?

And I made it so that I can pass data in the navigation process without using async storage afterwards. However, this time, I found that nothing appears on the Detail screen even when February 15 is selected on the calendar. And this was a problem that occurred even if I selected a date other than February 15th. I don't know how to solve this problem.

I'm new to React Native development, so I don't know how to solve this problem.

This is my code

App.js

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import HomeScreen from './Home';
import DetailScreen from './Detail';
import { AntDesign } from '@expo/vector-icons'; 
import { Ionicons } from '@expo/vector-icons'; 


function App() {
  const Stack = createNativeStackNavigator();
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen 
        name="Home" 
        component={HomeScreen} 
        options={({}) => ({
          headerBackVisible: false,
          headerRight: () => (
            <AntDesign name="setting" size={24} color="black" />
          ),
        })}
        />
        <Stack.Screen name="Detail" component={DetailScreen}
        options={({ navigation }) => ({
          headerBackVisible: false,
          headerLeft: () => (
            <Ionicons name="arrow-back" size={24} color="black" onPress={() => navigation.navigate('Home')} />
          ),
        })}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

Home.js

import React from 'react';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import {Calendar} from "react-native-calendars";
import {View} from 'react-native';

function HomeScreen({navigation}) {
  const markedDates = {
    '2023-02-01': {marked: true, dotColor: 'red'},
  }
  return(
      <SafeAreaProvider>
         <View>
            <Calendar
              markedDates={markedDates}
              onDayPress={(day) => {
                navigation.push('Detail', {day});
              }}
           />
         </View>
      </SafeAreaProvider>
  );
}

export default HomeScreen;

Detail.js

import React from 'react';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import {View, Text} from 'react-native';


function DetailScreen({route}) {
  const { day } = route.params;

  return(
    <SafeAreaProvider>
      <View>
         <Text>{day}</Text>
      </View>
    </SafeAreaProvider>
  );
}

export default DetailScreen;

And this is my development environment. OS: macOS Monterey(12.6.3) Development Program: Visual Studio Code (1.71.1) Simulator: iPhone 14 (ios 16.2) React native Version: 9.2.0

And I am using expo go to test it.

If anyone can help me please help.

Answer 1

because day value callback onDayPress of Calendar return is a object, you need parse it to string to show in screen. You can console.log(day) in file Detail.js to check pass params