React Native - Using Two React-Native-Camera Components in Same App Causing Issues?

Question

I'm using the react-native-camera component twice in my React Native app. I have a <CameraFront/> component and a <CameraBack/> component. They are each in different files CameraFront.js and CameraBack.js . Just fyi <CameraFront/> takes a picture of the front of the product and <CameraBack/> takes a picture of the back of the product. They don't refer to the front facing camera or back facing camera.

The issue is, when I try and take a picture from the <CameraBack/> component, it's actually running the takePicture() function from the <CameraFront/> component. No idea why this is happening. You'll see in the <CameraBack/> component I comment out all the code inside of the takePicture() function and throw a console.log() in the <CameraFront/> component. The console.log from the <CameraFront/> component runs even though I'm in the <CameraBack/> component. This is causing a bunch of weird stuff to happen like redux state being overwritten amongst some other other things.

Any ideas? I'm just not sure how the takePicture() function in the <CameraBack/> component would even be able to access the function in the other component?

CameraFront.js

import React, { PropTypes, Component } from 'react';
import {
  Dimensions,
  StyleSheet,
  Text,
  Button,
  TouchableHighlight,
  View,
  Alert
} from 'react-native';
import { connect } from 'react-redux'
import Camera from 'react-native-camera'
import { getImageFront } from '~/redux/modules/camera'

class CameraFront extends Component {
  static propTypes = {
    dispatch: PropTypes.func.isRequired,
    navigator: PropTypes.object.isRequired
  }
  componentDidMount () {
    Alert.alert(
      'Front Image',
      'Snap a picture of the front of the product.',
      [{ text: 'Ok', onPress: () => console.log('Ok pressed')}]
    )
  }
  render() {
      return (
        <View style={styles.container}>
          <Camera
            ref={(cam) => {
              this.camera = cam;
            }}
            style={styles.preview}
            aspect={Camera.constants.Aspect.fill}
            captureTarget={Camera.constants.CaptureTarget.disk}>
            <Button style={{marginBottom: 40, height: 50, padding: 10}} 
              onPress={this.takePicture.bind(this)}
              title="Capture" />
          </Camera>
        </View>
      );
  }

  takePicture() {
    this.camera.capture()
      .then((data) => {
        this.props.dispatch(getImageFront(data.path))
        console.log('function is being run in camera front instead')
        // Push to Preview component
       this.props.navigator.push({
        previewFront: true
      })
      })
      .catch(err => console.error(err));
  }
}

export default connect()(CameraFront)

CameraBack.js

import React, { PropTypes, Component } from 'react';
import {
  Dimensions,
  StyleSheet,
  Text,
  Button,
  TouchableHighlight,
  View,
  Alert
} from 'react-native';
import { connect } from 'react-redux'
import Camera from 'react-native-camera'
import { getImageBack } from '~/redux/modules/camera'

class CameraBack extends Component {
  static propTypes = {
    dispatch: PropTypes.func.isRequired,
    navigator: PropTypes.object.isRequired
  }
  componentDidMount () {
    Alert.alert(
      'Back Image',
      'Snap a picture of the back of the product.',
      [{ text: 'Ok', onPress: () => console.log('Ok pressed')}]
    )
  }
  render() {
      return (
        <View style={styles.container}>
          <Camera
            ref={(cam) => {
              this.camera = cam;
            }}
            style={styles.preview}
            aspect={Camera.constants.Aspect.fill}
            captureTarget={Camera.constants.CaptureTarget.disk}
            >
            <Button style={{marginBottom: 40, height: 50, padding: 10}} 
              onPress={this.takePicture.bind(this)}
              title="Capture" />
          </Camera>
        </View>
      );
  }

  takePicture() {
    /*
    this.camera.capture()
      .then((data) => {
        this.props.dispatch(getImageBack(data.path))
        console.log(this.props.dispatch(getImageBack(data.path)))
        this.props.navigator.push({
          previewBack: true
        })
      })
      .catch(err => console.error(err));
    */
  }

}

export default connect()(CameraBack)

Answer 1

As far as i know react-native-camera provide Camera.constants.Type.back or Camera.constants.Type.front both so writing the same thing in two different component does not make any sense what you need to do is just toggle the icon in your capture screen to change the camera from rear to front and rest the thrid party will handle.

What you need to do is pass index to your common component ie index:1 when you want to open front camera and index: 0 when you want to open back camera.

In your constructor make a check that if your index is zero then open back camera only and else front camera.

var typeOfCamera
if(!index)
typeOfCamera = Camera.constants.Type.back
else 
typeOfCamera = Camera.constants.Type.front

this.state = {
      camera: {
        aspect: Camera.constants.Aspect.fill,
        captureTarget: Camera.constants.CaptureTarget.cameraRoll,
        type: typeOfCamera,
        orientation: Camera.constants.Orientation.auto,
        flashMode: Camera.constants.FlashMode.auto,
      }

Cheers :)