diff --git a/docs/next/appstate.html b/docs/next/appstate.html
index a72b0fc949f..541fd70d274 100644
--- a/docs/next/appstate.html
+++ b/docs/next/appstate.html
@@ -95,11 +95,12 @@
-import React, { useEffect, useRef } from "react" ;
+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(() =>"change" , _handleAppStateChange);
@@ -107,18 +108,24 @@
return () =>"change" , _handleAppStateChange);
};
- }, [_handleAppStateChange]);
+ }, []);
const _handleAppStateChange = (nextAppState ) => {
- if (appState.current.match(/inactive|background/ ) && nextAppState === "active" ) {
+ if (
+ appState.current.match(/inactive|background/ ) &&
+ nextAppState === "active"
+ ) {
console .log("App has come to the foreground!" );
}
+
appState.current = nextAppState;
+ setAppStateVisible(appState.current);
+ console .log("AppState" , appState.current);
};
return (
<View style ={styles.container} >
- <Text > Current state is: {appState.current}</Text >
+ <Text > Current state is: {appStateVisible}</Text >
</View > container : {
flex : 1 ,
justifyContent : "center" ,
- alignItems : "center"
- }
+ alignItems : "center" ,
+ },
});
export default AppStateExample;
+ >If you don't want to see the AppState update from active to inactive on iOS you can remove the state variable and use the appState.current value.
+
import React, { Component } from "react" ;
import { AppState, StyleSheet, Text, View } from "react-native" ;
@@ -208,7 +216,7 @@
width: 100%;
"
>
-This example will only ever appear to say "Current state is: active" because the app is only visible to the user when in the active state, and the null state will happen only momentarily.
+This example will only ever appear to say "Current state is: active" because the app is only visible to the user when in the active state, and the null state will happen only momentarily. If you want to experiment with the code we recommend to use your own device instead of embedded preview.
-import React, { useEffect, useRef } from "react" ;
+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(() =>"change" , _handleAppStateChange);
@@ -107,18 +108,24 @@
return () =>"change" , _handleAppStateChange);
};
- }, [_handleAppStateChange]);
+ }, []);
const _handleAppStateChange = (nextAppState ) => {
- if (appState.current.match(/inactive|background/ ) && nextAppState === "active" ) {
+ if (
+ appState.current.match(/inactive|background/ ) &&
+ nextAppState === "active"
+ ) {
console .log("App has come to the foreground!" );
}
+
appState.current = nextAppState;
+ setAppStateVisible(appState.current);
+ console .log("AppState" , appState.current);
};
return (
<View style ={styles.container} >
- <Text > Current state is: {appState.current}</Text >
+ <Text > Current state is: {appStateVisible}</Text >
</View > container : {
flex : 1 ,
justifyContent : "center" ,
- alignItems : "center"
- }
+ alignItems : "center" ,
+ },
});
export default AppStateExample;
+ >If you don't want to see the AppState update from active to inactive on iOS you can remove the state variable and use the appState.current value.
+
import React, { Component } from "react" ;
import { AppState, StyleSheet, Text, View } from "react-native" ;
@@ -208,7 +216,7 @@
width: 100%;
"
>
-This example will only ever appear to say "Current state is: active" because the app is only visible to the user when in the active state, and the null state will happen only momentarily.
+This example will only ever appear to say "Current state is: active" because the app is only visible to the user when in the active state, and the null state will happen only momentarily. If you want to experiment with the code we recommend to use your own device instead of embedded preview.