react-native#AppState JavaScript Examples

Router = () => {
  const {authData, loading, signIn, signOut} = useContext(AuthContext);

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

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

  const _handleAppStateChange = (nextAppState) => {
    if (nextAppState !== "active") {
      signOut();
    }
  };

  if (loading) {
    return ( <Loading /> );
  }
  return (
    <NavigationContainer>
      {authData ? <AppStack /> : <AuthStack />}
    </NavigationContainer>
  );
}

function useForegroundSync(sync) {
  let appState = useRef(null);

  useEffect(() => {
    let onChange = nextAppState => {
      let state = appState.current;

      // Detect when the app is coming into the foreground
      if (state && state === 'background' && nextAppState === 'active') {
        sync();
      }

      appState.current = nextAppState;
    };

    AppState.addEventListener('change', onChange);

    return () => {
      AppState.removeEventListener('change', onChange);
    };
  }, [sync]);
}

async componentDidMount() {
    // this.checkBluetoothState();
    registerBluetoothStateListener(this.setStatusBluetooth);

    AppState.addEventListener('change', this.handleAppStateChange);

    // TODO both DeviceEventEmitter and NativeAppEventEmitter are deprecated, you should use NativeEventEmitter instead.
    DeviceEventEmitter.addListener(
      RNSettings.GPS_PROVIDER_EVENT,
      this.handleGPSProviderEvent,
    );

    this.timer = setTimeout(this.requestPermissionLocation, 500);
  }

constructor(props) {
    super(props);

    this.state = {
      messageList: [],
      pushEnabled: PushEnabled,
      index: 0,
    };

    this.props.navigator.addOnNavigatorEvent(this.onNavigatorEvent.bind(this));
    AppState.addEventListener("change", nextAppState => {
      if (nextAppState == "active") {
        this.getNotoficationPermission();
      }
    });
    this.getNotoficationPermission();
  }

constructor() {
    AppState.addEventListener("change", nextAppState => {
      if (nextAppState == "active") {
        this.showUnlockIfNeed();
      } else {
        this.leaveTimestamp = new Date().getTime();
      }
    });
    DeviceEventEmitter.addListener(NOTIFICATION_AUTH_FINISH, () => {
      this.isUnlocking = false;
    });
  }

/**
 * Complete the background syncing and pull down a few vars
 */
function finishBackgroundSync() {
    AppState.removeEventListener('change', onStateChange);

    State.unsubscribe();

    BackgroundFetch.finish(BackgroundFetch.FETCH_RESULT_NEW_DATA);

    State.running = false;

    Globals.logger.addLogMessage('[Background Sync] Background sync complete.');
}

componentDidMount() {
        this.unsubscribe = NetInfo.addEventListener(this.handleNetInfoChange);
        AppState.addEventListener('change', this.handleAppStateChange);
        Linking.addEventListener('url', this.handleURI);
        initBackgroundSync();
        let flipFlop = false;

        let keepAnimating = () => {

          Animated.timing(this.animatedValue, {
            toValue: flipFlop ? 0 : 224,
            duration: 30000
          }).start(() => {
            flipFlop = flipFlop ? false : true;
            keepAnimating();
          });

        }

          Animated.timing(this.animatedValue, {
            toValue: 224,
            duration: 30000
          }).start(() => {
            keepAnimating();

      });
    }

componentDidMount() {
    Keyboard.addListener("keyboardDidHide", this._handleKeyboardDidHide);
    AppState.addEventListener("change", this._handleAppStateChange);
    setTimeout(() => {
      this.textinput && this.textinput.focus();
    }, 600);
    autorun(() => {
      if (this.inputCode.length == 6) {
        console.log("completion", this.inputCode);
        if (this.props.onCompletion && this.completionCode != this.inputCode) {
          this.completionCode = this.inputCode;
          this.props.onCompletion(this.inputCode);
        }
      }
    });
  }

