📷 React Native Awesome Camera

Features List

• High-quality camera support in Android and iOS
• Select images and videos from phone storage with an option of multiple selection
• Capture images and videos using the awesome camera
• Flash, manual focus, and camera zoom features available
• Customize theme color

Installation and Setup steps

yarn add react-native-awesome-camera

or

npm i react-native-awesome-camera

install dependencies

yarn add react-native-permissions react-native-vision-camera @react-native-camera-roll/camera-roll react-native-gesture-handler

we are using react-native-vision-camera

Android Changes

Add below permission in your AndroidManifest.xml

<manifest>
  ....
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.READ_MEDIA_VIDEO"/>
    <uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
  ....
</manifest>

iOS Changes

Add below lines in your Podfile

# with react-native >= 0.72
- # Resolve react_native_pods.rb with node to allow for hoisting
- require Pod::Executable.execute_command('node', ['-p',
-   'require.resolve(
-     "react-native/scripts/react_native_pods.rb",
-     {paths: [process.argv[1]]},
-   )', __dir__]).strip

+ def node_require(script)
+   # Resolve script with node to allow for hoisting
+   require Pod::Executable.execute_command('node', ['-p',
+     "require.resolve(
+       '#{script}',
+       {paths: [process.argv[1]]},
+     )", __dir__]).strip
+ end

+ node_require('react-native/scripts/react_native_pods.rb')
+ node_require('react-native-permissions/scripts/setup.rb')

# with react-native < 0.72
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
+ require_relative '../node_modules/react-native-permissions/scripts/setup'

# …

platform :ios, min_ios_version_supported
prepare_react_native_project!

# ⬇️ uncomment wanted permissions
setup_permissions([
  # 'AppTrackingTransparency',
  # 'BluetoothPeripheral',
  # 'Calendars',
  'Camera',
  # 'Contacts',
  # 'FaceID',
  # 'LocationAccuracy',
  # 'LocationAlways',
  # 'LocationWhenInUse',
  # 'MediaLibrary',
  'Microphone',
  # 'Motion',
  # 'Notifications',
  'PhotoLibrary',
  # 'PhotoLibraryAddOnly',
  # 'Reminders',
  # 'Siri',
  # 'SpeechRecognition',
  # 'StoreKit',
])

# …

Also change your Info.plist

<dict>
....
  <key>NSCameraUsageDescription</key>
  <string>${APP_NAME} Need camera access to take pictures or video.</string>
  <key>NSMicrophoneUsageDescription</key>
  <string>${APP_NAME} Need microphone access to record audio.</string>
  <key>NSPhotoLibraryUsageDescription</key>
  <string>${APP_NAME} Need photo library access to access photo gallery.</string>
....
</dict>

if you are facing any permission-related issues, you can refer to react-native-permissions/issues

you can refer these links for fixing React-bridging wrong paths, Added correct namespace qualifier to .mm file

Props:

| Name | Type | Required | Description | Default | | --------------------------- | --------------------- | -------- | --------------------------------------------------------------------------------------- | -------- | | setIsOpen | Function | Yes | Close awesome camera screen | - | | getData | Function | Yes | Return selected or captured media | - | | multiSelect | boolean | No | Option to select multiple files (image or video) | true | | themeColor | string | No | Custom theme color | 'yellow' | | secondaryColor | string | No | Custom secondary color | 'black' | | takePhotoOptions | TakePhotoOptions | No | Extends react-native-vision-camera's TakePhotoOptions interface while capturing a photo | - | | recordVideoOptions | RecordVideoOptions | No | Extends react-native-vision-camera's RecordVideoOptions interface when recording starts | - | | cameraProps | CameraProps | No | Extends react-native-vision-camera's CameraProps interface | - | | showGallery | boolean | No | For showing images available on device | true | | photo | boolean | No | For allowing photo capture | true | | video | boolean | No | For allowing video capture | true | | closeContainerStyle | ViewStyle | No | For styling close icon container | - | | closeIconStyle | ImageStyle | No | For styling close icon | - | | closeIcon | ImageSourcePropType | No | For providing custom close image resource | - | | renderCloseComponent | ReactComponentElement | No | For rendering custom close component | - | | videoContainerStyle | ViewStyle | No | For styling video icon container | - | | videoIconStyle | ImageStyle | No | For styling video icon | - | | videoIcon | ImageSourcePropType | No | For providing custom video image resource | - | | renderVideoComponent | ReactComponentElement | No | For rendering custom video component | - | | flashContainerStyle | ViewStyle | No | For styling flash icon container | - | | flashIconStyle | ImageStyle | No | For styling flash icon | - | | flashIcon | ImageSourcePropType | No | For providing custom flash image resource | - | | renderFlashComponent | ReactComponentElement | No | For rendering custom flash component | - | | changeCameraContainerStyle | ViewStyle | No | For styling change camera icon container | - | | changeCameraIconStyle | ImageStyle | No | For styling change camera icon | - | | changeCameraIcon | ImageSourcePropType | No | For providing custom change camera image resource | - | | renderChangeCameraComponent | ReactComponentElement | No | For rendering custom change camera component | - |

Example

import React, { useState } from "react";
import { Button, SafeAreaView, StyleSheet } from "react-native";
import AwesomeCamera from "react-native-awesome-camera";

const App = () => {
  const { container } = styles;
  const [isOpen, setIsOpen] = useState(false);

  const getData = (data: any) => {
    console.log({ data });
  };

  return (
    <SafeAreaView style={container}>
      {(!isOpen && (
        <Button
          title="button"
          onPress={() => {
            setIsOpen(true);
          }}
        />
      )) || <AwesomeCamera setIsOpen={setIsOpen} getData={getData} />}
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});

export default App;

Run Command Android

yarn install && npm run android

Run Command iOS

yarn install && cd ios && pod install && cd ..  && npm run ios

Welcome to issues!

• request for more features 🚀
• fork and fix open issues 🛠
• raise issue 📣

open issues