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

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.

adding flexGrow: 0 to the flatList style worked for me, so it will be:

flatList: {
  height: 50,
  backgroundColor: 'red',
  flexGrow: 0
}