How to change height of <FlatList/> in react native? - react-native

Question

I want to change width and height of <FlatList />.
I set the height style to the current <FlatList /> but it never worked.
I can change the height of <FlatList /> in no way.
This is my render() function and styles.
render() {
const listData = [];
listData.push({ key: 0 });
listData.push({ key: 1 });
listData.push({ key: 2 });
listData.push({ key: 3 });
listData.push({ key: 4 });
return (
<View style={styles.container}>
<FlatList
data={listData}
renderItem={({item}) => {
return (
<View
style={{
width: 30, height: 30, borderRadius: 15, backgroundColor: 'green'
}}
/>
)
}}
horizontal
style={styles.flatList}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white'
},
flatList: {
height: 50,
backgroundColor: 'red'
}
});
And this is result of this code.
I found the answers for several hours but nothing helped me.
I am not sure why height style is not working.
Any help is appreciated.

Answer 1

adding flexGrow: 0 to the flatList style worked for me, so it will be:
flatList: {
height: 50,
backgroundColor: 'red',
flexGrow: 0
}

Answer 2

Set the height of <View/> and place <FlatList/> inside that <View/>

Answer 3

Add flexGrow: 0. Don't mention height, the design might break when it comes to responsive
Example :
<FlatList
style={{
flexGrow: 0,
}}
data={data}
renderItem={({item}) => (
<View>
<Text>{item.text}</Text>
</View>
)}
/>

Answer 4

FlatList has prop contentContainerStyle. You can use it to style wrapper around FlatList. FlatList inherit this prop from ScrollView read hear

Answer 5

you can add flexGrow: 0 to the flatList style worked for me, so it will be:
<FlatList
{...{otherProps}}
style={{
height: 50,
backgroundColor: 'red',
flexGrow: 0
}}
/>

Answer 6

give width then height working according to data
<View style={{maxHeight:"50%",width:"60%"}}>
<FlatList
data={this.props.data}
renderItem={({ item }) => <Text>{item.name}</Text>}
keyExtractor={(item, index) => index}
/>
</View>

Answer 7

<View style={styles.flatList}>
<FlatList
keyExtractor = { this.keyExtractor }
data = { this.getPOs() }
ListEmptyComponent = { this.renderEmpty }
ItemSeparatorComponent = { Separator }
renderItem = { this.renderItem }
/>
</View>
for me works add flex: 1 to the view
const styles = StyleSheet.create({
flatList: {
flex: 1,
}
})

Answer 8

render() {
const listData = [];
listData.push({ key: 0 });
listData.push({ key: 1 });
listData.push({ key: 2 });
listData.push({ key: 3 });
listData.push({ key: 4 });
return (
<View style={styles.container}>
<FlatList
data={listData}
renderItem={({item}) => {
return (
<View
style={{
width: 30, height: 30, borderRadius: 15, backgroundColor: 'green'
}}
/>
)
}}
horizontal
style={styles.flatList}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
height:100
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white'
},
flatList: {
backgroundColor: 'red'
}
});