componentDidMount() {
      AppState.addEventListener('change', this._handleAppStateChange);

      if (this.state.mode === PIN_SCREEN_MODE.LOGIN_PIN && !this.isPinFallback) {
          SecurityServices.authenticateOnStartup().then(() => this.allowLogin = true).catch(() => {
              this.allowLogin = true;
          });
      }
  }

componentDidMount() {
      this.focusListener = this.props.navigation.addListener('focus', () => {
          this.setState({isFocused:true});
      });
      this.props.updateZkSyncTokens();
      if(this.props.route.params.accountDetails)
          this.props.setAccountDetails(this.props.route.params.accountDetails);
      AppState.addEventListener('change', this._handleAppStateChange);
  }

constructor(props) {
      super(props);
      if (this.props.route && this.props.route.params) {
          if (this.props.route.params.accountDetails)
              this.accountDetails = this.props.route.params.accountDetails;
      }
      this.state = {
          appState: AppState.currentState,
          index: 0,
          refreshing:false,
          isFocused:false,
      };
  }

HomeScreen = ({children, style, navigation, ...rest}) => {
  useEffect(() => {
    registerStateChangeListener();
    sendPageLoadStatus()

    return () => {
      // Clean up the subscription
      unRgisterStateChangeListener()
    };
  }, []);

  function registerStateChangeListener() {
    AppState.addEventListener('change', handleAppStateChange);
  }

  function unRgisterStateChangeListener() {
    AppState.removeEventListener('change', handleAppStateChange);
  } 

  return (
    <SafeAreaView style={DEFAULT_STYLES.container}>
      <View style={DEFAULT_STYLES.container}>
        {/* <Header hasTabs style={styles.headerStyle}> */}
        <HomeHeader navigation={navigation} />
        {/* </Header> */}
        <TabView navigation={navigation} />
      </View>
    </SafeAreaView>
  );
}

componentDidMount() {
        this.updateDozeStatus();
        AppState.addEventListener('change', this.updateDozeStatus);
    }

async componentDidMount() {
    if (__DEV__) {
      this.reset();
    }
    this.NPSListener = AppState.addEventListener("change", this.handleAppStateChange);
    this.notificationsListener = Notifications.listen(this.handleNotification);
    this.checkNeedNPS();
  }

componentWillUnmount() {
        NetInfo.removeEventListener('connectionChange', this.handleNetInfoChange);
        AppState.removeEventListener('change', this.handleAppStateChange);
        Linking.removeEventListener('url', this.handleURI);
        this.unsubscribe();
    }

function* watchAppStateChange() {
  const channel = eventChannel((emitter) => {
    AppState.addEventListener('change', emitter);
    return () => AppState.removeEventListener('change', emitter);
  });

  try {
    let previousState = 'unknown';

    while (true) {
      const nextState = yield take(channel);
      const onboarding = yield select(isOnboarding);

      if (! onboarding && previousState !== nextState) {
        if (nextState === 'active') {
          const isProtectorOpen = yield select(isProtectorModalOpen);
          if (isProtectorOpen) {
            yield delay(200);
            yield put(modalsActions.closeProtectorModal());
            yield take(modalsTypes.PROTECTOR_MODAL_CLOSED);
          }

          try {
            if (! Configuration.UI) {
              yield call(TracingManager.sync);

              // Get status
              const status = yield call(TracingManager.getStatus);
              yield put(accountActions.updateStatus(status));
            }
          } catch (error) {
            // Sync error. Probably exposure check limit reached.
            console.log(error);
          }
        } else if (nextState === 'inactive') {
          const isProtectorOpen = yield select(isProtectorModalOpen);
          if (! isProtectorOpen) {
            yield put(modalsActions.openProtectorModal());
            yield take(modalsTypes.PROTECTOR_MODAL_OPEN);
          }
        }
      }

      previousState = nextState;
    }
  } finally {
    channel.close();
  }
}

componentWillUnmount() {
      AppState.removeEventListener('change', this._handleAppStateChange);
  }

componentWillUnmount() {
      this.focusListener();
      AppState.removeEventListener('change', this._handleAppStateChange);
  }

/**
 * Check background syncing is all good and setup a few vars
 */
