- Notifications
You must be signed in to change notification settings - Fork18
React Hooks and API wrapper for the react-native-camera module. GitHub Actions CI/CD + Automatic Release
License
NotificationsYou must be signed in to change notification settings
reime005/react-native-camera-hooks
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Hooks for React Native Camera
React Native Camera Hooks provides you with functionality to use the React Native Camera API with Functional Components.
import{View,TouchableOpacity,TouchableWithoutFeedback}from'react-native';import{RNCamera}from'react-native-camera';import{useCamera}from'react-native-camera-hooks';constFunctionalComponentExample=({ initialProps})=>{const[{ cameraRef, type, ratio, autoFocus, autoFocusPoint, isRecording},{ toggleFacing, touchToFocus, textRecognized, facesDetected, recordVideo, setIsRecording,},]=useCamera(initialProps);return(<Viewstyle={{flex:1}}><RNCameraref={cameraRef}autoFocusPointOfInterest={autoFocusPoint.normalized}type={type}ratio={ratio}style={{flex:1}}autoFocus={autoFocus}onTextRecognized={textRecognized}onFacesDetected={facesDetected}/><TouchableWithoutFeedbackstyle={{flex:1,}}onPress={touchToFocus}/><TouchableOpacitytestID="button"onPress={toggleFacing}style={{width:'100%',height:45}}>{type}</TouchableOpacity>{!isRecording&&(<TouchableOpacityonPress={async()=>{try{setIsRecording(true);constdata=awaitrecordVideo();console.warn(data);}catch(error){console.warn(error);}finally{setIsRecording(false);}}}style={{width:'100%',height:45}}/>)}</View>);};
- 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 inconstants andinitalState.
| Function | Description |
|---|---|
useCamera(initialState) | Includes all camera hooks described below. See also the example above |
useZoom(state) | Zoom feature. Includeszoom,setZoom,zoomIn (increment by 0.01) andzoomOut (decrement by 0.1) |
useToggleFacing(state, modes) | Toggles between two values (front and back side of the camera). Includestype,toggleFacing. |
useAutoFocus(state, modes) | Toggles between two values (focus on or off). IncludesautoFocus andtoggleAutoFocus. |
useWhiteBalance(state) | Toggles between white balance values. IncludeswhiteBalance,toggleWB andsetWhiteBalance. |
useFlash(state) | Toggles between flash modes. Includesflash,toggleFlash andsetFlash. |
useAutoFocusTouch(state) | Touch to focus feature. IncludesautoFocusPoint,touchToFocus (callback to be used inonPress for example) andsetAutoFocusPoint. |
useTextRecognition(state) | Text recognition feature. IncludestextBlocks,setTextblocks andtextRecognized (callback). |
useFaceDetection(state) | Face detection feature. Includesfaces,setFaces andfacesDetected (callback). |
useBarcodeDetection(state) | Barcode detection feature. Includesbarcodes,setBarcodes andbarcodeRecognized (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. |
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.
- Improve TypeScript support
About
React Hooks and API wrapper for the react-native-camera module. GitHub Actions CI/CD + Automatic Release
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
No packages published