How to set height or maxHeight to FlatList in React Native?

user_8573039 0
Viewed 332

How can I set a fixed height to my FlatList so that it will scroll but in place instead of keep going to the bottom. Currently, the fixed height is working but my FlatList wont scroll and I try to add showsVerticalScrollIndicator={true} yet there's no visible vertical scroll indicator.

My Flatlist is inside another FlatList, and please don't tell me to use ScrollView

flatlist react-native-flatlist react-native reactjs
1 Answers

You could solve it with styling a view, in which you put the Flatlist and styling the view with the attribute height. For example height: "85%".

<View style={styles.list}>
    <FlatList ... />
</View>

const styles = StyleSheet.create({
   list: {
      ...
      Height: "85%",
   },

If you want a bit more flexability, you can look at the following.

(I had two lists which should use the space equally, or if only one was shown, the complete space exclusive the headers)

For that I used minHeight and maxHeight. (One alone didn't want to work)

<View>
    <Header1 />
    <View style={ this.state.showValids && this.state.showInvalid ? styles.validViewHalved : styles.validView }>
        { this.state.showValid &&
            <View style={styles.list}>
                <FlatList ... />
            </View>
        }
    </View> 
</View> 
<View>
    <Header2 />
    <View style={ this.state.showValid && this.state.showInvalid ? styles.invalidViewHalved : styles.invalidView }>
        { !this.state.showInvalid &&
            <View style={styles.list}>
                <FlatList ... />
            </View>
        }
    </View> 
</View> 

const styles = StyleSheet.create({
  validView: {  
    ...
    minHeight: "0%",
    maxHeight: "93%",
  },
  invalidView: {    
    ...
    minHeight: "0%",
    maxHeight: "93%",
  },
  validViewHalved: {    
    ...
    minHeight: "0%",
    maxHeight: "50%",
  },
  invalidViewHalved: {    
    ...
    minHeight: "0%",
    maxHeight: "50%",
  },
  list: {    
    ...
    //height: "85%",
  },
user_106536030
Related