React Native - FlatList not scrolling

user_13065931 0
Viewed 953

I am implementing FlatList's horizontal mode but it isn't responding. I have tried the following approaches which didn't work:

  • flex: 1 (everything disappeared)
  • flexGrow: 1
  • Wrap in View
  • adding margin/padding

Here is the code for the FlatList:

   return (
    <View >
    {
      this.state.dataSource.length < 1 ? (
        <Text>did not get person</Text>
      ) : (
      <View><FlatList
        showsHorizontalScrollIndicator={false}
        horizontal
        data={this.state.dataSource}
        renderItem={this.renderItem}
        keyExtractor={item => item.id}
      />
      </View>)

renderd item

(
  <View style={styles.container}>
    <TouchableWithoutFeedback >
      <ImageBackground source={{ uri: item.download_url }} style={styles.story}>
        <Image source={{ uri: `https://loremflickr.com/320/240/${randomItem}` }} style={{ width: 40, height: 40, borderRadius: 50 }}></Image>
        <Text style={{ color: '#fff' }}>{item.author}</Text>
      </ImageBackground>
    </TouchableWithoutFeedback>
  </View>
)

and my stylesheet

story: {
width: 130,
height: 200,
borderRadius: 10,
overflow: 'hidden',
margin: 3,
justifyContent: 'space-between',
padding: 3,

},
container: {
marginVertical: 20,
borderBottomWidth: 5,
borderTopWidth: 5,
borderTopColor: '#CACBD3',
borderBottomColor: '#CACBD3',
paddingVertical: 10

}

react-native-flatlist flexbox react-native reactjs css
3 Answers

if you give "flex:1" to your container view, it will be working as you want.

  <View style={styles.flex1} >
     <FlatList
      showsHorizontalScrollIndicator={false}
      horizontal
      data={this.state.dataSource}
      renderItem={this.renderItem}
      keyExtractor={item => item.id}
    />
   </View>

const styles = StyleSheet.create({  
    flex1: {  
        flex: 1,  
    },  
.... 
})
user_4565880

This might help

return (
  <View style={{ flex: 1 }}>
    {this.state.dataSource.length < 1 ? (
      <Text>did not get person</Text>
    ) : (
      <FlatList
        showsHorizontalScrollIndicator={false}
        horizontal
        data={this.state.dataSource}
        renderItem={this.renderItem}
        keyExtractor={(item, index) => index.toString()}
      />
    )}
  </View>
);
user_12833450

Providing flex:1 to flat list will make your screen blank. try to wrap flat list with <View style={{flex:1}}/> will do the job. The mentioned view will provide room for flat list to fit into the screen.

user_66809250
Related