React navigation: navigate from screen to another screen showing previous data - react-native

Question

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.
Search Screen Code
<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>

Answer 1

you can use navigation.push('screanName') instead of navigation.navigate('screenName')