problems passing props to components - react-native

Question

I'm struggling to pass props down into some components. I have an array of data that I'm using but cant access the props to be able to use the data.
I can seem to access the props in a components folder but for some reason I cant access the props from within the same folder.
Any ideas would be very much appreciated. Thanks in advance guys.
const homeOptions = [
{
name: "Create A Beast Workout",
body: "Quick Start Workout",
image: require("../assets/images/ChickSquat.jpg"),
id: "1",
},
{
name: "Beast Workout Diary",
body: "Create and manage your workout shedule",
image: require("../assets/images/DoubleBis.jpg"),
id: "2",
},
{
name: "Pre-Made Workouts",
body: "Use one of our pre-made workouts",
image: require("../assets/images/ChickA.jpg"),
id: "3",
},
{
name: "Statistics",
body: "Analyse your personal statistics",
image: require("../assets/images/WorkoutInProgress.jpg"),
id: "4",
},
{
name: "History",
body: "Keep track of your workout history",
image: require("../assets/images/ChickH.jpg"),
id: "5",
},
];
const HomeScreen = (props) => {
console.log(props);
return (
<View style={Styles.containerTop}>
<View>
<HomeScreenImage style={Styles.top} />
<View style={Styles.top}>
<BigButton title="Beast" />
</View>
</View>
<SafeAreaView style={Styles.flatListContainer}>
<FlatList
data={homeOptions}
renderItem={({ item }) => (
<TouchableOpacity
style={Styles.container}
onPress={() =>
props.navigation.navigate({
routeName: "StackNavigator",
params: {
cardId: props.info.id,
cardImage: props.info.image,
cardName: props.info.name,
cardBody: props.info.body,
},
})
}
>
//////below is where im having the problem accessing props /////////////////
<View style={Styles.cardContainer}>
<Image style={Styles.imageStyle} source={props.info.image} />
<View style={Styles.infoStyle}>
<Text style={Styles.titleStyle}>{props.info.name}</Text>
<Text style={Styles.bodyTextStyle}>{props.info.body}</Text>
</View>
</View>
</TouchableOpacity>
/>
</SafeAreaView>
</View>
);
};