Skip to content

Commit c0b8777

Browse files
idkjsMoOx
andcommitted
reason-react-native: example for AppState docs (#589)
* Docs for Appstate I lost whatever pull request that was so I have recreated here in response to issue #564 * Update reason-react-native/src/apis/AppState.md Co-Authored-By: Max Thirouin <git@moox.io>
1 parent 4049d95 commit c0b8777

File tree

1 file changed

+43
-0
lines changed

1 file changed

+43
-0
lines changed

reason-react-native/src/apis/AppState.md

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,3 +48,46 @@ external removeEventListener:
4848
"";
4949
5050
```
51+
52+
# Example
53+
54+
The example below illustrates rendering to the ui based on the value returned from the `AppState` API.
55+
56+
```reason
57+
[@react.component]
58+
let make = () => {
59+
let (appState, setAppState) = React.useState(_ => AppState.currentState);
60+
61+
let handleAppStateChange = nextAppState => {
62+
switch (appState, nextAppState) {
63+
| (_, state) when state === AppState.background =>
64+
Js.log("App has come to the background!")
65+
| (_, state) when state === AppState.active =>
66+
Js.log("App has come to the foreground!")
67+
| _ => ()
68+
};
69+
setAppState(_ => nextAppState);
70+
};
71+
72+
React.useEffect(() => {
73+
AppState.addEventListener(
74+
`change(state => handleAppStateChange(state)),
75+
)
76+
Some(
77+
() =>
78+
AppState.removeEventListener(
79+
`change(state => handleAppStateChange(state)),
80+
),
81+
);
82+
});
83+
84+
let renderAppState =
85+
switch (appState) {
86+
| appState when appState === AppState.active => "active"
87+
| appState when appState === AppState.background => "background"
88+
| appState when appState === AppState.inactive => "inactive"
89+
| _ => "unknown"
90+
};
91+
<Text> {"Current state is: " ++ renderAppState |> React.string} </Text>;
92+
};
93+
```

0 commit comments

Comments
 (0)