How to change height of <FlatList/> in 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

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