Dev Grill
  • Home
  • Remote Jobs
  • Coding Interview
  • Privacy Policy
Dev Grill
  • Home
  • Remote Jobs
  • Coding Interview
  • Privacy Policy
  • Javascript
  • React Native

How to use device Camara with React Native apps

  • July 30, 2020
  • No comments
  • 2 minute read
  • 320 views
  • Osuagwu Emeka
Total
5
Shares
5
0
0
0
0
0

Welcome guys. For this one I feel more like skipping the long story and just jump right into the coding / Implementation, after all this what you are here for 🤷‍♀️.

For blog post we will be using react native (RN > 0.60), am doing this because there is a good change you are using a fresh RN version and it’s good to stay up to date. 👌🏽

You can find the code base here

So here goes noting

Installation

npm install react-native-camera --save or yarn add react-native-camera

IOS Setup

Step 1 – Add required permissions to your app Info.plist

<!-- Required with iOS 10 and higher -->
<key>NSCameraUsageDescription</key>
<string>Your message to user when the camera is accessed for the first time</string>

<!-- Required with iOS 11 and higher: include this only if you are planning to use the camera roll -->
<key>NSPhotoLibraryAddUsageDescription</key>
<string>Your message to user when the photo library is accessed for the first time</string>

<!-- Include this only if you are planning to use the camera roll -->
<key>NSPhotoLibraryUsageDescription</key>
<string>Your message to user when the photo library is accessed for the first time</string>

<!-- Include this only if you are planning to use the microphone for video recording -->
<key>NSMicrophoneUsageDescription</key>
<string>Your message to user when the microphone is accessed for the first time</string>

Step 2 – Pod Install

cd ios && pod install && cd ..

Usage

Copy and paste the code below to see it work.

'use strict';
import React, { PureComponent } from 'react';
import { AppRegistry, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { RNCamera } from 'react-native-camera';

class App extends PureComponent {
  render() {
    return (
      <View style={styles.container}>
        <RNCamera
          ref={ref => {
            this.camera = ref;
          }}
          style={styles.preview}
          type={RNCamera.Constants.Type.back}
          flashMode={RNCamera.Constants.FlashMode.on}
          androidCameraPermissionOptions={{
            title: 'Permission to use camera',
            message: 'We need your permission to use your camera',
            buttonPositive: 'Ok',
            buttonNegative: 'Cancel',
          }}
          androidRecordAudioPermissionOptions={{
            title: 'Permission to use audio recording',
            message: 'We need your permission to use your audio',
            buttonPositive: 'Ok',
            buttonNegative: 'Cancel',
          }}
          onGoogleVisionBarcodesDetected={({ barcodes }) => {
            console.log(barcodes);
          }}
        />
        <View style={{ flex: 0, flexDirection: 'row', justifyContent: 'center' }}>
          <TouchableOpacity onPress={this.takePicture.bind(this)} style={styles.capture}>
            <Text style={{ fontSize: 14 }}> SNAP </Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }

  takePicture = async () => {
    if (this.camera) {
      const options = { quality: 0.5, base64: true };
      const data = await this.camera.takePictureAsync(options);
      console.log(data.uri);
    }
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: 'black',
  },
  preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  capture: {
    flex: 0,
    backgroundColor: '#fff',
    borderRadius: 5,
    padding: 15,
    paddingHorizontal: 20,
    alignSelf: 'center',
    margin: 20,
  },
});

export default App;

And we are done, now you can test on your emulator or device.

How to thank me?

  • Share the post
  • Leave a comment
  • follow me on twitter
  • tweet, share this post with 3 friends

I hope you’ll find this useful! Thanks

Total
5
Shares
Share 5
Tweet 0
Share 0
Share 0
Share 0
Share 0
Related Topics
  • React Native
Previous Article
  • Javascript
  • Vuejs

Vuejs show and hiding password input for users

  • October 17, 2019
  • Osuagwu Emeka
View Post
You May Also Like
View Post
  • Javascript
  • Vuejs

Vuejs show and hiding password input for users

  • October 17, 2019
  • Osuagwu Emeka
View Post
  • Javascript
  • Vuejs

Filtering Data The Vue Way

  • October 5, 2019
  • Osuagwu Emeka
Laravel Vuejs Realtime Chat
View Post
  • Javascript
  • Laravel
  • PHP
  • Redis
  • Vuejs

Real time (one to one) Chat App with Vuejs and Laravel – Part 1

  • September 2, 2019
  • Osuagwu Emeka
How to generate test data using JSON Server and Mockeroo for Graphql application
View Post
  • Javascript
  • JWT

How to generate test data using JSON Server and Mockeroo for Graphql application

  • August 16, 2019
  • Osuagwu Emeka

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recent Posts
  • Remote Information Technology Jobs October 14, 2020
  • Remote Technical Recruiter Job October 14, 2020
  • Remote Web Design Jobs October 14, 2020
  • What Does Remote Job mean? October 14, 2020
  • How to Find Remote Jobs October 14, 2020
Looking for something
Dev Grill
  • Home
  • Remote Jobs
  • Coding Interview
  • Privacy Policy
Learn and solve practical coding challenges

Input your search keywords and press Enter.