FlatList Dynamic Height Sizing

Question

I have an AutoComplete Box which gives me a list of autocomplete items. I display the items in FlatList, I also have a border around the FlatList. My code is given below: -

render(){
return (
  <View>
    <TextInput
       clearButtonMode="while-editing"
       onChangeText={this.onChangeText}
       value={this.state.searchText}
       onSubmitEditing={this.onTextSubmitted}
       placeholder="Find..." />
       {this.state.data.length > 0 &&
        <FlatList
           style={styles.list}
           keyboardShouldPersistTaps="handled"
           data={this.state.data}
           ItemSeparatorComponent={this.renderSeparator}
           keyExtractor={item => item.properties.id}
           renderItem={this.renderItem} />});
}

const styles = StyleSheet.create({
list: {
    borderWidth: 16,
    borderColor: colors.searchBorder,
  },
});

How can I increase/decrease the size of the FlatList with the number of list items, (I think the border is the reason behind this error).

Suckling

How is it displaying the list currently and how do you want it? If you can show a screenshot – Criseldacrisey

Have you fixed this. I am also having the same issue – Push

Did you find a solution this problem? Please share – Zionism

Answer 1

Add flexGrow: 0 to your list style.

Salade

This makes my list not display any data at all, I really need this behaviour (resizing the list depending on size content) though! – Pericarp

@Pericarp Do the children have absolute positioning? You might try setting the heights of the rows, or even use getItemLayout (not 100% sure it will work with flex: 0, but worth a try) reactnative.dev/docs/flatlist#getitemlayout – Salade

Answer 2

add flexGrow: 0, and minHeight as per your requirement

 container: {
        flex: 1,
        flexGrow: 0,
        minHeight: 70,
        flexDirection: 'row',
        alignItems: 'center',          
    },

Navicert

Answer 3

EDIT: This solution above is deprecated with newer version of react-native

---

I had the same problem and the solutions above not work in my case.

The solution, for me, was to wrap the FlatList into a ScrollView like this :

<ScrollView>
  <FlatList
      data={this.state.listItem}
      renderItem={this.renderItem}
  />
</ScrollView>

The dynamic height will be managed by the ScollView parent.

See the documentation here.

Coop

This should not be the right answer as per 2020. You will get an warning: "VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead. " – Marketing

Answer 4

The border is just an indicator of boundaries of your current FlatList component. If you want the list to grow and shrink try adding flex: 1 to your list style property.

const styles = StyleSheet.create({
  list: {
    borderWidth: 16,
    borderColor: colors.searchBorder,
    flex: 1
  },
})

Dona

using the flex shorthand doesn't work, you have to manually specify the flexGrow attribute (i.e. flexGrow: 0) – Salade