javascript - React Native FlatList refreshing not working - Stack Overflow

admin管理员组

文章数量:1287973

i got an problem with the refreshing on pull function. The FlatList renders fine, but pull to refresh is not working. This is my current sourcecode:

return (
   <View style={GlobalStyles.flex1}>
       <FlatList
           showsVerticalScrollIndicator={false}
           refreshControl={
               <RefreshControl
                   refreshing={isRefreshing}
                   onRefresh={() => {
                       console.log("onRefresh loadVocable");
                       loadVocables();
                   }}
               />
           }
           data={vocables}
           keyExtractor={vocable => vocable.id}
           onEndReached={() => {
               if (!isRefreshing && !endReached) {
                   loadVocables();
               }
           }}
           renderItem={vocable => (
               <TouchableOpacity
                   onPress={() => {
                       props.navigation.navigate({ routeName: "editVocable", params: { vocable: vocable.item } });
                   }}
                   onLongPress={() => {
                       handleLongPress(vocable.item.id);
                   }}>
                   <Card style={styles.cardStyle}>
                       <View style={styles.part1}>
                           <Text style={styles.vocableText}>{vocable.item.wordENG}</Text>
                           <Text style={styles.vocableText}>{vocable.item.wordDE}</Text>
                       </View>
                       <View style={styles.part2}>
                           <Ionicons name={vocable.item.known ? "md-checkmark-circle" : "md-close-circle"} size={23} color={vocable.item.known ? Colors.success : Colors.danger} />
                       </View>
                   </Card>
               </TouchableOpacity>
           )}
       />
   </View>
);

In the official docs is an example that says contentContainerStyle needs to be flex: 1 to know the height, that makes sence to me, so when i set contentContainerStyle with flex 1, refresh on pull works fine, but then i can't scroll anymore in the Flatlist and everthing get very tight, so the style also change then. Does anyone know why this happen?

The first picture is with "contentContainerStyle={{flex: 1}}" and the last one is without contentContainerStyle.

i got an problem with the refreshing on pull function. The FlatList renders fine, but pull to refresh is not working. This is my current sourcecode:

return (
   <View style={GlobalStyles.flex1}>
       <FlatList
           showsVerticalScrollIndicator={false}
           refreshControl={
               <RefreshControl
                   refreshing={isRefreshing}
                   onRefresh={() => {
                       console.log("onRefresh loadVocable");
                       loadVocables();
                   }}
               />
           }
           data={vocables}
           keyExtractor={vocable => vocable.id}
           onEndReached={() => {
               if (!isRefreshing && !endReached) {
                   loadVocables();
               }
           }}
           renderItem={vocable => (
               <TouchableOpacity
                   onPress={() => {
                       props.navigation.navigate({ routeName: "editVocable", params: { vocable: vocable.item } });
                   }}
                   onLongPress={() => {
                       handleLongPress(vocable.item.id);
                   }}>
                   <Card style={styles.cardStyle}>
                       <View style={styles.part1}>
                           <Text style={styles.vocableText}>{vocable.item.wordENG}</Text>
                           <Text style={styles.vocableText}>{vocable.item.wordDE}</Text>
                       </View>
                       <View style={styles.part2}>
                           <Ionicons name={vocable.item.known ? "md-checkmark-circle" : "md-close-circle"} size={23} color={vocable.item.known ? Colors.success : Colors.danger} />
                       </View>
                   </Card>
               </TouchableOpacity>
           )}
       />
   </View>
);

In the official docs is an example that says contentContainerStyle needs to be flex: 1 to know the height, that makes sence to me, so when i set contentContainerStyle with flex 1, refresh on pull works fine, but then i can't scroll anymore in the Flatlist and everthing get very tight, so the style also change then. Does anyone know why this happen?

The first picture is with "contentContainerStyle={{flex: 1}}" and the last one is without contentContainerStyle.

• javascript
• reactjs
• react-native
• refresh
• flatlist

Share Improve this question Follow asked Jun 20, 2021 at 14:46 DreamGamerDreamGamer 1,59722 gold badges1010 silver badges1313 bronze badges 7

• Try using flexgrow instead of flex – The1993 Commented Jun 21, 2021 at 6:32
• @The1993 flexGrow doesn't worked for me, it ends up with the same as picture 2, so everything looks normal, but refresh on pull doesn't work. – DreamGamer Commented Jun 21, 2021 at 19:59
• @The1993 I have an update, flexgrow is working, but only when i create a new project. I tried everything but no solution is working, how can i check if my project is broken and what can i do then? – DreamGamer Commented Jun 22, 2021 at 21:02
• Honestly, it's very hard to tell what went wrong on your current project. Maybe check for typos or pare both project files and see the diff. – The1993 Commented Jun 23, 2021 at 3:56
• 1 @The1993 omg i go crying, i found the error and it was so simple, how dump am i :D Thanks for the tip to pare both projects, i did it there and found the dumpest error i ever made. The import was wrong, I imported Flatlist from react-native-gesture-handler and not from react-native. For this little thing i lot 5 days of working :D – DreamGamer Commented Jun 28, 2021 at 19:00

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 13

The answer was so easy, I pared a new project (there worked my code) to the one where the problem was and after 5 days I found the little error:

My import was wrong! I imported FlatList like this:

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

But it needs to get imported from React-Native so like this:

import { FlatList } from "react-native";

Thanks to @The1993, without the hint to pare the projects, maybe I would stuck forever on this error :D In the future I will pare working files to find any error!

contentContainerStyle is used to style inner content e.g items alignments, padding, etc

style is used to align its height and relations

You can replace style={{flex: 1}} instead of contentContainerStyle or wrap the parent element with flex: 1

本文标签： javascriptReact Native FlatList refreshing not workingStack Overflow