CODEWITHSUNDEEP
javascriptreactjsreact-nativerefreshflatlist
DreamGamer
DreamGamer

Reputation: 1597

React Native FlatList refreshing not working

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.

with contentContainerStyle set to flex 1

without contentContainerStyle

Upvotes: 3

Views: 3093

Answers (2)

DreamGamer
DreamGamer

Reputation: 1597

The answer was so easy, I compared 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 compare the projects, maybe I would stuck forever on this error :D In the future I will compare working files to find any error!

Upvotes: 13

Rahman Haroon
Rahman Haroon

Reputation: 1145

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

Upvotes: 1

Related Questions