FlatList 不滚动

Question

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.

Answer 1

Take out the flex: 1 in your styles.cardcontainer , that should let you scroll. The FlatList/ScrollView contentContainerStyle prop wraps all the child components—what's "inside" the FlatList if you will—and should never have a defined height or flex value. If you need to set a flex: 1 for the FlatList itself use style={{flex: 1}} instead. Cheers!

Answer 2

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

Answer 3

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>

Answer 4

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

Answer 5

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

Answer 6

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 .

Answer 7

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.

Answer 8

Add the following columnWrapperStyle :

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

Answer 9

As many of you, guys, I've also faced the issue with a FlatList not to be scrolling if it has some specific positioning applied to it ( position: 'absolute' or moving outside the bounds of it's parent View by setting negative margin values, etc.). As it often happens, neither one of proposed solutions did the trick for me, so I decided to investigate this case in a sandbox.

There is my test app:

import React, { useState } from "react";
import { View, Text, FlatList, TouchableOpacity } from "react-native";

const App = () => {
  const [toggle, setToggle] = useState(false);
  const [selection, setSelection] = useState("");

  const data = [];
  for (let i = 0; i < 10; i++) {
    data.push({ key: `${i}`, text: `Item ${i}` });
  }

  function renderList() {
    return (
      <View style={{ width: "100%", zIndex: 5 }}>
        <TouchableOpacity
          style={{ width: "100%", height: 40, backgroundColor: "#CCCCCC", padding: 10 }}
          onPress={() => setToggle(!toggle)}
        >
          <Text>{selection}</Text>
        </TouchableOpacity>
        {toggle && (
          <FlatList
            style={{
              width: "100%",
              height: 150,
              backgroundColor: "#FFFFFF",
              top: 40,
              position: "absolute",
              zIndex: 10,
            }}
            data={data}
            renderItem={({ item }) => (
              <TouchableOpacity
                style={{ width: "100%", padding: 5 }}
                onPress={() => {
                  setSelection(item.text);
                  setToggle(!toggle);
                }}
              >
                <Text>{item.text}</Text>
              </TouchableOpacity>
            )}
          />
        )}
      </View>
    );
  }

  return (
    <View style={{ flex: 1, backgroundColor: "#777777", padding: 10 }}>
      {renderList()}
      <View style={{ width: "100%", height: 40, backgroundColor: "#AAAAAA", marginTop: 10 }} />
    </View>
  );
};

export default App;

The idea is as simple as possible - 2 "controls" on the "screen", the topmost one represents a dropbox that has to cover the second "control" below with a dropdown list. Such layout will definitely need some manipulation with z-ordering as the topmost "control" initially has lower z-index than the second one, making the dropdown to appear under the second "control".
And my conclusion is the following: you should not change zIndex of a parent (or grandparent...) of your FlatList (see zIndex: 5 style in my code and try to remove it) if it doesn't fully enclose FlatList bounds . Instead you can do it for the Flatlist itself (as I did, and zIndex: 10 works fine).

NB : Another styling option that should block scrolling and appears to be completely inobvious is setting backgroundColor of a parent View. But you probably will not use it as it will also break effect of setting zIndex for the FlatList.

Answer 10

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.

Answer 11

In my case, I had a TouchableWithoutFeedback wrapper at the top, which was used to remove keyboard popup when clicking anywhere. This was causing the FlatList to not scroll. Once, removed the FlatList was behaving normally.

Answer 12

我有类似的问题，但它实际上是我使用两根手指滚动的方式，就像在 Mac 上正常滚动一样，而不是用手指双击，按住然后滚动

Answer 13

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>

Answer 14

in my case, it was the "position: 'absolute' on the flatlist styling that made it not scrolling

Answer 15

Could be where you import from, for me

import {ScrollView } from "react-native-gesture-handler";

won't scroll but

import {ScrollView} from "react-native";

will. I had a vscode extension auto add the import and it chose the gesture-handler for some reason

Answer 16

Got similar issue that FlatList does not scroll, none of the solutions mentioned above did not help. Even copy-pasting the code did not help. Fixed by trying the app on real device, instead of Android emulator and what a surprise - it works. On other emulators it also works, so issue can be emulator, not a code.

Answer 17

If all else failed like me, restart the debug session (eg react-native run-android)