ismnoiet / react-native-fast-camera

📸⚡Fast camera component for React Native.(NEW)

Home Page:https://www.npmjs.com/package/react-native-fast-camera

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

React Native Fast Camera 📸

The most needed high-quality native camera for react native. A fast native camera controllable by react native components.

Full Example

Motivation

I was looking for a flexible and fast camera component for react native, tried react-native-camera and react-native-camera-kit but was not satisfied with the performance. In a nutshell, this module is the product of months of research and experimentations with an aim to create a useful solution.

Getting Started

1. Installation

  • with yarn: yarn add react-native-fast-camera
  • with npm: npm install --save react-native-fast-camera

2. Linking

    1. Copy ios/FastCamera folder to your ios folder.
    1. from Xcode Project navigator select Add Files to "project name" then select ios/FastCamera.

3. Permissions

Add the following permission strings to your info.plist file, update the messages according to your needs. Otherwise your app will crash.

<key>NSCameraUsageDescription</key>
<string>We need to access your camera to take pictures.</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>We need to access your photo library to save the captured pictures.</string>

Usage

  import FastCamera, { Methods } from 'react-native-fast-camera';
  <FastCamera style={{ height: cameraHeight, width: cameraWidth }}
    onSaveSuccess={imageUrl => {
      console.log("onSaveSuccess: ", imageUrl);
    }}
    onGalleryImage={imageUrl => {
      console.log("onGalleryImage: ", imageUrl);
    }}
    onFlashToggle={isflashOn => {
      console.log('flash info: ', isflashOn);
    }}
  >
    {/* here render your buttons to control the camera component */}
  </FastCamera>

API

Property Type Description
onSaveSuccess Callback a callback triggered when the image was captured and saved successfully
onGalleryImage Callback a callback triggered when the image was selected from the user photo library
onFlashToggle Callback a callback triggered when the flash status change
timer Method Methods.timer() a method to show timer UI
toggleFlash Method Methods.toggleFlash() a method to toggle flash mode
takePicture Method Methods.takePicture() a method to capture a picture
pickImage Method Methods.pickImage() a method to pick an image from the photo library
flipCamera Method Methods.flipCamera() a method to flip the camera face (front/back)

TODO

  • Take a picture.
  • Pick an image from photo library.
  • Flip camera.
  • Flash On/Off mode.
  • Add timer.
  • Add Android support.
  • Add prop to set camera default face (front/back).
  • Export the iOS component as a pod module.

ACKNOWLEDGEMENTS

About

📸⚡Fast camera component for React Native.(NEW)

https://www.npmjs.com/package/react-native-fast-camera

License:MIT License


Languages

Language:Objective-C 90.5%Language:JavaScript 9.5%