We Keep Coding

display image and text from array on react native

I'm new on react native. I want to display images and text from array.
When I'm trying to extract image from my app, It doesn't work, the images are not displayed.
const DATA = [
{
title: "Animaux",
data: ["Poissons","Crevettes","Escargots"],
image: [require('../assets/icon_aquarium_style.png'),require('../assets/icon_aquarium_style.png'),require('../assets/icon_aquarium_style.png')]
}
];
const Item = ({ title }) => (
<View style={styles.item}>
<Text style={styles.title}>{title}</Text>
</View>
);
const ImageType = ({ image }) => (
<View style={styles.image}>
<Image source={image}/>
</View>
);
export default class InventaireScreen extends React.Component {
render() {
return (
<SafeAreaView style={styles.container}>
<SectionList
sections={DATA}
keyExtractor={(item, index) => item + index}
renderItem={({ item, image }) =>
<View >
<ImageType source={image}/>
<Item title={item} />
</View>
}
renderSectionHeader={({ section: { title } }) => (
<View>
<Text>{title}</Text>
</View>
)}
/>
</SafeAreaView>
);
}
}
the images are not displaying.
Could you please tell me where I'm wrong ?
Thanks.
EDIT :
I modified my array like that :
const DATA = [
{
title: "Poissons",
image: require('../assets/icon_aquarium_style.png')
},
{
title: "Crevettes",
image: require('../assets/icon_aquarium_style.png')
},
{
title: "Escargots",
image: require('../assets/icon_aquarium_style.png')
},
];
I try to extract data using render:
export default class InventaireScreen extends React.Component {
render() {
return (
<SafeAreaView style={styles.container}>
<SectionList
sections={DATA}
keyExtractor={(item, index) => item + index}
renderItem={({ item }) =>
<View style={{flexDirection: 'row', textAlign: 'left', fontSize: 15, backgroundColor:'white'}}>
<ImageType image={item.image}/>
<Item title={item.data} />
</View>
}
renderSectionHeader={({ section: { title } }) => (
<View>
<Text style={styles.header}>{title}</Text>
</View>
)}
/>
</SafeAreaView>
);
}
}
I want to display section title using title parameter, an image using image source, and a text using data parameter of my array.
I have this error
ERROR TypeError: undefined is not an object (evaluating 'items.length')
``

