React navigation: navigate from screen to another screen showing previous data

See more:

navigation

react-native

I'm developing a food ordering app using react native and ASP .NET MVC Entity Framework. I've Search screen with date(field) and vendor list(dropdown) and when I click on search button it will navigate to Orders Screen with date and vendor Id as parameters and with these 2 parameter I fetch data from API and show data with in Orders screen. But problem is first time it's showing correct list and 2nd time with different date and vendor id not updating list in Orders screen while API fetching correct data and showing previous data.:

What I have tried:

Search Screen Code

<pre><View style={[styles.container, { backgroundColor: colors.background }]}>
      <StatusBar style={theme.dark ? "light" : "dark"} />
      <CustomLoading isLoading={isLoading} />
      {/* Header */}
      <View style={styles.header}>
        <Animatable.View animation="bounceIn" duration={2000}>
          <Image style={styles.logo} source={images.FinalLogoOnLight} />
        </Animatable.View>
        <Animatable.Text
          animation="bounceInLeft"
          duration={2000}
          style={[styles.screenTitle, { color: colors.black }]}
        >
          Search/Filter Receipts
        </Animatable.Text>
      </View>

      {/* Form */}
      <View>
        {/* Date */}
        <TouchableOpacity
          style={[styles.datePickerWrapper, { backgroundColor: colors.white }]}
          onPress={showDatePicker}
        >
          <DateTimePickerModal
            isVisible={isDatePickerVisible}
            mode="date"
            value={model.date}
            onConfirm={handleConfirm}
            onCancel={hideDatePicker}
          />
          <Text style={{ color: colors.black, fontFamily: "PoppinsRegular" }}>
            {moment(model.date).format("YYYY-MM-DD")}
          </Text>
          <AntDesign name="calendar" color={colors.gray} size={sizes.h2} />
        </TouchableOpacity>

        {/* DropDown */}
        {/* <FormDropDown dropDownRef={dropDownRef} options={vendors} /> */}
        <View
          style={[
            styles.dropDownWrapper,
            {
              flexDirection: "row",
              marginTop: sizes.m10,
              justifyContent: "center",
              alignItems: "center",
              backgroundColor: colors.white,
              borderColor: colors.grayLight,
            },
          ]}
        >
          {model.vendors != null ? (
            <FormPicker
              placeholderText="Select Vendor"
              selectedValue={model.vendorUserId}
              onValueChange={(val) => setModel({ ...model, vendorUserId: val })}
              data={model.vendors}
            />
          ) : null}
        </View>

        {/* Search Button */}
        <FormButton
          mystyle={{ marginTop: sizes.m20 }}
          buttonTitle="Search"
          onPress={() => handleSubmit()}
        />
      </View>
const handleSubmit = async () => {
    try {
      if (model.vendorUserId == "" && model.date == "") {
        Toast.show("Date or Vendor filed not be empty.");
        return;
      }
      navigation.navigate("RootOrder", {
        screen: "SearchedOrders",
        params: { searchedOrders: model },
      });
    } catch (error) {
      console.log(error);
      setIsLoading(false);
    }
  };

Searched Order Screen:

const [isLoading, setIsLoading] = useState(true);
  const [start, setStart] = useState(0);
const [model, setModel] = useState({
    data: [],
    token: userState.token,
    date: searchedOrders.date,
    vendorUserId: searchedOrders.vendorUserId,
    recordTotal: null,
  });

  // Functions
  const fetchOrderHistoryByDate = async () => {
    try {
      setIsLoading(true);
      var res = await orderHistoryByDate(model);
      if (!res.Success) {
        console.log("Error: ", res.Data);
        setIsLoading(false);
        alert(res.Data);
        return;
      }
      var resModel = res.Data;
    //   console.log(resModel)
      setModel({ ...model, data: resModel });
      // console.log(resModel);
      setIsLoading(false);
    } catch (error) {
      console.log(error);
      setIsLoading(false);
    }
  };
  // Functions END
  const init = async () => {
    await fetchOrderHistoryByDate();
    setIsLoading(false);
  };

  useEffect(() => {
    const unsubscribe = navigation.addListener("focus", () => {
      setStart(Math.random() * 10000);
      init();
    });
    return unsubscribe;
  }, [start]);

function renderCardItems({ item, index }) {
    return (<View style={styles.OrderItemWrapper}>
      <LinearGradient
        style={[styles.OrderItemWrapperLinearGrad]}
        colors={[colors.white, colors.linearGray]}
      >
        <TouchableOpacity
          // style={[styles.OrderItemWrapper, { backgroundColor: colors.white }]}
          onPress={() =>
            navigation.navigate("OrderDetails", { itemOrderDetails: item })
          }
          // key={index}
        >
          <View style={styles.cartItemWrapper}>
            <View style={styles.cartItemDetails}>
              <Text style={[styles.cartItemText, { color: colors.primary }]}>
                {item.ShopName}
                {/* ({index}) */}
              </Text>
              {/* <Text style={{ color: "#000" }}>{item.InvoiceNo}</Text> */}
              <Text
                style={[styles.cartItemQuantityText, { color: colors.gray }]}
              >
                {item.Date}
              </Text>
              <View
                style={{
                  flexDirection: "row",
                  alignItems: "center",
                  justifyContent: "space-between",
                }}
              >
                <Text
                  style={[styles.cartItemPriceText, { color: colors.black }]}
                >
                  AED {item.Total}
                </Text>
                <View
                  style={[
                    styles.statusWrapper,
                    { backgroundColor: colors.primary },
                  ]}
                >
                  <Text style={[styles.statusText, { color: colors.white }]}>
                    {item.Status}
                  </Text>
                </View>
              </View>
            </View>
            <Image
              source={{
                uri: `${domain}${item.ShopPicture}`,
              }}
              style={styles.cardItemImage}
            />
          </View>
        </TouchableOpacity>
      </LinearGradient>
    </View>);
  }

  return (
    <View style={[styles.container, { backgroundColor: colors.background }]}>
      <StatusBar style={theme.dark ? "light" : "dark"} />

      <CustomLoading isLoading={isLoading} />
      <FlatList
        data={model.data}
        renderItem={renderCardItems}
        keyExtractor={(item, index) => item.InvoiceNo + "_" + index}
        showsHorizontalScrollIndicator={false}
        showsVerticalScrollIndicator={false}
        style={{ marginTop: sizes.m10 }}
        style={{
          paddingVertical: sizes.m10,
          backgroundColor: colors.background,
        }}
      />
    </View>