0
356
ViewsHow to make a horizontal FlatList with React Native?
I am trying to align those white circles row-wise and I have written the same thing in the code but these circles are getting aligned column-wise, someone can help please.
My Item component :
const Item = ({ item }) => (
<View style={styles.citiesContainer}>
<View>
<Text style={styles.cities}>{item}</Text></View>
</View>
);
const styles = StyleSheet.create({
citiesContainer: {
display: 'flex',
flexDirection: 'row',
flexWrap: 'nowrap',
overflow: 'hidden',
height: 120,
width: '100%',
justifyContent: 'space-evenly',
alignContent: 'center',
backgroundColor: 'red'
},
cities: {
fontSize: 10,
flex: 1,
color: 'black',
width: 100,
height: 100,
borderRadius: 50,
backgroundColor: '#f0f0f0'
}
});
Where I am rendering it :
const renderItem = ({ item }) => ( <Item title={item} /> );
<FlatList
data={cities}
renderItem={renderItem}
keyExtractor={item => item}
/>
Check the image below to see what I am explaining :
·
Juan Pablo Isaza
1 answers
Answer question0
I see in the comments that you are using a FlatList, so in order to have items on a row, you should use the horizontal={true} on the FlatList.
<FlatList
data={cities}
renderItem={renderItem}
keyExtractor={item => item}
horizontal={true}
/>
I also see in the comments that renderItem is like so :
const renderItem = ({ item }) => ( <Item title={item} /> );
So in Item component you should be getting title as part of props. And finally there are some corrections to make in the style part, like so :
const Item = ({ title }) => (
<View style={styles.city}>
<Text >{title}</Text>
</View>
);
const styles = StyleSheet.create({
city: {
fontSize: 10,
color: 'black',
width: 100,
height: 100,
borderRadius: 50,
backgroundColor: '#f0f0f0'
}
});
·
Juan Pablo Isaza
Report
Answer question