i have a problem with passing params to a route in react native navigation. `route.params` is undefined sorry am abit new to react native - react-native

Question

Here is my homepage. and i was to navigate to the bookings page while passing a uuid as a param to the bookings page.
import React from "react";
import {
Text,
View,
StatusBar,
ActivityIndicator,
StyleSheet,
SafeAreaView,
TextInput,
TouchableOpacity,
} from "react-native";
import { useFocusEffect } from "#react-navigation/native";
import APIKit from "../config/api/APIKit";
import Icon from "react-native-vector-icons/Feather";
import Card from "../components/Card";
import { ScrollView } from "react-native-gesture-handler";
function HomeScreen({ navigation }) {
const [loading, setLoading] = React.useState(true);
const [items, setItems] = React.useState([]);
const [limit, setLimit] = React.useState(7);
const image = require("../assets/pic1.jpg");
useFocusEffect(
React.useCallback(() => {
getData();
return () => {
setItems([]);
setLimit(9);
};
}, [])
);
const getData = () => {
setLoading(true);
APIKit.get(`items/?limit=${limit}&offset=1`)
.then((res) => {
console.log(res.data);
setLimit(limit + 6);
setItems([items, ...res.data.results]);
setLoading(false);
})
.catch((e) => console.log(e.request.response));
};
return (
<SafeAreaView
style={{ alignItems: "flex-start", justifyContent: "center" }}
>
<StatusBar style="auto" />
<View style={{ padding: 8 }}>
<View
style={{
flexDirection: "row",
alignItems: "center",
width: "100%",
marginTop: 5,
}}
>
<TextInput
placeholder={"Enter Item Name"}
style={{
flex: 1,
backgroundColor: "white",
height: 40,
borderColor: "black",
borderWidth: 1,
borderRadius: 5,
margin: 2,
paddingLeft: 8,
}}
/>
<TouchableOpacity
style={{
alignItems: "center",
alignSelf: "center",
borderWidth: 1,
width: 50,
borderRadius: 500,
}}
>
<Icon name="search" size={25} />
</TouchableOpacity>
</View>
<View style={{ flex: 1, marginTop: 20 }}>
<ScrollView>
<View
style={{
flex: 1,
flexDirection: "row",
flexWrap: "wrap",
justifyContent: "flex-start",
}}
>
{items !== []
? items.map((item, key) => {
return (
<Card
key={key}
name={item.item_name}
description={item.description}
onHandlePress={() =>
navigation.navigate("payment-options", {
uuid: item.uuid,
price: item.cost,
})
}
image={image}
/>
);
})
: null}
</View>
<TouchableOpacity
activeOpacity={0.9}
onPress={getData}
//On Click of button load more data
style={styles.loadMoreBtn}
>
<Text style={styles.btnText}>Load More</Text>
{loading ? (
<ActivityIndicator color="white" style={{ marginLeft: 8 }} />
) : null}
</TouchableOpacity>
</ScrollView>
</View>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
footer: {
padding: 10,
justifyContent: "center",
alignItems: "center",
flexDirection: "row",
},
loadMoreBtn: {
padding: 10,
width: 350,
marginHorizontal: 20,
alignSelf: "center",
backgroundColor: "#01ab9d",
borderRadius: 4,
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
},
btnText: {
color: "white",
fontSize: 15,
textAlign: "center",
},
});
export default HomeScreen;
and the booking page looks like this
import { Text, View, StatusBar, SafeAreaView, StyleSheet } from "react-native";
import { Button } from "react-native-elements";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
function PaymentOptionScreen(props) {
return (
<SafeAreaView
style={{ flex: 1, alignItems: "center", justifyContent: "center" }}
>
<StatusBar style="auto" />
<View style={{ flex: 1, justifyContent: "flex-start", margin: 20 }}>
<Button
title="Pay Now"
onPress={() =>
console.log(props.route.params)
}
containerStyle={styles.ButtonContainer}
buttonStyle={{ height: 60, justifyContent: "flex-start" }}
icon={<Icon name="cash" size={40} color="white" />}
/>
<Button
title="Pay on delivery"
containerStyle={styles.ButtonContainer}
buttonStyle={{ height: 60, justifyContent: "flex-start" }}
icon={<Icon name="cash" size={40} color="white" />}
/>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
ButtonContainer: {
width: 380,
},
});
export default PaymentOptionScreen;
here is a snippet of the of the app.js it may help
<AuthContext.Provider value={authContext}>
<NavigationContainer>
<Drawer.Navigator
initialRouteName="Home"
drawerContent={(props) => <DrawerContent {...props} />}
>
<Drawer.Screen name="Home" component={HomeStackScreen}/>
<Drawer.Screen name="Profile" component={ProfileStackScreen}/>
<Drawer.Screen name="Bookings" component={BookingsStackScreen}/>
<Drawer.Screen name="payment-options" component={PaymentOptionsScreenStack}/>
<Drawer.Screen name="Add Item" component={AddItemStackScreen}/>
<Drawer.Screen name="Settings" component={SettingsStackScreen}/>
<Drawer.Screen name="Messages" component={MessagesStackScreen}/>
</Drawer.Navigator>
</NavigationContainer>
</AuthContext.Provider>

Answer 1

Can you print the props? I think you have to pass it as object {props}
If you are using navigation 5.0 . Try this
const App=({navigation, route })=>{
const uuid = route.param;
return (
<View</View>
);
}