bluewallet/react-native-camera
bluewallet/react-native-camera
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(docs): update react-navigation doc (#2574)

Browse Source
This commit is contained in:
Theodore Sevvos 2019-11-11 16:28:41 +02:00 committed by Sibelius Seraphini
parent cc3016fe43
commit 81563d7a0b
1 changed files with 16 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
docs/react-navigation.md
View File

@ -4,29 +4,25 @@ title: React Navigation
sidebar_label: React Navigation
---
React-navigation does not unmount components when switching between tabs. So when you leave and return back to the screen with the camera component it will just be black view. So a good solution is to use `componentDidMount` and added two listeners `willFocus` and `willBlur` to help you mount and unmount the views.
React-navigation does not unmount components when switching between tabs. So when you leave and return back to the screen with the camera component it will just be black view. So a good solution is to use `withNavigationFocus`, which is a higher order component, and wrap it around your component. Then, you can have access to `isFocused` from `props`.
```jsx
componentDidMount() {
const { navigation } = this.props;
navigation.addListener('willFocus', () =>
this.setState({ focusedScreen: true })
);
navigation.addListener('willBlur', () =>
this.setState({ focusedScreen: false })
);
}
import { withNavigationFocus } from 'react-navigation'
render() {
const { hasCameraPermission, focusedScreen } = this.state;
if (hasCameraPermission === null) {
return <View />;
} else if (hasCameraPermission === false) {
return <Text>No access to camera</Text>;
} else if (focusedScreen){
return (this.cameraView());
} else {
return <View />;
}
const { isFocused } = this.props
const { hasCameraPermission } = this.state;
if (hasCameraPermission === null) {
return <View />;
} else if (hasCameraPermission === false) {
return <Text>No access to camera</Text>;
} else if (isFocused){
return (this.cameraView());
} else {
return <View />;
}
}
export default withNavigationFocus(YourComponent)
```