React native appstate using to check user online and offline

user_15435365 0
Viewed 1220

I am newbie to React Native, I am developing messaging app on react native. How can I implement functionality to change user online/offline status if the appState is Active/inActive and exactly in which page (at the root/index) or after login at HomePage, will it be global? used across all the pages in application?

Thanks in advance.

react-native
1 Answers

React Native itself offers AppState and you can easily check there in your App.js if the app is currently in the background or just active. If the app is active, then you can call your backend function to set the online state to true. Since you are doing this in your root file (App.js), the listener works across all files.

import React, { useRef, useState, useEffect } from "react";
import { AppState, StyleSheet, Text, View } from "react-native";

const AppStateExample = () => {
  const appState = useRef(AppState.currentState);
  const [appStateVisible, setAppStateVisible] = useState(appState.current);

  useEffect(() => {
    AppState.addEventListener("change", _handleAppStateChange);

    return () => {
      AppState.removeEventListener("change", _handleAppStateChange);
    };
  }, []);

  const _handleAppStateChange = (nextAppState) => {
    if (
      appState.current.match(/inactive|background/) &&
      nextAppState === "active"
    ) {
      // TODO SET USERS ONLINE STATUS TO TRUE
    } else {
     // TODO SET USERS ONLINE STATUS TO FALSE
    }

    appState.current = nextAppState;
    setAppStateVisible(appState.current);
    console.log("AppState", appState.current);
  };

  return (
    <View style={styles.container}>
      <Text>Current state is: {appStateVisible}</Text>
    </View>
  );
};
user_31601350
Related