Skip to content

Commit

Permalink
reason-react-native: example for AppState docs (facebook#589)
Browse files Browse the repository at this point in the history
* Docs for Appstate

I lost whatever pull request that was so I have recreated here in response to issue facebook#564

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

Co-Authored-By: Max Thirouin <[email protected]>
  • Loading branch information
idkjs and MoOx committed Aug 28, 2019
1 parent 4049d95 commit c0b8777
Showing 1 changed file with 43 additions and 0 deletions.
43 changes: 43 additions & 0 deletions reason-react-native/src/apis/AppState.md
Original file line number Diff line number Diff line change
Expand Up @@ -48,3 +48,46 @@ external removeEventListener:
"";
```

# Example

The example below illustrates rendering to the ui based on the value returned from the `AppState` API.

```reason
[@react.component]
let make = () => {
let (appState, setAppState) = React.useState(_ => AppState.currentState);
let handleAppStateChange = nextAppState => {
switch (appState, nextAppState) {
| (_, state) when state === AppState.background =>
Js.log("App has come to the background!")
| (_, state) when state === AppState.active =>
Js.log("App has come to the foreground!")
| _ => ()
};
setAppState(_ => nextAppState);
};
React.useEffect(() => {
AppState.addEventListener(
`change(state => handleAppStateChange(state)),
)
Some(
() =>
AppState.removeEventListener(
`change(state => handleAppStateChange(state)),
),
);
});
let renderAppState =
switch (appState) {
| appState when appState === AppState.active => "active"
| appState when appState === AppState.background => "background"
| appState when appState === AppState.inactive => "inactive"
| _ => "unknown"
};
<Text> {"Current state is: " ++ renderAppState |> React.string} </Text>;
};
```

0 comments on commit c0b8777

Please sign in to comment.