Pull refresh is not working

React Native
1

i don’t know hat atually caused this error i spend alot of time to solve this but i didn’t . in the below components please look all of them

ListingsScreen.js

import { View, Text, StyleSheet, StatusBar } from "react-native";
import React, { useState } from "react";
import CardComponent from "./CardComponent";
import { FlatList } from "react-native-gesture-handler";
import Screen from "./Screen";

export default function ListingsScreen() {
  let [listings, setListings] = useState([
    {
      id: 0,
      title: "Red jacket for sale",
      image: require("../assets/jacket.jpg"),
      price: "100",
    },
    {
      id: 1,
      title: "Red jacket for sale",
      image: require("../assets/jacket.jpg"),
      price: "200",
    },
  ]);
  const [isRefreshing, setRefreshing] = useState(false);
  return (
    <Screen style={styles.container}>
      <FlatList
        data={listings}
        keyExtractor={(listing) => listing.id.toString()}
        renderItem={({ item: listing }) => (
          <View style={styles.cardContainer}>
            <CardComponent
              image={listing.image}
              title={listing.title}
              subTitle={`$${listing.price}`}
              key={listing.id}
            />
          </View>
        )}
        refreshing={isRefreshing}
        onRefresh={() => {
          setListings({
            id: listings.length + 1,
            title: "Red jacket for sale",
            image: require("../assets/jacket.jpg"),
            price: "100",
          });
        }}
      />
    </Screen>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "whitesmoke",
  },
  cardContainer: {
    backgroundColor: "#fff",
    marginHorizontal: 30,
    marginVertical: 10,
    padding: 2,
    borderRadius: 30,
  },
});

App.js

import { GestureHandlerRootView } from "react-native-gesture-handler";
import { StyleSheet, Text } from "react-native";

import ListingsScreen from "./app/components/ListingsScreen";

export default function App() {
  return (
    <GestureHandlerRootView style={styles.container}>
      <ListingsScreen />
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

Card.js

import { View, Text, StyleSheet, Image } from "react-native";
import React from "react";

export default function CardComponent({ image, title, subTitle }) {
  return (
    <View style={styles.container}>
      <View style={styles.cardWrapper}>
        <Image source={image} style={styles.image} />
        <View style={styles.infoContainer}>
          <Text>{title}</Text>
          <Text style={styles.subTitle}>{subTitle}</Text>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    borderRadius: 30,
    overflow: "hidden", // This is the key fix!
    backgroundColor: "#fff",
  },


  image: {
    width: "100%",
    height: 230,
  },

  subTitle: {
    color: "dodgerblue",
  },

  infoContainer: {
    paddingLeft: 10,
    paddingVertical: 10,
  },
});
2

Is the pull to refresh not working or does it show an error?

Please share the details - error messages, logs and anything that point to the problem you’re facing.