I am relatively new to React Native and I understand that my issue could be a minimal one. I am following along a React Native app building with Mosh Hamedani, and I have reached a point where his code works with him and doesn't seem to do so with me, instead, it's throwing the
Render Error
undefined is not an object (evaluating 'listing.image')
I have read through a good number of questions that are similar and have been solved, but I still can't figure out my situation. I include the components that are believed to be producing this error below:
import React from "react";
import { Image, StyleSheet, View } from "react-native";
import colors from "../config/colors";
import ListItem from "../components/lists/ListItem";
import Text from "../components/Text";
function ListingDetailsScreen({ route }) {
const listing = route.params;
return (
<View>
<Image source={listing.image} style={styles.image} /> //I don't get what's wrong here.
<View style={styles.detailsContainer}>
<Text style={styles.title}>{listing.title}</Text>
<Text style={styles.price}>ZAR {listing.price}</Text>
<View style={styles.sellerContainer}>
<ListItem
image={require("../assets/products-images/chair.jpg")}
title="Firm Name"
subTitle="5 Listings"
/>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
detailsContainer: {
padding: 20,
},
image: {
width: "100%",
height: 300,
},
price: {
color: colors.secondary,
fontWeight: "bold",
fontSize: 20,
marginVertical: 10,
},
sellerContainer: {
marginVertical: 40,
},
title: {
fontSize: 24,
fontWeight: "500",
},
});
export default ListingDetailsScreen;
The component consuming ListingDetails is shown below:
import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import { TransitionPresets } from "@react-navigation/stack";
import ListingDetailsScreen from "../screens/ListingDetailsScreen";
import ListingsScreen from "../screens/ListingsScreen";
const Stack = createStackNavigator();
const FeedNavigator = () => (
<Stack.Navigator
initialRouteName="ListingDetails"
screenOptions={() => ({
gestureEnabled: true,
headerShown: false,
...TransitionPresets.ModalPresentationIOS,
})}
>
<Stack.Screen name="Listings" component={ListingsScreen} />
<Stack.Screen name="ListingDetails" component={ListingDetailsScreen} />
</Stack.Navigator>
);
export default FeedNavigator;
The object listing is not yet loaded at the time of the return. Try a useEffect() hook and a useState() hook and query in the return area whether the object is already loaded.
Example:
import React, { useEffect, useState } from "react"; // new imports
import { Image, StyleSheet, View } from "react-native";
import colors from "../config/colors";
import ListItem from "../components/lists/ListItem";
import Text from "../components/Text";
function ListingDetailsScreen({ route }) {
const [listing, setListing] = useState(); // declare the var with useState
useEffect(() => { // useEffect
setListing(route.params);
}, [route]);
return (
{listing ? ( // conditional operator
<View>
<Image source={listing.image} style={styles.image} /> //I don't get what's wrong here.
<View style={styles.detailsContainer}>
<Text style={styles.title}>{listing.title}</Text>
<Text style={styles.price}>ZAR {listing.price}</Text>
<View style={styles.sellerContainer}>
<ListItem
image={require("../assets/products-images/chair.jpg")}
title="Firm Name"
subTitle="5 Listings"
/>
</View>
</View>
</View>
) : (
null // maybe you can add an spinner or div here to indicate data is loading
)}
);
}For more information please visit:
useState() -> https://reactjs.org/docs/hooks-state.html
useEffect() -> https://reactjs.org/docs/hooks-effect.html
Conditional Rendering -> https://reactjs.org/docs/conditional-rendering.html#inline-if-else-with-conditional-operator
I have figured out the answer to this issue, and it lies in FeedNavigator component. I had set initialRouteName="ListingDetails" which was preventing the default routing.
import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import { TransitionPresets } from "@react-navigation/stack";
import ListingDetailsScreen from "../screens/ListingDetailsScreen";
import ListingsScreen from "../screens/ListingsScreen";
const Stack = createStackNavigator();
const FeedNavigator = () => (
<Stack.Navigator
// initialRouteName="ListingDetails" /* Removed this line and everything worked as expected */
screenOptions={() => ({
gestureEnabled: true,
headerShown: false,
...TransitionPresets.ModalPresentationIOS,
})}
>
<Stack.Screen name="Listings" component={ListingsScreen} />
<Stack.Screen name="ListingDetails" component={ListingDetailsScreen} />
</Stack.Navigator>
);
export default FeedNavigator;