fix: Fix zoom not resetting in example app
				
					
				
			This commit is contained in:
		@@ -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
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user