0
189
Viewsreact native items not align vertically center
I am trying to center the items of flatlist using alignItems but none of justifyContent, alignItems is working on this
<View style={styles.citiesContainer}>
<FlatList
data={cities}
renderItem={renderItem}
keyExtractor={item => item}
horizontal={true}
/>
</View>
// styling part
const styles = StyleSheet.create({
citiesContainer: {
height: 110,
justifyContent: 'center',
alignItems: 'center',
width: '100%',
backgroundColor: 'red'
}
}Check those black circles in the red box in the image, I want to vertically center those circles (items)
·
Juan Pablo Isaza
2 answers
Answer question0
try https://reactnative.dev/docs/flatlist#columnwrapperstyle
<FlatList
columnWrapperStyle={styles.citiesContainer}}
data={cities}
renderItem={renderItem}
keyExtractor={item => item}
horizontal={true}
/>
·
Juan Pablo Isaza
Report
0
change the flex direction will do, try flexDirection : 'row'
const styles = StyleSheet.create({
citiesContainer: {
height: 110,
justifyContent: 'center',
alignItems: 'center',
width: '100%',
flexDirection : 'row', //this right here!! :)
backgroundColor: 'red'
}
}
·
Juan Pablo Isaza
Report
Answer question