Internal
If using the new style context, re-declare this in your class to be the
React.ContextType
of your static contextType
.
Should be used with type annotation or static contextType.
static contextType = MyContext
// For TS pre-3.7:
context!: React.ContextType<typeof MyContext>
// For TS 3.7 and above:
declare context: React.ContextType<typeof MyContext>
Internal
displayPrivate
getPrivate
isPrivate
lastPrivate
lastUIRotationPrivate
maybePrivate
onPrivate
onPrivate
onPrivate
onPrivate
onPrivate
onPrivate
onPrivate
onPrivate
onPrivate
onPrivate
onPrivate
onReadonly
propsPrivate
Readonly
refPrivate
rotationPrivate
setPrivate
unsetStatic
Optional
contextIf set, this.context
will be set at runtime to the current value of the given Context.
type MyContext = number
const Ctx = React.createContext<MyContext>(0)
class Foo extends React.Component {
static contextType = Ctx
context!: React.ContextType<typeof Ctx>
render () {
return <>My context's value: {this.context}</>;
}
}
https://react.dev/reference/react/Component#static-contexttype
Static
Internal
displayPrivate
handleOptional
UNSAFE_Called immediately before mounting occurs, and before Component.render. Avoid introducing any side-effects or subscriptions in this method.
This method will not stop working in React 17.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps prevents this from being invoked.
Optional
UNSAFE_Called when the component may be receiving new props. React may call this even if props have not changed, so be sure to compare new and existing props if you only want to handle changes.
Calling Component.setState generally does not trigger this method.
This method will not stop working in React 17.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps prevents this from being invoked.
Optional
UNSAFE_Called immediately before rendering when new props or state is received. Not called for the initial render.
Note: You cannot call Component.setState here.
This method will not stop working in React 17.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps prevents this from being invoked.
16.3, use getSnapshotBeforeUpdate instead
Cancel the current video recording. The temporary video file will be deleted,
and the startRecording
's onRecordingError
callback will be invoked with a capture/recording-canceled
error.
CameraCaptureError
When any kind of error occured while canceling the video recording.
Use the code
property to get the actual error
await camera.current.startRecording({
onRecordingFinished: (video) => console.log(video),
onRecordingError: (error) => {
if (error.code === 'capture/recording-canceled') {
// recording was canceled.
} else {
console.error(error)
}
},
})
setTimeout(async () => {
await camera.current.cancelRecording()
}, 5000)
Optional
componentOptional
componentOptional
componentCalled immediately before mounting occurs, and before Component.render. Avoid introducing any side-effects or subscriptions in this method.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps prevents this from being invoked.
Optional
componentCalled when the component may be receiving new props. React may call this even if props have not changed, so be sure to compare new and existing props if you only want to handle changes.
Calling Component.setState generally does not trigger this method.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps prevents this from being invoked.
Optional
componentOptional
componentCalled immediately before rendering when new props or state is received. Not called for the initial render.
Note: You cannot call Component.setState here.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps prevents this from being invoked.
16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17
Focus the camera to a specific point in the coordinate system.
The point to focus to. This should be relative to the Camera view's coordinate system and is expressed in points.
(0, 0)
means top left.(CameraView.width, CameraView.height)
means bottom right.Make sure the value doesn't exceed the CameraView's dimensions.
CameraRuntimeError
When any kind of error occured while focussing.
Use the code
property to get the actual error
await camera.current.focus({
x: tapEvent.x,
y: tapEvent.y
})
Optional
getRuns before React applies the result of render to the document, and returns an object to be given to componentDidUpdate. Useful for saving things such as scroll position before render causes changes to it.
Note: the presence of this method prevents any of the deprecated lifecycle events from running.
Pauses the current video recording.
CameraCaptureError
When any kind of error occured while pausing the video recording.
Use the code
property to get the actual error
// Start
await camera.current.startRecording({
onRecordingFinished: (video) => console.log(video),
onRecordingError: (error) => console.error(error),
})
await timeout(1000)
// Pause
await camera.current.pauseRecording()
await timeout(500)
// Resume
await camera.current.resumeRecording()
await timeout(2000)
// Stop
await camera.current.stopRecording()
Resumes a currently paused video recording.
CameraCaptureError
When any kind of error occured while resuming the video recording.
Use the code
property to get the actual error
// Start
await camera.current.startRecording({
onRecordingFinished: (video) => console.log(video),
onRecordingError: (error) => console.error(error),
})
await timeout(1000)
// Pause
await camera.current.pauseRecording()
await timeout(500)
// Resume
await camera.current.resumeRecording()
await timeout(2000)
// Stop
await camera.current.stopRecording()
Optional
callback: (() => void)Optional
shouldCalled to determine whether the change in props and state should trigger a re-render.
Component
always returns true.
PureComponent
implements a shallow comparison on props and state and returns true if any
props or states have changed.
If false is returned, Component.render, componentWillUpdate
and componentDidUpdate
will not be called.
Start a new video recording.
CameraCaptureError
When any kind of error occured while starting the video recording.
Use the code
property to get the actual error
camera.current.startRecording({
onRecordingFinished: (video) => console.log(video),
onRecordingError: (error) => console.error(error),
})
setTimeout(() => {
camera.current.stopRecording()
}, 5000)
Stop the current video recording.
CameraCaptureError
When any kind of error occured while stopping the video recording.
Use the code
property to get the actual error
await camera.current.startRecording({
onRecordingFinished: (video) => console.log(video),
onRecordingError: (error) => console.error(error),
})
setTimeout(async () => {
await camera.current.stopRecording()
}, 5000)
Take a single photo and write it's content to a temporary file.
Optional
options: TakePhotoOptionsCameraCaptureError
When any kind of error occured while capturing the photo.
Use the code
property to get the actual error
const photo = await camera.current.takePhoto({
flash: 'on',
enableAutoRedEyeReduction: true
})
Captures a snapshot of the Camera view and write it's content to a temporary file.
takeSnapshot
waits for a Frame from the video pipeline and therefore requires video
to be enabled.takeSnapshot
performs a GPU view screenshot from the preview view.Optional
options: TakeSnapshotOptionsCameraCaptureError
When any kind of error occured while capturing the photo.
Use the code
property to get the actual error
const snapshot = await camera.current.takeSnapshot({
quality: 100
})
Static
addAdds a listener that gets called everytime the Camera Devices change, for example when an external Camera Device (USB or continuity Camera) gets plugged in or plugged out.
If you use Hooks, use the useCameraDevices()
hook instead.
Static
getGet a list of all available camera devices on the current phone.
If you use Hooks, use the useCameraDevices(..)
hook instead.
const devices = Camera.getAvailableCameraDevices()
const backCameras = devices.filter((d) => d.position === "back")
const frontCameras = devices.filter((d) => d.position === "front")
Static
getGets the current Camera Permission Status. Check this before mounting the Camera to ensure the user has permitted the app to use the camera.
To actually prompt the user for camera permission, use requestCameraPermission()
.
Static
getGets the current Location Permission Status.
Check this before enabling the location={...}
property to make sure the
the user has permitted the app to use the location.
To actually prompt the user for location permission, use requestLocationPermission()
.
Note: This method will throw a system/location-not-enabled
error if the Location APIs are not enabled at build-time.
See the "GPS Location Tags" documentation for more information.
Static
getGets the current Microphone-Recording Permission Status.
Check this before enabling the audio={...}
property to make sure the
user has permitted the app to use the microphone.
To actually prompt the user for microphone permission, use requestMicrophonePermission()
.
Static
requestShows a "request permission" alert to the user, and resolves with the new camera permission status.
If the user has previously blocked the app from using the camera, the alert will not be shown
and "denied"
will be returned.
CameraRuntimeError
When any kind of error occured while requesting permission.
Use the code
property to get the actual error
Static
requestShows a "request permission" alert to the user, and resolves with the new location permission status.
If the user has previously blocked the app from using the location, the alert will not be shown
and "denied"
will be returned.
CameraRuntimeError
When any kind of error occured while requesting permission.
Use the code
property to get the actual error
Static
requestShows a "request permission" alert to the user, and resolves with the new microphone permission status.
If the user has previously blocked the app from using the microphone, the alert will not be shown
and "denied"
will be returned.
CameraRuntimeError
When any kind of error occured while requesting permission.
Use the code
property to get the actual error
A powerful
<Camera>
component.Read the VisionCamera documentation for more information.
The
<Camera>
component's most important properties are:device
: Specifies theCameraDevice
to use. Get aCameraDevice
by using the useCameraDevice | useCameraDevice(..) hook, or manually by using the CameraDevices.getAvailableCameraDevices | CameraDevices.getAvailableCameraDevices() function.isActive
: A boolean value that specifies whether the Camera should actively stream video frames or not. This can be compared to a Video component, whereisActive
specifies whether the video is paused or not. If you fully unmount the<Camera>
component instead of usingisActive={false}
, the Camera will take a bit longer to start again.Example
Component