How do I wrap content vertically in a Horizontal FlatList?

user_274312 0
Viewed 978

Using React Native and Expo: I have a horizontal FlatList that has a number of simple Text items within it. Beneath the list is a view that I want to fill the remaining space. However, the list expands vertically instead of shrinking to wrap the content. How do I get it to vertically shrink to fit the content?

Demonstrated in this snack: https://snack.expo.io/@wex/horizontal-flatlist-shrink-height

flexbox expo react-native
1 Answers

you should not use {flex : 1}. set {flexGrow : 0} in FlatList style

<View style={{flex:1}}>
        <FlatList
          data={[{ key: 1345654323 }, { key: 2324565422 }, { key: 334837548 }, { key: 34432 }, { key: 3000223 }, { key: 3333 }]}
          renderItem={this._renderItem}
          horizontal={true}
          style={{backgroundColor:'orange',flexGrow:0}}
        />
        <View style={{backgroundColor:'blue',flexGrow:1}}></View>
      </View>
user_113804420
Related