I successfully managed to fetch data dynamically from a local JSON file created in RN. However, when I tried to add images for each profile to be displayed along with the dynamic profile info, the app encountered an error stating that "The component cannot contain children. If you want to render content on top of the image, consider using ".
I already have a background set for all profiles, so I am confused about this issue because the images in the JSON file are supposed to be profile pictures for each character. Am I following the correct format to display an image? Any guidance would be greatly appreciated.
This is how I structured my JSON File:
const characters = [
{ id: "1", name: "Homer Simpson", occupation: "Nuclear Safety Inspector",
url:
"https://assets.fxnetworks.com/cms/prod/shows/the-simpsons/photos/simpsons-sidebar/character-facts/Homer/swsb_character_fact_homer_288x763.png"
},
{ id: "2", name: "Marge Simpson", occupation: "Stay-at-home mom", url:
"https://assets.fxnetworks.com/cms/prod/shows/the-simpsons/photos/simpsons-sidebar/character-facts/Homer/swsb_character_fact_homer_288x763.png"},
{ id: "3", name: "Bart Simpson", occupation: "Student", url:
"https://assets.fxnetworks.com/cms/prod/shows/the-simpsons/photos/simpsons-sidebar/character-facts/Homer/swsb_character_fact_homer_288x763.png" },
{ id: "4", name: "Lisa Simpson", occupation: "Student", url:
"https://assets.fxnetworks.com/cms/prod/shows/the-simpsons/photos/simpsons-sidebar/character-facts/Homer/swsb_character_fact_homer_288x763.png" },
{ id: "5", name: "Maggie Simpson", occupation: "Baby", url:
"https://assets.fxnetworks.com/cms/prod/shows/the-simpsons/photos/simpsons-sidebar/character-facts/Homer/swsb_character_fact_homer_288x763.png" }
];
export default characters;
This is how I am implementing it:
import React from "react";
import {
View,
Text,
StyleSheet,
Image,
Button,
ImageBackground
} from "react-native";
class CharacterProfiles extends React.Component {
static navigationOptions = {
title: "The Simpsons",
headerStyle: {
backgroundColor: "#53b4e6"
},
headerTintColor: "#f6c945",
headerTitleStyle: {
fontWeight: "bold"
}
};
render() {
const { item } = this.props.navigation.state.params;
return (
<View>
<ImageBackground
source={{
uri:
"https://backgrounddownload.com/wp-content/uploads/2018/09/simpsons-clouds-background-5.jpg"
}}
style={{ width: "100%", height: "100%" }}
>
<Image>{item.url}</Image>
<Text>Name: {item.name}</Text>
<Text>Occupation: {item.occupation}</Text>
<Button
title="Character Directory"
onPress={() => this.props.navigation.navigate("CharacterDirectory")}
/>
<Button
title="Homepage"
onPress={() => this.props.navigation.navigate("Home")}
/>
</ImageBackground>
</View>
);
}
}
export default CharacterProfiles;