async function setupBackgroundSync() {
    /* Probably shouldn't happen... but check we're not already running. */
    if (State.running) {
        Globals.logger.addLogMessage('[Background Sync] Background sync already running. Not starting.');
        return false;
    }

    /* Not in the background, don't sync */
    if (AppState.currentState !== 'background') {
        Globals.logger.addLogMessage('[Background Sync] Background sync launched while in foreground. Not starting.');
        return false;
    }

    /* Wallet not loaded yet. Probably launching from headlessJS */
    if (Globals.wallet === undefined) {
        const backgroundInitSuccess = await fromHeadlessJSInit();

        if (!backgroundInitSuccess) {
            return false;
        }
    }

    const netInfo = await NetInfo.fetch();

    if (Globals.preferences.limitData && netInfo.type === 'cellular') {
        Globals.logger.addLogMessage('[Background Sync] On mobile data. Not starting background sync.');
        return false;
    }

    State.unsubscribe = NetInfo.addEventListener(handleNetInfoChange);

    AppState.addEventListener('change', onStateChange);

    State.shouldStop = false;

    Globals.logger.addLogMessage('[Background Sync] Running background sync...');

    return true;
}

/**
 * @returns {*}
 * @constructor
 */
function Main() {
  const [{ session, theme, day }, dispatch] = useGlobals();
  const [isReady, setIsReady] = React.useState(false);
  const [appState, setAppState] = React.useState(AppState.currentState);
  const _theme = themes[theme];

  // Deal with background/active app
  React.useEffect(() => {
    // Handles screen focus and case when user reopens app one day later (Date has to be updated)
    const handleAppStateChange = (nextAppState) => {
      if (appState.match(/active/) && nextAppState === 'active') {
        const nDate = DateUtils.toAmerican(new Date());
        if (nDate !== day) {
          dispatch({
            type: 'setDay',
            day: nDate,
          });
        }
      }
      setAppState(nextAppState);
    };

    AppState.addEventListener('change', handleAppStateChange);
    return () => {
      AppState.removeEventListener('change', handleAppStateChange);
    };
  }, [appState, day, dispatch]);

  // Backbones
  React.useEffect(() => {
    (async () => {
      try {
        const session = await Storer.get(SESSION_KEY);
        if (session) {
          dispatch({
            type: 'setSession',
            fields: { ...session },
          });
        }
      } finally {
        setIsReady(true);
      }
    })();
  }, [dispatch]);

  if (!isReady) {
    return <AppLoading />;
  }

  return (
    <PaperProvider theme={_theme}>
      <NavigationContainer theme={_theme}>
        {session.basicsDone ? (
          <MainStackNavigation />
        ) : (
          <InitialStackNavigation />
        )}
      </NavigationContainer>
    </PaperProvider>
  );
}

async componentDidMount() {
    await logEvents.initMatomo();
    logEvents.logAppVisit();
    RNBootsplash.hide({ fade: true });
    this.appListener = AppState.addEventListener("change", this.onAppChange);
  }

notificationHandler = (notification, forceOpen = false) => {
  const state = AppState.currentState;

  console.log(state);
  if (!notification) {
    return;
  }

  const data = {};
  if (Platform.OS === "ios") {
    Object.assign(data, notification.getData() || {}, notification.getAlert() || {});
    data.content = data["body"];
    data.inApp = data["in-app"];
    data.bizType = data["biz-type"];
  } else if (Platform.OS === "android") {
    Object.assign(data, notification.extra);
    data.title = notification.title;
    data.content = notification.text;
    data.inApp = data["in-app"];
    data.bizType = data["biz-type"];
  }

  if (data.inApp) {
    data.inApp = parseInt(data.inApp);
  }

  if (data.bizType) {
    data.bizType = parseInt(data.bizType);
  }

  if (data.time) {
    data.time = parseInt(data.time);
  }

  let { url, title, content, time, bizType, inApp } = data;
  let clicked = false;
  if (!url) {
    url = DEEPLINK_LINK_BLANK;
  }

  if (Platform.OS === "ios") {
    if (state == "background") {
      inApp = false;
      clicked = true;
    }
  } else if (Platform.OS === "android") {
    clicked = notification.clicked;
  }

  if (forceOpen) {
    clicked = true;
  }

  deepLinkIfNeed(url, { title, content, time, bizType, inApp, clicked });
}

