Question 33393 in React native Question posted in
The official React Native documentation can be found here.

react-native: how to check user have the latest version of application – React native

I’m working on the application and have API points return the latest version and whether this version is required.

in the application, I send get request to this API point to verify the response, and based on it I can display an alert to the user letting him know that an update is available, when the update is required the user can’t use the application until update it so when the user clicked on yes I take him to google play page to update it. the problem is the user can click on the return button on the device and get back to the application without updating it, and the alert doesn’t display again.

so how can I check if the user really updated the application or just get back to it?
record of this:
enter image description here

I call this function in useEffect in app.tsx:

const checkNewUpdate = async () => {
    checkForNewUpdate().then((res) => {
      console.log('your version response is:', res.data, 'and your native version is:', Application.nativeApplicationVersion);
      if (res.data.content.length != 0) {
        let version: AppVersionModel = res.data.content[0];
        if (Application.nativeApplicationVersion !== version.version) {
          if (version.isRequired) {
            Alert.alert("كاين تحديت جديد", "خاصك ولابدا تدير تحديت لتطبيق متجر أوال باش تستعمل المنصة", [
              {
                text: "لا",
                onPress: () => {
                  BackHandler.exitApp();
                  Updates.reloadAsync();
                },
                style: "cancel",
              },
              {
                text: "نعم", onPress: () => {
                  Linking.openURL("https://play.google.com/store/apps/details?id=com.beyondbelievers.awal");
                }
              },
            ])
          } else {
            Alert.alert("كاين تحديت جديد", "خاصك تدير تحديت لتطبيق متجر أوال باش تستعمل المنصة", [
              {
                text: "من بعد",
                onPress: () => setLastVersion(true),
                style: "cancel",
              },
              {
                text: "نعم", onPress: () => {
                  Linking.openURL("https://play.google.com/store/apps/details?id=com.beyondbelievers.awal");
                }
              },
            ])
          }
        } else {
          setLastVersion(true);
        }
      } else {
        setLastVersion(true);
      }
    }).catch((error) => {
      setLastVersion(true);
      console.log("error: ", error.response);
    })
  }Ï
Tags:

2

Answers


  1. 0

    Try using useFocusEffect from React Navigation, instead of useEffect, to call checkNewUpdate function

    useFocusEffect(
  useCallback(() => {
    ...
    checkNewUpdate()
    ...
  }, [])
)
    Login or Signup to reply.
  2. 0

    You can check that the app is in foreground with the AppState from React Native and then call your function.

    const appState = useRef(AppState.currentState);

useEffect(() => {
 const subscription = AppState.addEventListener("change", newAppState => { 
   if (appState.current.match(/inactive|background/) && newAppState === "active") {
         checkNewUpdate();
       }
   appState.current = newAppState;
 });

 return () => subscription.remove()
},[]);

    Have not tested but just a suggestion.

    Link to AppState from React native:
    https://reactnative.dev/docs/appstate#app-states

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search