javascript - FlatList not scrolling - Stack Overflow

admin管理员组

文章数量:1133954

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.

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.

• javascript
• css
• reactjs
• react-native

Share Improve this question Follow asked Feb 7, 2018 at 23:10 matthiasgoossensmatthiasgoossens 63311 gold badge55 silver badges1111 bronze badges 2

• have you tried rendering a simple <View> with some text from your data list to see if your <CardItem> component is causing some issues? – Anthony Commented Feb 7, 2018 at 23:19
• side note: does the style prop on ActivityList do anything? – Ernest Okot Commented Apr 20, 2018 at 2:32

Add a comment  | 

24 Answers 24

Sorted by: Reset to default 112

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!

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

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>

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

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 .

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

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.

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.

pls use wrepper ScrollView

<ScrollView style={{ flex: 1 }}>
 <FlatList/>
</ScrollView

My flatlist was not scrolling too.

I then deleted with &height in contentContainerStyle and set flexGrow : 1.

And now it's OK.

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.

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

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>

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.

Add the following columnWrapperStyle:

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

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

My problem was the import:

import { FlatList } from 'react-native-gesture-handler'

instead of:

import { FlatList } from 'react-native' 

I could not figure it out for 2 days :-) Everything worked except scrolling.

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

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

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.

What worked for me was making sure the direct parent component had a width and a height. Even having the parent most component with flex: 1 still worked for me. For example:

<View style={{flex: 1}}>
   <View style={{width: '100%', height: '40%',}}> // key line here
      <Flatlist 
         data={data}
         renderItem={renderItems}
         keyExtractor={(item) => item.id}
         horizontal={false}
         scrollEnabled={true}
         contentContainerStyle={{}}
         style={{
            width: '100%', // this line so the list can't be dragged around
            backgroundColor: 'white',
         }}
      />
   </View>
</View>

I solved mine by importing flatlist from react-native-gesture-handler. Check out the github gist below

There is no need to wrap the FlatList component with a View. Just update your props with the following contentContainerStyle.

本文标签： javascriptFlatList not scrollingStack Overflow