CODEWITHSUNDEEP
react-nativereact-native-listviewreact-native-flatlist
aprofromindia
aprofromindia

Reputation: 1129

FlatList Dynamic Height Sizing

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).

Sample Image

Upvotes: 22

Views: 32784

Answers (4)

UnableHead
UnableHead

Reputation: 98

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.

Upvotes: 1

Keshav Gera
Keshav Gera

Reputation: 11244

add flexGrow: 0, and minHeight as per your requirement 

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

Upvotes: 3

C.Kelly
C.Kelly

Reputation: 265

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

Upvotes: -1

Julian K
Julian K

Reputation: 2001

Add flexGrow: 0 to your list style.

Upvotes: 92

Related Questions