In Your Statement
renderItem={({ item, image }) =>
the second argument should be index,
Instead of 'image' it should be 'index'
renderItem={({ item, index }) =>
In order to fetch parameter 'image' from your array you will need to change your code like below :
<View >
<ImageType image={item.image}/>
<Item title={item.title} />
</View>

you data object should be an array of objects to map through it, like
var Data = [{title:"Poissons",image:require('../assets/icon_aquarium_style.png')},{title:"Crevettes",image:require('../assets/icon_aquarium_style.png')},{...},{...}]
and then in render item
{({ item }) =>
<View >
<ImageType image={item.image}/>
<Item title={item.title} />
</View>
}

Try correcting renderItem.
renderItem={({ item }) =>
<View >
<ImageType image={item.image}/>
<Item title={item.title} />
</View>
}
and keyExtractor.
keyExtractor={(item, index) => item.title + index}
this keyExtractor will only take the title and index instead of the full object.
and data format.
const DATA = [
{
title: "Poissons",
image: require('../assets/icon_aquarium_style.png')
},
{
title: "Crevettes",
image: require('../assets/icon_aquarium_style.png')
},
{
title: "Escargots",
image: require('../assets/icon_aquarium_style.png')
},
];

Flatlist navigation to another screen

So, i've one Flatlist that renders a list of movies, and I'm trying to when I click on it, moves me to a detail page, but it's not working.
Literally, nothing happens and doesn't get any errors on console
My FlatList:
<FlatList
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
horizontal
data={movies}
onPress={() => navigation.navigate('Details')}
renderItem={renderItem}
keyExtractor={(item) => item.id.toString()}
/>
My "renderitem" from flatlist:
const renderItem = ({ item }) => (
<RenderList url={item.poster_path} title={item.original_title} />
);
and that is the RenderList component who fits into the const "renderItem":
<View style={styles.view}>
<Image
style={{ width: 150, height: 220 }}
source={{ uri: 'https://image.tmdb.org/t/p/w500/' + props.url }}
/>
</View>

You should call onPress from a TouchableOpacity that loops for each item.
<FlatList
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
horizontal
data={movies}
onPress={() => navigation.navigate('Details')}
keyExtractor={(item) => item.id.toString()}
renderItem={({ item }) => {
return (
<TouchableOpacity onPress={() => navigation.navigate('Details')}>
<RenderList url={item.poster_path} title={item.original_title} />
</TouchableOpacity>
);
}}
/>

You should have the onPress on each of the list item, not on the Flatlist
<FlatList
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
horizontal
data={movies}
renderItem={renderItem}
keyExtractor={(item) => item.id.toString()}
/>
const renderItem = ({ item }) => {
return (
<TouchableOpacity onPress={() => navigation.navigate('Details')}>
<RenderList url={item.poster_path} title={item.original_title} />
</TouchableOpacity>
);
}

TypeError: undefined is not a object (evaluating 'item.id')

here I create the data that I called "places" that part is ok, but remember that is not my main page from the app, its a function{navigation}
export default function Search({ navigation }) {
const [state, setState] = useState({
places: [
{
id: 1,
title: 'Clinica da pele',
description: 'Dermatologista',
latitude:-2.42206406,
longitude:-54.71947789,
},
{
id: 2 ,
title:'Unimed',
description:'Hospital',
latitude:-2.42501721,
longitude:-54.71146077,
},
{
id: 3,
title: 'Dra. Josimar',
description:'Dermatologista',
latitude: -2.4288346,
longitude:-54.7290553,
}
]
})
here I tried to reder but dor some reason it didn't work, the error is in item.id but I dont know how to solve
return(
<SafeAreaView>
<FlatList
styles = {styles.PlaceContainer}
showsVerticalScrollIndicator
data={state.places.map}
keyExtractor={item => item.id}
renderItem={({ item }) => {
return(
<View key={item.id} style={styles.place} >
<Text>{item.title}</Text>
<Text>{item.description}</Text>
</View>
)
}
}
/>
</SafeAreaView>

You are binding FlatList to state.places.map, instead it should be state.places:
<SafeAreaView>
<FlatList
styles = {styles.PlaceContainer}
showsVerticalScrollIndicator
data={state.places}
keyExtractor={item => item.id}
renderItem={({ item }) => {
return(
<View key={item.id} style={styles.place} >
<Text>{item.title}</Text>
<Text>{item.description}</Text>
</View>
)
}} />
</SafeAreaView>

How to animate a single item from Flatlist

I have a array of data which I render in flatlist in React-Native. On pressing one of the items I want it to fade away, but instead all items on the flatlist get animated and not just the one that I pressed on.
constructor(props){
super(props);
this.state = { fadeAnim: new Animated.Value(1) }
onPressButtonnotdelivered(item) {
//Alert.alert(item.name)
const animations = [
Animated.timing(this.state.fadeAnim, {
toValue: 0,
duration: 500
}),
];
Animated.sequence(animations).start()
}
render() {
return (
<View>
<FlatList
data={this.state.data}
extraData={this.state}
keyExtractor={item => item.id}
renderItem={({ item, index }) => {
return (
<Animated.View key={index} style={[styles.animatedview, {opacity: this.state.fadeAnim}]}>
<View>
<View style={[styles.button, {backgroundColor: '#E94F64'}]}>
<TouchableOpacity style={styles.buttonview}
onPress={() => {this.onPressButtonnotdelivered(item)}}>
<View style={styles.btnIcon}>
<Icon name="block" size={30} />
<Text>Not delivered</Text>
</View>
</TouchableOpacity>
</View>
</View>
</Animated.View>
);
}}
/>
</View>
);
}

You need to add one more state to your component say indexToAnimate and set it to null.
Then put one condition in style of <Animated.View>
<Animated.View
key={index}
style={[
styles.animatedview,
{
opacity:
index == this.state.indexToAnimate
? this.state.fadeAnim
: "whatever your static value is..(in integer)"
}
]}
/>
and set indexToAnimate state on onPress method of <TouchableOpacity>
<TouchableOpacity
style={styles.buttonview}
onPress={() => {
this.setState({ indexToAnimate: index }, () => this.onPressButtonnotdelivered(item));
}}
>
<View style={styles.btnIcon}>
<Icon name="block" size={30} />
<Text>Not delivered</Text>
</View>
</TouchableOpacity>

What if you add a conditional render to the renderItem like:
renderItem={({ item, index }) => {
if (index === 'id')
return(<Animated.View> ... </Animated.View>);
else
return(<View> ... </View>);
}

Correct way to iterate this data and render section headers and items?

my JSON response looks like this
I would like to render the name i.e. pasta/pizza as header(which can be collapsed or opened) and the items i.e. types of pizza/pasta inside the respective category.
I am using react native, I tried using map and ListView
return (this.props.item.items.map((res) => {
console.log(res);
return (
<View>
<View style={CardContainer}>
<Text>{res.title}</Text>
<Image
source={{ uri: res.photo }}
style={imageStyle}
/>
</View>
</View>
);
})
);
but they return single objects so when I associate a onPress event over the category i.e. pasta it is registered twice which is undesirable as a click would mean expanding that category i.e. pasta.
Please let me know If i should change the JSON structure to make it efficient, this is a JSON response for menu card
EDIT: I tried the following but cannot get it to display result
renderItem() {
return (
<View>
{
this.props.menu.map(({ name, items }) => {
<View>
<Text>{name}</Text>
</View>
items.map((resp) => {
<View>
<Text>{resp.title}</Text>
</View>
});
})
}
</View>
);
}

<View>
{this.props.item.items.map((res) => (
<View>
<Header>
{ res.name }
</Header>
{ res.items.map(item => (
<View style={CardContainer}>
<Text>{item.title}</Text>
<Image
source={{ uri: item.photo }}
style={imageStyle}
/>
</View>
)}
</View>
)))}
</View>
IMO, a little more readable
render() {
const { item: { items: allItems } } = this.props;
return (
<View>
{ allItems.map(({ name, items }) => (
<Header>{ name }</Header>
{ items.map(({ title, photo }) => (
<View style={CardContainer}>
<Text>{title}</Text>
<Image
source={{ uri: photo }}
style={imageStyle}
/>
</View>
)}
)}
</View>
)
}