componentWillUnmount() {
    Keyboard.removeListener("keyboardDidHide", this._handleKeyboardDidHide);
    AppState.removeEventListener("change", this._handleAppStateChange);
  }

AppState.addEventListener('change',function(state) {
  if(state==="active") {
    refreshRequests(store);
    startLoop();
  } else {
    stopLoop();
  };
})

componentWillUnmount() {
    AppState.removeEventListener('change', this.handleAppStateChange);
    clearTimeout(this.timer);
  }

componentDidMount() {
    AppState.addEventListener('change', this.handleAppStateChange);
    this.timer = setTimeout(() => {
      this.setState({showModal: true});
    }, 1000);
  }

componentDidMount() {
    // BluetoothStatus
    registerBluetoothStateListener(this.setStatusBluetooth);

    AppState.addEventListener('change', this.handleAppStateChange);

    this.timer = setTimeout(this.checkRequestMultiple, 500);
  }

componentWillUnmount() {
    this.numberOfCheckLocationPermission = 0;
    AppState.removeEventListener('change', this.handleAppStateChange);
    clearTimeout(this.timer);
  }

function Locked({ navigation, route }) {
  const {authData, signIn} = useContext(AuthContext);

  const isFocused = useIsFocused();
  const {colors, isDark} = useTheme();

  const [isTryingToSignIn, setIsTryingToSignIn] = useState(false);

  const handleBiometricAuthFailure = async (error: string) => {
    switch (error) {
      case 'NOT_ENROLLED':
        Alert.alert(
          `Not Enrolled`,
          'This device does not have biometric login enabled.',
        );
        break;
      case 'NOT_PRESENT':
        Alert.alert('', 'This device does not have the required hardware.');
        return;
      case 'AUTHENTICATION_FAILED':
        Alert.alert('', 'Authentication failed too many times');
        break;
      case 'NOT_AVAILABLE':
        Alert.alert('', 'Authentication is not available.');
        break;
      default:
    }
  };

  const signInBiometricAuth = async () => {
    if (isTryingToSignIn) {
      await LocalAuthentication.cancelAuthenticate();
    }
    
    console.log("Logging in");
    setIsTryingToSignIn(true);
    const authenticateResult = await LocalAuthentication.authenticateAsync({
      promptMessage: 'Login with Biometrics', 
      cancelLabel: 'Cancel',
      disableDeviceFallback: true, 
      fallbackLabel: 'Use PIN'
    });

    console.log("Logged in", authenticateResult);

    if (authenticateResult.success) {
      signIn();
    } else {
      handleBiometricAuthFailure(authenticateResult);
    }
    setIsTryingToSignIn(false);
  }

  const unlock = async () => {
    if (isTryingToSignIn) return;

    if (!authData && !isTryingToSignIn && AppState.currentState === "active") {
      signInBiometricAuth();
    }
  }

  useEffect(() => {
    changeNavigationBarColor(colors.background, !isDark);
  }, [isFocused]);

  return (
    <View style={styles.container} backgroundColor={colors.background}>
        <StatusBar 
          backgroundColor={colors.background}
          barStyle={isDark ? "light-content" : "dark-content"}/>

        <Image
          style={styles.logo}
          color={colors.primary}
          source={{
            uri: 'data:image/png;base64,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',
          }}
        />

        <Text>App Locked</Text>

        <TouchableOpacity
            style={[styles.button, {backgroundColor: colors.primary}]}
            onPress={unlock}
            hitSlop={{top: 20, bottom: 20, left: 20, right: 20}}
            >
              <Text style={[styles.buttonText, { color: '#fff'}]}>Unlock</Text>
        </TouchableOpacity>
    </View>
  );
}