React Native Camera

React Native Camera

  • Docs
  • Guides
  • API
  • Help
  • For Enterprise
  • GitHub

›Guides

Getting Started

  • Installation
  • Contributing

Guides

  • Expo Usage
  • Gradle Upgrade Guide
  • Migrating from RCTCamera to RNCamera
  • Migrating from version 1.x to 2.x
  • React Navigation
  • Recipes
  • RNCamera
  • Testing

API

  • Work in progress

Help

  • Q & A

Enterprise

  • React-Native-Camera for Enterprise
Edit

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 withNavigationFocus, which is a higher order component, and wrap it around your component. Then, you can have access to isFocused from props.


import { withNavigationFocus } from 'react-navigation' 

 render() {
    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)
Last updated on 11/11/2019 by Theodore Sevvos
← Migrating from version 1.x to 2.xRecipes →
React Native Camera
Docs
Getting StartedGuidesAPI Reference
Community
User ShowcaseStack OverflowProject Chat
More
GitHubStars
Facebook Open Source
Copyright © 2020