Image out of focus when using focusDepth in React Native Camera

Question

I have been trying to use the focusDepth property to manually change the focus of the camera. However, while capturing the image, the camera preview changes and becomes out of focus, resulting in an image different from the preview before capture. I am using a Redmi Note 8 Pro. I noticed that this issue disappears when setting the autoFocus on, so it seems to be specific to the manual focus property. Does anyone know how I can fix this issue?

Thank you very much for your help!

Here is the excerpt from my code containing the relevant state definitions and the RNCamera module:

const [focusValue, setFocusValue] = useState(1);
const [zoomValue, setZoomValue] = useState(0);
<RNCamera
ref={(ref) => {
setCameraRef(ref);
}}
ratio="9:16"
style={styles.preview}
captureAudio={false}
focusDepth={focusValue}
zoom={zoomValue}
autoFocus={RNCamera.Constants.AutoFocus.off}
useCamera2Api={true}
type={RNCamera.Constants.Type.back}
flashMode={RNCamera.Constants.FlashMode.off}
whiteBalance={RNCamera.Constants.WhiteBalance.shadow}
androidCameraPermissionOptions={{
title: 'Permission to use camera',
message: 'We need your permission to use your camera',
buttonPositive: 'Ok',
buttonNegative: 'Cancel',
}}>

<TouchableOpacity 
onPress={async() => {
if (cameraRef) {
  const options = { quality: 1, base64: true };
  const data = await cameraRef.takePictureAsync(options);
  navigation.navigate('Image',{'photo':data.uri});
      }),
    });
}
      }}

    style={styles.capture}>
    <Text style={{ fontSize: 14, color:'white', fontWeight:'bold'}}> TAKE PICTURE </Text>
</TouchableOpacity>  
    </View>
    
    <View style={{alignSelf:'stretch'}}>
      <Slider
minimumValue={0}
maximumValue={1}
allowTouchTrack={true}
animateTransitions={true}
minimumTrackTintColor="white"
maximumTrackTintColor="#15a2ea"
thumbTintColor="#bae1f5"
trackStyle={{height:2}}
style={{marginLeft:20, marginRight:20}}
thumbStyle={{width:20, height:20}}
value={0}
onValueChange={(sliderValue) => setFocusValue(1-sliderValue)}
/>
<Slider
minimumValue={0}
maximumValue={1}
allowTouchTrack={true}
animateTransitions={true}
minimumTrackTintColor="white"
maximumTrackTintColor="#15a2ea"
thumbTintColor="#bae1f5"
trackStyle={{height:2}}
style={{marginLeft:20, marginRight:20}}
thumbStyle={{width:20, height:20}}
value={0}
onValueChange={(zoomSliderValue) => setZoomValue(zoomSliderValue)}
/>
</View>
</RNCamera>

Image out of focus when using focusDepth in React Native Camera

0 Answers0