Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-native-camera-kit-ccvshop
Advanced tools
Readme
A high performance, easy to use, rock solid
camera library for React Native apps.
|
yarn add react-native-camera-kit
cd ios && pod install && cd ..
Android: Add Kotlin to your project
Add the following uses-permission to your AndroidManifest.xml
(usually found at: android/src/main/
)
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
Add the following usage descriptions to your Info.plist
(usually found at: ios/PROJECT_NAME/
)
<key>NSCameraUsageDescription</key>
<string>For taking photos</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>For saving photos</string>
yarn bootstrap
yarn example ios
or yarn example android
Full screen camera component that holds camera state and provides camera controls
import { CameraScreen } from 'react-native-camera-kit';
<CameraScreen
actions={{ rightButtonText: 'Done', leftButtonText: 'Cancel' }}
onBottomButtonPressed={(event) => this.onBottomButtonPressed(event)}
flashImages={{
// optional, images for flash state
on: require('path/to/image'),
off: require('path/to/image'),
auto: require('path/to/image'),
}}
cameraFlipImage={require('path/to/image')} // optional, image for flipping camera button
captureButtonImage={require('path/to/image')} // optional, image capture button
torchOnImage={require('path/to/image')} // optional, image for toggling on flash light
torchOffImage={require('path/to/image')} // optional, image for toggling off flash light
hideControls={false} // (default false) optional, hides camera controls
showCapturedImageCount={false} // (default false) optional, show count for photos taken during that capture session
/>
Additionally, the camera screen can be used for barcode scanning
<CameraScreen
...
// Barcode props
scanBarcode={true}
onReadCode={(event) => Alert.alert('QR code found')} // optional
showFrame={true} // (default false) optional, show frame with transparent layer (qr code or barcode will be read on this area ONLY), start animation for scanner,that stoped when find any code. Frame always at center of the screen
laserColor='red' // (default red) optional, color of laser in scanner frame
frameColor='white' // (default white) optional, color of border of scanner frame
/>
Barebones camera component
import { Camera, CameraType } from 'react-native-camera-kit';
<Camera
ref={(ref) => (this.camera = ref)}
cameraType={CameraType.Back} // front/back(default)
/>
Props | Type | Description |
---|---|---|
flashMode | 'on' /'off' /'auto' | Camera flash mode. Default: auto |
focusMode | 'on' /'off' | Camera focus mode. Default: on |
zoomMode | 'on' /'off' | Enable pinch to zoom camera. Default: on |
torchMode | 'on' /'off' | Toggle flash light when camera is active. Default: off |
ratioOverlay | ['int':'int', ...] | Show a guiding overlay in the camera preview for the selected ratio. Does not crop image as of v9.0. Example: ['16:9', '1:1', '3:4'] |
ratioOverlayColor | Color | Any color with alpha. Default: '#ffffff77' |
resetFocusTimeout | Number | iOS only. Dismiss tap to focus after this many milliseconds. Default 0 (disabled). Example: 5000 is 5 seconds. |
resetFocusWhenMotionDetected | Boolean | iOS only. Dismiss tap to focus when focus area content changes. Native iOS feature, see documentation: https://developer.apple.com/documentation/avfoundation/avcapturedevice/1624644-subjectareachangemonitoringenabl?language=objc). Default true . |
onOrientationChange | Function | Callback when physical device orientation changes. Returned event contains orientation . Ex: onOrientationChange={(event) => console.log(event.nativeEvent.orientation)} . Use import { Orientation } from 'react-native-camera-kit'; if (event.nativeEvent.orientation === Orientation.PORTRAIT) { ... } to understand the new value |
Props | Type | Description |
---|---|---|
scanBarcode | Boolean | Enable barcode scanner. Default: false |
showFrame | Boolean | Show frame in barcode scanner. Default: false |
laserColor | Color | Color of barcode scanner laser visualization. Default: red |
frameColor | Color | Color of barcode scanner frame visualization. Default: yellow |
surfaceColor | Color | Color of barcode scanner surface visualization. Default: blue |
onReadCode | Function | Callback when scanner successfully reads barcode. Returned event contains codeStringValue . Default: null . Ex: onReadCode={(event) => console.log(event.nativeEvent.codeStringValue)} |
Note: Must be called on a valid camera ref
Capture image as JPEG.
A temporary file is created. You must move this file to a permanent location (e.g. the app's 'Documents' folder) if you need it beyond the current session of the app as it may be deleted when the user leaves the app. You can move files by using a file system library such as react-native-fs or expo-filesystem.
(On Android we currently have an unsupported outputPath
prop but it's subject to change at any time).
Note that the reason you're getting a URL despite it being a file is because Android 10+ encourages URIs. To keep things consistent regardless of settings or platform we always send back a URI.
const { uri } = await this.camera.capture();
// uri = 'file:///data/user/0/com.myorg.myapp/cache/ckcap123123123123.jpg'
If you want to store it permanently, here's an example using react-native-fs:
import RNFS from 'react-native-fs';
// [...]
let { uri } = await this.camera.capture();
if (uri.startsWith('file://')) {
// Platform dependent, iOS & Android uses '/'
const pathSplitter = '/';
// file:///foo/bar.jpg => /foo/bar.jpg
const filePath = uri.replace('file://', '');
// /foo/bar.jpg => [foo, bar.jpg]
const pathSegments = filePath.split(pathSplitter);
// [foo, bar.jpg] => bar.jpg
const fileName = pathSegments[pathSegments.length - 1];
await RNFS.moveFile(filePath, `${RNFS.DocumentDirectoryPath}/${fileName}`);
uri = `file://${destFilePath}`;
}
const isCameraAuthorized = await Camera.checkDeviceCameraAuthorizationStatus();
return values:
AVAuthorizationStatusAuthorized
returns true
AVAuthorizationStatusNotDetermined
returns -1
otherwise, returns false
const isUserAuthorizedCamera = await Camera.requestDeviceCameraAuthorization();
AVAuthorizationStatusAuthorized
returns true
otherwise, returns false
The MIT License.
See LICENSE
FAQs
A high performance, fully featured, rock solid camera library for React Native applications
The npm package react-native-camera-kit-ccvshop receives a total of 1 weekly downloads. As such, react-native-camera-kit-ccvshop popularity was classified as not popular.
We found that react-native-camera-kit-ccvshop demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.