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

user_8571771 0
Viewed 46627

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.

Current result

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.

react-native-flatlist react-native
8 Answers

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

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

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

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

user_88520280

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

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>
user_114256150 
<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,
    }
})
user_42037300 
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'
  }
});
user_109285930
Related