• Stars
    star
    109
  • Rank 318,110 (Top 7 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 5 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

React Hooks and API wrapper for the react-native-camera module. GitHub Actions CI/CD + Automatic Release

 

Hooks for React Native Camera

 

React Native Camera Hooks provides you with functionality to use the React Native Camera API with Functional Components.

 

npm GitHub CircleCI Deploy

import { View, TouchableOpacity, TouchableWithoutFeedback } from 'react-native';
import { RNCamera } from 'react-native-camera';
import { useCamera } from 'react-native-camera-hooks';

const FunctionalComponentExample = ({ initialProps }) => {
  const [
    { cameraRef, type, ratio, autoFocus, autoFocusPoint, isRecording },
    {
      toggleFacing,
      touchToFocus,
      textRecognized,
      facesDetected,
      recordVideo,
      setIsRecording,
    },
  ] = useCamera(initialProps);

  return (
    <View style={{ flex: 1 }}>
      <RNCamera
        ref={cameraRef}
        autoFocusPointOfInterest={autoFocusPoint.normalized}
        type={type}
        ratio={ratio}
        style={{ flex: 1 }}
        autoFocus={autoFocus}
        onTextRecognized={textRecognized}
        onFacesDetected={facesDetected}
      />

      <TouchableWithoutFeedback
        style={{
          flex: 1,
        }}
        onPress={touchToFocus}
      />

      <TouchableOpacity
        testID="button"
        onPress={toggleFacing}
        style={{ width: '100%', height: 45 }}>
        {type}
      </TouchableOpacity>

      {!isRecording && (
        <TouchableOpacity
          onPress={async () => {
            try {
              setIsRecording(true);
              const data = await recordVideo();
              console.warn(data);
            } catch (error) {
              console.warn(error);
            } finally {
              setIsRecording(false);
            }
          }}
          style={{ width: '100%', height: 45 }}
        />
      )}
    </View>
  );
};

Features

  • React Hooks Support: Use React Native Camera with Functional Components
  • Wrapper around the Camera API, that makes the usage easier
  • TypeScript support

Constants are defined in constants and initalState.

Function Description
useCamera(initialState) Includes all camera hooks described below. See also the example above
useZoom(state) Zoom feature. Includes zoom, setZoom, zoomIn (increment by 0.01) and zoomOut (decrement by 0.1)
useToggleFacing(state, modes) Toggles between two values (front and back side of the camera). Includes type, toggleFacing.
useAutoFocus(state, modes) Toggles between two values (focus on or off). Includes autoFocus and toggleAutoFocus.
useWhiteBalance(state) Toggles between white balance values. Includes whiteBalance, toggleWB and setWhiteBalance.
useFlash(state) Toggles between flash modes. Includes flash, toggleFlash and setFlash.
useAutoFocusTouch(state) Touch to focus feature. Includes autoFocusPoint, touchToFocus (callback to be used in onPress for example) and setAutoFocusPoint.
useTextRecognition(state) Text recognition feature. Includes textBlocks, setTextblocks and textRecognized (callback).
useFaceDetection(state) Face detection feature. Includes faces, setFaces and facesDetected (callback).
useBarcodeDetection(state) Barcode detection feature. Includes barcodes, setBarcodes and barcodeRecognized (callback).
takePicture({ cameraRef }, options) Function to take a picture. Returns a Promise with the result. defaultPictureTakeOptions can also be imported from the same file.
recordVideo({ cameraRef }, options) Function to record a video. Returns a Promise with the result. defaultVideoRecordOptions can also be imported from the same file.
stopRecording({ cameraRef }) Function to stop recording. Returns a Promise.
pausePreview({ cameraRef }) Function to pause the camera preview. Returns a Promise with the result as a boolean.
resumePreview({ cameraRef }) Function to resume the camera preview. Returns a Promise with the result as a boolean.

 


Installation

To install react-native-camera-hooks, do either

npm install --save react-native-camera-hooks

or

yarn add react-native-camera-hooks

Note that this requires a react-native version > 0.59 which supports React Hooks. Also, react-native-camera has to be installed.

 


TODO

  • Improve TypeScript support

More Repositories

1

react-native-spaceviewer

See and search upcoming and previous rocket space launches! Built with React Native, using Detox E2E tests, Fastlane and Github Actions for app store deployment.
JavaScript
74
star
2

splintersweets

A LibGDX and Kotlin Mobile Game Example
Objective-C
58
star
3

react-native-secure-element

The most secure way to encrypt and decrypt personal data on a mobile device. Automatically E2E tested and deployed via Github Actions CI/CD.
Java
28
star
4

SpaceSeek

See and search upcoming and previous rocket space launches! Built with React Native, using Detox E2E tests, Fastlane and Github Actions for app store deployment.
TypeScript
28
star
5

react-native-tapjoy

This module provides react-native bindings for the Tapjoy SDK.
Java
19
star
6

ReactNativeAnimatedBase

📲 React Native Basic Template with important basic libraries to get started easily.
TypeScript
11
star
7

FlutterOnboarding

Dart
10
star
8

gatsby-dapp-example

A simple example of using the Ethereum blockchain with Gatsby.Js. Smart contract is written in Solidity and developed using Truffle Framework.
JavaScript
10
star
9

react-native-cpp-code

This repository shows how to use C++ code as a custom module in a React Native app.
Java
10
star
10

ReactNativeModalTester

JavaScript
9
star
11

OpenAlarm

Android Alarm Clock App
Java
7
star
12

ReactNativeSearchAnimated

TypeScript
7
star
13

graphql_pokeapi_rust

Rust
5
star
14

ReactNativeTikTokComments

TypeScript
4
star
15

UnityViveSBSApplication

C#
2
star
16

ReactNativeCardCarousel

React Native horizontal card swipe view without dependencies.
TypeScript
2
star
17

preact-fourconnect

A DApp game based on Preact, TypeScript, JavaScript and Solidity based Smart Contracts on the Ethereum Blockchain.
JavaScript
2
star
18

RSSViewer

TypeScript
1
star
19

mariusreimer.com

Personal Website, Blog and App [WIP] by Marius Reimer.
TypeScript
1
star
20

react-lazy-suspense

JavaScript
1
star
21

RNTest

Objective-C
1
star
22

RNCPPExample

This repository shows the usage of custom C++ code to be used in a React Native project.
Objective-C
1
star
23

publisher

TypeScript
1
star
24

rust-actix-vue

Rust
1
star
25

react-saga-testing

A simple Example showing the setup and testing of React Redux + Saga
JavaScript
1
star
26

ReactNativeStarRating

TypeScript
1
star
27

rust_svg_ascii

[WIP] This is an approach to convert (simple) SVG files into an ASCII representation.
Rust
1
star
28

react-native-reaction-tester

Test your reaction in 5 steps
JavaScript
1
star
29

react-redux-saga-drizzle

JavaScript
1
star
30

libgdx-kotlin-game-basics

This repository provides a very basic libGDX and Kotlin based game
Kotlin
1
star