Implementing Camera in React Native using react-native-camera

 Hello, React Native enthusiasts! Today, we’re diving into the exciting world of implementing a camera in our React Native applications. The camera is a powerful feature that adds significant value to our mobile applications.

The Chosen Library: react-native-camera

To get started, we’ll be using the react-native-camera library. If you're curious about its metrics, it weighs in at over 1MB with a robust weekly download count of over 60K.

Implementation Steps

1. Gradle Configuration

Firstly, let’s configure the necessary Gradle files. Add the following lines:

android\settings.gradle

project(':react-native-camera').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-camera/android')

android\app\build.gradle

Use those comment,

implementation project(‘:react-native-camera’)

missingDimensionStrategy ‘react-native-camera’, ‘general’ //add this line

defaultConfig {
        applicationId "com.workhallmobileapp"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 6
        versionName "1.6"
        resValue "string", "build_config_package", "com.workhallmobileapp"
        missingDimensionStrategy 'react-native-camera', 'general' //add this line
    }

dependencies {
    // The version of react-native is set by the React Native Gradle Plugin
    implementation("com.facebook.react:react-android")
    implementation("androidx.core:core-splashscreen:1.0.0") // add this line

    implementation 'com.google.android.material:material:1.9.0'
    implementation 'com.google.android.play:core:1.10.3'

    implementation project(':react-native-camera')

    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}")
    debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
        exclude group:'com.squareup.okhttp3', module:'okhttp'
    }
    debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}")
    if (hermesEnabled.toBoolean()) {
        implementation("com.facebook.react:hermes-android")
    } else {
        implementation jscFlavor
    }
}

2. Camera Component

Now, let’s integrate the camera component into our React Native app.

import { RNCamera } from 'react-native-camera';
import { TouchableOpacity } from 'react-native-gesture-handler';
 
<RNCamera
    style={{
      flex: 1,
      justifyContent: 'flex-end',
      alignItems: 'center',
    }}
    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',
    }}>
    {({camera, status, recordAudioPermissionStatus}) => {
      console.log();
      
      // if (status !== 'READY') return <PendingView />;
      return (
        <View
          style={{
            flex: 0,
            flexDirection: 'row',
            justifyContent: 'center',
          }}>
          <TouchableOpacity
            onPress={() => takePicture(camera)}
            style={{
              flex: 0,
              backgroundColor: '#fff',
              borderRadius: 5,
              padding: 15,
              paddingHorizontal: 20,
              alignSelf: 'center',
              margin: 20,
            }}>
            <Text style={{fontSize: 14}}> SNAP </Text>
          </TouchableOpacity>
        </View>
      );
    }}
    </RNCamera>

 const takePicture = async (camera) => {
    const options = { quality: 0.5, base64: true };
    let pickedFile = await camera.takePictureAsync(options);
    let binary,file;
    //  eslint-disable-next-line
    console.log(pickedFile);
   
    await RNFS.readFile(pickedFile.uri, 'base64').then(data => {
      console.log('bbbbb',data);
      
      binary = data;
    }),
     file = {
      mimeType:"image/jpeg",
      name:"pexels-szabó-viktor-3227986",
      size:367255,
      type:"jpg",
      uri:pickedFile.uri,
      binary:binary
    },
    setErrorMsg(''),
    console.log('pickedFilefile',file),          
    onChange({file})
  };

Rebuild the Application

Finally, don’t forget to rebuild your application after making these changes.

Conclusion

And there you have it — a quick guide to integrating a camera into your React Native app using react-native-camera. Feel free to explore further and customize based on your application's specific requirements.

Hope you find this approach to the camera integration worthy. Happy coding!

Thanks for reading! If you have any questions or insights, feel free to share them in the comments.