'FlatList not scrolling

i have created a screen where I display a component that contains a FlatList. For some reason I can't scroll through the list. Someone who can spot my mistake and point me in the right direction?

render-function and style from my screen file:

render() {
return (
  <View style={styles.container}>
    <SearchBar />
    <ActivityList style={styles.list} data={this.state.data} />
  </View>
);
}
}

const styles = StyleSheet.create({
 container: {
  flex: 1,
  overflow: 'hidden',
  backgroundColor: '#fff',
  alignItems: 'center',
  justifyContent: 'flex-start',
 },
 list: {
  flex: 1,
  overflow: 'hidden',
 },
});

render function and style from my listitem component:

export default class CardItem extends React.PureComponent {
render() {
return (
  <View style={styles.cardview}>
    <View style={styles.imagecontainer}>
      <Image
        resizeMode="cover"
        style={styles.cardimage}
        source={{
          uri: this.props.image,
        }}
      />
    </View>
    <View style={styles.cardinfo}>
      <Text style={styles.cardtitle}>{this.props.title}</Text>
      <View style={styles.cardtext}>
        <Text style={styles.textdate}>{this.props.date}</Text>
        <Text style={styles.texthour}>{this.props.hour}</Text>
      </View>
    </View>
  </View>
);
}
}

const styles = StyleSheet.create({
 cardview: {
  flex: 1,
  justifyContent: 'flex-start',
  backgroundColor: 'white',
  elevation: 3,
  maxHeight: 200,
  width: Dimensions.get('window').width - 20,
  margin: 1,
  marginTop: 10,
  borderRadius: 4,
},
imagecontainer: {
 flex: 7,
 height: 140,
 borderRadius: 4,
},
cardimage: {
 flex: 1,
 opacity: 0.8,
 height: 140,
 borderTopLeftRadius: 4,
 borderTopRightRadius: 4,
},
cardinfo: {
 flex: 2,
 flexDirection: 'row',
 justifyContent: 'space-between',
 alignItems: 'center',
 padding: 10,
},
cardtitle: {
 flex: 1,
 fontSize: 16,
 fontWeight: 'bold',
},
cardtext: {
 flex: 1,
 justifyContent: 'center',
 alignItems: 'flex-end',
},
textdate: {
 color: '#5e5e71',
},
texthour: {
 color: '#5e5e71',
},
});

render function and style from my list component:

export default class ActivityList extends React.Component {
_renderCardItem = ({ item }) => (
<CardItem
  image={item.image}
  title={item.title}
  date={item.date}
  hour={item.hour}
/>
);

_keyExtractor = item => item.id;

render() {
return (
  <FlatList
    data={this.props.data}
    renderItem={this._renderCardItem}
    contentContainerStyle={styles.cardcontainer}
    keyExtractor={this._keyExtractor}
  />
);
}
}

const styles = StyleSheet.create({
 cardcontainer: {
  flex: 1,
  overflow: 'hidden',
  backgroundColor: 'white',
  alignItems: 'center',
  width: Dimensions.get('window').width,
  borderWidth: 0,
 },
});

my data items have all a unique id, title, date, hour.

Read through all available guides and docs and found no solution.

javascriptcssreactjsreact-nativereact-native-android


Solution 1:[1]

I also meet this issue when I'm adding image tool in my chatting app, and found a trick solution.

By simply add TouchableWithoutFeedback to cover every element in flatlist. Strange but it works.

_renderCardItem = ({ item }) => (
<TouchableWithoutFeedback onPress={()=>{}}>
<CardItem
  image={item.image}
  title={item.title}
  date={item.date}
  hour={item.hour}
/>
</TouchableWithoutFeedback>
);

Solution 2:[2]

Simply do following steps to get FlatList scroll.

<View style={{flex:1}}>
  <FlatList
    data={this.state.data}
    renderItem={({item}) => this.renderData(item)}
    keyExtractor={item => item._id}
    contentContainerStyle={{
    flexGrow: 1,
    }}
  />
</View>

Solution 3:[3]

For others coming to this question: My FlatList was inside a TouchableWithoutFeedback. I changed that to a View and was able to scroll again.

Solution 4:[4]

for me the problem was the size of an image inside the flatlist item. I just set it's height by percentage which was a mistake.

here are some tips.

1: don't put a fixed height for FlatList contentContainer

2: childs inside Flatlist must not have a height of percentage eg: 50% otherwise it take the half of list and don't let other childs to render

3: if you want to have a fixed size FlatList put it's height inside style property not contentContainerStyle

Solution 5:[5]

I have faced the same problem for FlatList.

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

I used flex : 1, flexGrow :1 for list style . then it working for me .

Solution 6:[6]

For me, I had an absolutely positioned transparent view on top of my list!

For whatever reason, it only affected my android version.

I think the absolute position made it so the inspector didn't see it when I looked.

Solution 7:[7]

I had similar issue, but it's actually in the way I was scrolling using two fingers like normal scroll on Mac instead of double-click with a finger, hold and then scroll

Solution 8:[8]

for me, the solution was to wrap the whole FlatList with a View whose height set to 100%

const styles = StyleSheet.create({
  container: {
    padding: "8px",
    height: "100%"
  },
});

<View style={styles.container}>
  <FlatList
    { /* ... */ }
  />
</View>

Solution 9:[9]

In my case, I had a TouchableWithoutFeedback wrapper at the top level of my app which was used to remove the keyboard popup when clicking anywhere on the screen.
This was causing the FlatList to not behave properly on actual device (it worked fine on emulator). Once removed, the FlatList was behaving normally.

Solution 10:[10]

My FlatList was able to scroll although I had it inside a TouchableWithoutFeedback. My problem was I had an onPressIn event on my FlatList items which interfered with the scroll detection. It worked after I changed it to onPress.

Solution 11:[11]

Add the following columnWrapperStyle:

` <FlatList
    horizontal={false}
    data={products}
    columnWrapperStyle={{ flexWrap: 'wrap' }}
    numColumns={2}
    renderItem={renderItem}
    keyExtractor={(item, index) => index} />`

Related Questions