Simple React Native API Status Maintenance, Version and Update

Sometimes there are several features in our mobile application so that it can run smoothly, these features will be placed when the user logs into the application, an example of these features is

1. Maintenance feature to display server status information when maintenance is being carried out. This feature is useful if there are problems in our application, whether it’s from the server, database problems, and so on, so we can temporarily block the user
2. Version feature to check what version of the application the user is using with the version on our server (API), this version is useful for the third feature.
3. Update feature to force the user to update the application or not, sometimes when we update the application there are various changes so that the application runs properly, so the user must use the latest version, with this feature the user inevitably has to update the application.

We only use simple api using PHP, here is an example of source code:

App. js

import * as React from 'react';
import { Text, View, StyleSheet, Alert, Button, Linking } from 'react-native';
import Constants from 'expo-constants';

const localVersion = '1.0.0'; // can be retrieve from app.json or package.json

export default function App() {
  const handleLogin = async () => {
    let valueversion;

    // change with your app link
    const playstoreappURL =
      'https://play.google.com/store/apps/details?id=com.google.android.googlequicksearchbox';

    try {
      let response = await fetch('https://www.bagi2info.com/sample/login.php', {
        method: 'POST',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          email: 'test',
          password: 'test',
        }),
      });

      let json = await response.json();

      if (json.maintenance) {
        Alert.alert(
          'Info',
          'Server is currently down for emergency maintenance. Please try again after sometimes'
        );
        return true;
      }

      if (json.forceversion) {
        if (json.version != localVersion) {
          Alert.alert(
            'Info',
            "There is new version available on the app. It's recommended to use the newest version",
            [
              {
                text: 'YES',
                onPress: () => Linking.openURL(playstoreappURL),
              },
              {
                text: 'CANCEL',
                onPress: () => {
                  console.log('OK Pressed');
                  // stop the login process not allow if forceversion n different ver
                  return;
                },
              },
            ]
          );

          valueversion = json.forceversion;
        }
      } else {
        if (json.version != localVersion) {
          Alert.alert(
            'Info',
            "There is new version available on the app. It's recommended to use the newest version",
            [
              {
                text: 'YES, INSTALL',
                onPress: () => Linking.openURL(playstoreappURL),
              },

              {
                text: 'CANCEL',
                onPress: () => {
                  console.log('OK Pressed');
                },
              },
            ]
          );
        }
      }
      // stop the login process not allow if forceversion n different ver
      if (valueversion) {
        return false;
      }

      // if all checking pass
      // successfull login to dashboard
      // props.navigation.navigate('Home');
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>
        {`React Native Sample Code
         - Check Maintenance 
         - Version 
         - Update app `}
      </Text>
      <Button title="Login" onPress={handleLogin} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

Login. php

<?php

$maintenance = true;
$forceversion = true;
$version = '1.0.1';

$err = array(
     'errr' => true,
     'msg' => 'Incorrect username or password',
     'maintenance' => $maintenance,
     'forceversion' => $forceversion,
     'version' => $version,
);

if ($successlogin) {

     echo json_encode(array(
         'errr' => false,
         'msg' => 'Login success',
         'maintenance' => $maintenance,
         'forceversion' => $forceversion,
         'version' => $version,
     ));
} else {

     echo json_encode($err);
}

?>

Login.php JSON

{
   "errr": true,
   "msg": "Incorrect username or password",
   "maintenance": true,
   "forceversion": true,
   "version": "1.0.1"
}

Snack Links

https://snack. expo.dev/@rudiahmad/react-native—check-maintenance—version—force-update-api