React Native – Camera

React Native Camera is the go-to component when creating React Native apps that require the functionality of using the device’s camera. Maintained by the React Native community, this module has support for:

• Videos
• Photographs
• Face Detection
• Text Recognition
• Barcode Scanning

It also helps your React Native app to communicate with the native operating system using the device’s hardware by implementing some helper methods.

Installation of Dependency

To use <CameraKitCameraScreen /> we need to install react-native-camera-kit package. To install this

npm install react-native-camera-kit --save

Installation of Pod

React Native 0.60 brings the auto-linking feature which links the library automatically and you just need to install the pod file using the following command

cd ios && pod install && cd ..

Permission to use the Camera for Android

We are using a Native API Camera so we need to add some permission into the AndroidManifest.xml file.

Please add the following permissions in your AndroidMnifest.xml. Go to CameraExample -> android -> app -> main -> AndroidMnifest.xml.

<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

We have also created a folder named as assets where we used 5 icons which we going to use in the Camera Interface.

App.js

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  Alert,
  ActivityIndicator,
  PermissionsAndroid,
  Platform,
  TouchableOpacity,
} from 'react-native';
import { CameraKitCameraScreen } from 'react-native-camera-kit';

export default class App extends React.Component {
  state = { isPermitted: false };
  constructor(props) {
    super(props);
  }
  onPress() {
    var that = this;
    if (Platform.OS === 'android') {
      async function requestCameraPermission() {
        try {
          const granted = await PermissionsAndroid.request(
            PermissionsAndroid.PERMISSIONS.CAMERA,
            {
              title: 'This App Camera Permission',
              message: 'This App needs access to your camera ',
            }
          );
          if (granted === PermissionsAndroid.RESULTS.GRANTED) {
            //If CAMERA Permission is granted
            //Calling the WRITE_EXTERNAL_STORAGE permission function
            requestExternalWritePermission();
          } else {
            alert('CAMERA permission denied');
          }
        } catch (err) {
          alert('Camera permission err', err);
          console.warn(err);
        }
      }
      async function requestExternalWritePermission() {
        try {
          const granted = await PermissionsAndroid.request(
            PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
            {
              title: 'This App External Storage Write Permission',
              message:
                'This App needs access to Storage data in your SD Card ',
            }
          );
          if (granted === PermissionsAndroid.RESULTS.GRANTED) {
            requestExternalReadPermission();
          } else {
            alert('WRITE_EXTERNAL_STORAGE permission denied');
          }
        } catch (err) {
          alert('Write permission err', err);
          console.warn(err);
        }
      }
      async function requestExternalReadPermission() {
        try {
          const granted = await PermissionsAndroid.request(
            PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
            {
              title: 'This App Read Storage Read Permission',
              message: 'This App needs access to your SD Card ',
            }
          );
          if (granted === PermissionsAndroid.RESULTS.GRANTED) {
            that.setState({ isPermitted: true });
          } else {
            alert('READ_EXTERNAL_STORAGE permission denied');
          }
        } catch (err) {
          alert('Read permission err', err);
          console.warn(err);
        }
      }
      requestCameraPermission();
    } else {
      this.setState({ isPermitted: true });
    }
  }
  onBottomButtonPressed(event) {
    const captureImages = JSON.stringify(event.captureImages);
    if (event.type === 'left') {
      this.setState({ isPermitted: false });
    } else {
      Alert.alert(
        event.type,
        captureImages,
        [{ text: 'OK', onPress: () => console.log('OK Pressed') }],
        { cancelable: false }
      );
    }
  }
  render() {
    if (this.state.isPermitted) {
      return (
        <CameraKitCameraScreen
          actions={{ rightButtonText: 'Done', leftButtonText: 'Cancel' }}
          onBottomButtonPressed={event => this.onBottomButtonPressed(event)}
          flashImages={{
            on: require('./assets/flashon.png'),
            off: require('./assets/flashoff.png'),
            auto: require('./assets/flashauto.png'),
          }}
          cameraFlipImage={require('./assets/flip.png')}
          captureButtonImage={require('./assets/capture.png')}
        />
      );
    } else {
      return (
        <View style={styles.container}>
          <TouchableOpacity
            style={styles.button}
            onPress={this.onPress.bind(this)}>
            <Text>Open Camera</Text>
          </TouchableOpacity>
        </View>
      );
    }
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'white',
  },
  button: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 10,
    width: 300,
    marginTop: 16,
  },
});

We have to set the height and width of the image as you see my screen is looking so ugly. And I use the emulator for the opening the camera if you use your device then you seen the proper result.