diff --git a/native/media/camera-modal.react.js b/native/media/camera-modal.react.js --- a/native/media/camera-modal.react.js +++ b/native/media/camera-modal.react.js @@ -263,9 +263,11 @@ +autoFocusPointOfInterest: AutoFocusPointOfInterest, +setAutoFocusPointOfInterest: AutoFocusPointOfInterest => void, +focusOnPoint: (input: [number, number]) => void, + +zoom: number, + +setZoom: (zoom: number) => void, + +updateZoom: (zoom: [number]) => void, }; type State = { - +zoom: number, +stagingMode: boolean, +pendingPhotoCapture: ?PhotoCapture, }; @@ -318,7 +320,6 @@ super(props); this.state = { - zoom: 0, stagingMode: false, pendingPhotoCapture: undefined, }; @@ -406,7 +407,7 @@ ), [ set(zoomReported, resolvedZoom), - call([cameraZoomFactor], this.updateZoom), + call([cameraZoomFactor], this.props.updateZoom), ], ), ]); @@ -748,7 +749,7 @@ type={type} captureAudio={false} maxZoom={maxZoom} - zoom={this.state.zoom} + zoom={this.props.zoom} flashMode={this.props.flashMode} autoFocusPointOfInterest={this.props.autoFocusPointOfInterest} style={styles.fill} @@ -897,9 +898,9 @@ }; this.props.setAutoFocusPointOfInterest(undefined); + this.props.setZoom(0); this.setState({ pendingPhotoCapture, - zoom: 0, }); }; @@ -929,10 +930,6 @@ pendingPhotoCapture: undefined, }); }; - - updateZoom = ([zoom]: [number]) => { - this.setState({ zoom }); - }; } const styles = StyleSheet.create({ @@ -1217,6 +1214,12 @@ [deviceOrientation, dimensions], ); + const [zoom, setZoom] = React.useState(0); + + const updateZoom = React.useCallback(([nextZoom]: [number]) => { + setZoom(nextZoom); + }, []); + return ( ); });