Passing information from one screen to another (using function component) - react-native

Question

Passing information from one screen (CategoriesScreen) to another (MealDetailScreen). Both Screens are function component. The error occurs when the onDateChange function is executed. The props.navigation.navigate... line is the issue.
From:
import React from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';
import CalendarPicker from 'react-native-calendar-picker';
const CategoriesScreen = props => {
return (
<View style={styles.container}>
<CalendarPicker
onDateChange={onDateChange}
/>
</View>
);
};
const onDateChange = (onDateChange) => {
console.log(props);
props.navigation.navigate({
routeName: 'MealDetail',
params: { dateId: onDateChange }
});
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#FFFFFF',
marginTop: 10,
},
});
export default CategoriesScreen;
To:
import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import { MEALS } from '../data/dummy-data';
import HeaderButton from '../components/HeaderButton';
const MealDetailScreen = props => {
const date = props.navigation.getParam('dateId');
return (
<Text> {date} </Text>
);
};
const styles = StyleSheet.create({
screen: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
});
export default MealDetailScreen;
Navigator:
import { Platform } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import CategoriesScreen from '../screens/CategoriesScreen';
import CategoryMealsScreen from '../screens/CategoryMealsScreen';
import MealDetailScreen from '../screens/MealDetailScreen';
import Colors from '../constants/Colors';
const MealsNavigator = createStackNavigator(
{
Categories: {
screen: CategoriesScreen
},
CategoryMeals: {
screen: CategoryMealsScreen
},
MealDetail: MealDetailScreen
},
{
// initialRouteName: 'Categories',
defaultNavigationOptions: {
headerStyle: {
backgroundColor: Platform.OS === 'android' ? Colors.primaryColor : ''
},
headerTintColor:
Platform.OS === 'android' ? 'white' : Colors.primaryColor,
headerTitle: 'Quick Time'
}
}
);
export default createAppContainer(MealsNavigator);
When the onDateChange function gets executed, the following error appears:
Error Message

Answer 1

just do this put on onDateChange function inside scope of component
const CategoriesScreen = props => {
const onDateChange = (onDateChange) => {
console.log(props);
props.navigation.navigate({
routeName: 'MealDetail',
params: { dateId: onDateChange }
});
};
return (
<View style={styles.container}>
<CalendarPicker
onDateChange={onDateChange}
/>
</View>
);
};