Flat list does not show in react native. I want to pass information to another component, I'm rendering using flatList, but nothing appears on the screen and I don't get the error ... is my other component that will receive the information
my flatList :
return (
<View style={styles.container}>
<FlatList
numColumns={2}
data={DATA}
renderItem={({item}) => {<Item {...item} />}}
keyExtractor={(item) => item.id}
ListHeaderComponent={<Cabecalho />}
/>
</View>
);
};
MY COMPONENT WHAT SHOULD YOU RENDER
export const Item = ({titulo}) => {
return (
<View>
<Text >{titulo}</Text>
</View>
);
}
DATA:
export const DATA = [
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
titulo: 'Abajur',
imagem: require('../assets/images/01-tablelamps.png'),
estudio: 'Jim&Jill Designs',
itemName: 'Wilson',
preco: 92.1,
itemDesc:
'Contrary to popular belief, Lorem Ipsum is not simply random text',
},
it's happened because renderItems doesn't return any component to fix this change
renderItem={({item}) => {<Item {...item} />}}
to
renderItem={({item}) => {return <Item {...item} />}}
or
renderItem={({item}) => <Item {...item} />}
Related
I want to show this data in FlatList but it shows only whitescreen:
const [datas,setDatas] = useState([
{
name:'dhinesh',
phone:'9888888888',
email:'asdasd#gmail.com',
salary:'50000',
position:'ww'
},
{
name:'ramesh',
phone:'93388888',
email:'jhjj#gmail.com',
salary:'90000',
position:'sw'
}
]);
This is the code i used :
<FlatList
data={datas}
keyExtractor={(item, index) => index.toString()}
renderItem={({item}) => {
<View>
<Text>{item.name}</Text>
<Text>{item.phone}</Text>
<Text>{item.email}</Text>
<Text>{item.salary}</Text>
<Text>{item.position}</Text>
</View>
}}
/>
Please give me a solution
Add return in your view
renderItem={({item}) => {
return (
<View>
<Text>{item.name}</Text>
<Text>{item.phone}</Text>
<Text>{item.email}</Text>
<Text>{item.salary}</Text>
<Text>{item.position}</Text>
</View>
)
}}
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')
},
];
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>
);
}
here is the app, I want to create diferent screens with diferent catergories in this case I have Dermatologista and Hospital, how can I select just one description
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,
}
]
});
return(
I just want to select the items with the description == dermatologista
how can I do this ?
<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>
)
}
You can use array.filter :
const filteredPlaces = state.places.filter( place => place.description === "Dermatologista" )
and pass filteredPlaces instead of the entire object to the child component.
Try this
<SafeAreaView>
<FlatList
styles = {styles.PlaceContainer}
showsVerticalScrollIndicator
data={state.places}
keyExtractor={item => item.id}
renderItem={({ item }) => {
item.description == "dermatologista" ? (
<View key={item.id} style={styles.place} >
<Text>{item.title}</Text>
<Text>{item.description}</Text>
</View>
):""
}
}
/>
</SafeAreaView>
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>