How to change height of 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.

score 74 · Answer 1 · edited Jan 10 '20 at 08:16

74

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

edited Jan 10 '20 at 08:16

Ramesh R

6,273
2
21
31

answered Nov 28 '17 at 13:36

ppianist

1,659
2
10
25

5

It do not allows to scroll – nawaab saab Sep 17 '19 at 05:58

score 37 · Accepted Answer · answered Sep 20 '19 at 14:17

37

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

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

answered Sep 20 '19 at 14:17

Mr.Jerry.

441
4
6

3

this is a better solution than boxing the whole flatlist with a view component. – Haitao Feb 26 '20 at 23:27

score 2 · Answer 3 · answered Jun 13 '19 at 09:02

2

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

answered Jun 13 '19 at 09:02

Viktor Hardubej

319
5
14

score 1 · Answer 4 · answered Nov 30 '20 at 09:53

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>
        )}
      />

score 0 · Answer 5 · answered Mar 30 '20 at 14:12

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>

score 0 · Answer 6 · answered Jun 03 '20 at 19:16

<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,
    }
})

score 0 · Answer 7 · answered May 07 '21 at 05:29

0

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
    }}
    />

answered May 07 '21 at 05:29

Muhammad Numan

12,108
1
25
50

score -1 · Answer 8 · edited Apr 05 '21 at 17:18

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'
    }
});

Adding an explanation to your answer would make it much more useful to others. — David Buck, Apr 05 '21 at 17:19

How to change height of in react native?

8 Answers8