railbird/react-native-vision-camera
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Fix zoom not resetting in example app

Browse Source
This commit is contained in:
Marc Rousavy 2024-02-06 18:40:52 +01:00
parent 3b892c209e
commit 395ee7af89
No known key found for this signature in database
GPG Key ID: 83BEF0F19E8F5321
1 changed files with 14 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
package/example/src/CameraPage.tsx
View File

@ -2,7 +2,15 @@ import * as React from 'react'
import { useRef, useState, useCallback, useMemo } from 'react' import { useRef, useState, useCallback, useMemo } from 'react'
import { StyleSheet, Text, View } from 'react-native' import { StyleSheet, Text, View } from 'react-native'
import { PinchGestureHandler, PinchGestureHandlerGestureEvent, TapGestureHandler } from 'react-native-gesture-handler' import { PinchGestureHandler, PinchGestureHandlerGestureEvent, TapGestureHandler } from 'react-native-gesture-handler'
import { CameraRuntimeError, PhotoFile, useCameraDevice, useCameraFormat, useFrameProcessor, VideoFile } from 'react-native-vision-camera' import {
CameraProps,
CameraRuntimeError,
PhotoFile,
useCameraDevice,
useCameraFormat,
useFrameProcessor,
VideoFile,
} from 'react-native-vision-camera'
import { Camera } from 'react-native-vision-camera' import { Camera } from 'react-native-vision-camera'
import { CONTENT_SPACING, CONTROL_BUTTON_SIZE, MAX_ZOOM_FACTOR, SAFE_AREA_PADDING, SCREEN_HEIGHT, SCREEN_WIDTH } from './Constants' import { CONTENT_SPACING, CONTROL_BUTTON_SIZE, MAX_ZOOM_FACTOR, SAFE_AREA_PADDING, SCREEN_HEIGHT, SCREEN_WIDTH } from './Constants'
import Reanimated, { Extrapolate, interpolate, useAnimatedGestureHandler, useAnimatedProps, useSharedValue } from 'react-native-reanimated' import Reanimated, { Extrapolate, interpolate, useAnimatedGestureHandler, useAnimatedProps, useSharedValue } from 'react-native-reanimated'
@ -32,7 +40,7 @@ export function CameraPage({ navigation }: Props): React.ReactElement {
const camera = useRef<Camera>(null) const camera = useRef<Camera>(null)
const [isCameraInitialized, setIsCameraInitialized] = useState(false) const [isCameraInitialized, setIsCameraInitialized] = useState(false)
const hasMicrophonePermission = useMemo(() => Camera.getMicrophonePermissionStatus() === 'granted', []) const hasMicrophonePermission = useMemo(() => Camera.getMicrophonePermissionStatus() === 'granted', [])
const zoom = useSharedValue(0) const zoom = useSharedValue(1)
const isPressingButton = useSharedValue(false) const isPressingButton = useSharedValue(false)
// check if camera page is active // check if camera page is active
@ -73,12 +81,10 @@ export function CameraPage({ navigation }: Props): React.ReactElement {
const canToggleNightMode = device?.supportsLowLightBoost ?? false const canToggleNightMode = device?.supportsLowLightBoost ?? false
//#region Animated Zoom //#region Animated Zoom
// This just maps the zoom factor to a percentage value.
// so e.g. for [min, neutr., max] values [1, 2, 128] this would result in [0, 0.0081, 1]
const minZoom = device?.minZoom ?? 1 const minZoom = device?.minZoom ?? 1
const maxZoom = Math.min(device?.maxZoom ?? 1, MAX_ZOOM_FACTOR) const maxZoom = Math.min(device?.maxZoom ?? 1, MAX_ZOOM_FACTOR)
const cameraAnimatedProps = useAnimatedProps(() => { const cameraAnimatedProps = useAnimatedProps<CameraProps>(() => {
const z = Math.max(Math.min(zoom.value, maxZoom), minZoom) const z = Math.max(Math.min(zoom.value, maxZoom), minZoom)
return { return {
zoom: z, zoom: z,
@ -126,11 +132,10 @@ export function CameraPage({ navigation }: Props): React.ReactElement {
//#endregion //#endregion
//#region Effects //#region Effects
const neutralZoom = device?.neutralZoom ?? 1
useEffect(() => { useEffect(() => {
// Run everytime the neutralZoomScaled value changes. (reset zoom when device changes) // Reset zoom to it's default everytime the `device` changes.
zoom.value = neutralZoom zoom.value = device?.neutralZoom ?? 1
}, [neutralZoom, zoom]) }, [zoom, device])
//#endregion //#endregion
//#region Pinch to Zoom Gesture //#region Pinch to Zoom Gesture