I use expo camera and want to use takePictureAsync() to capture photo.
I use a as a button to control capturing status (Capture or retake).
In iOS, I found that if I press the capture button and call takePictureAsync(), the camera does not take picture immediately, it will only take the picture when I trigger the other action, e.g. scroll the screen, click on the other button such as back button). But I am sure that the function which contain takePictureAsync() has been called.
import { Camera, Permissions} from 'expo';
import { View, StyleSheet, TouchableOpacity, Text, Alert, ScrollView, Image } from 'react-native';
async componentWillMount() {
const { status } = await Permissions.askAsync(Permissions.CAMERA);
this.setState({ hasCameraPermission: status === 'granted' });
}
async accessCamera()
{
if (this.state.isCapturing)
{
let photo = await this.camera.takePictureAsync();
this.setState({ isCapturing: false, accessCameraLabel: 'Retake', capturedPhoto: photo.uri});
}
else
{
this.setState({ isCapturing: true, accessCameraLabel: 'Capture', capturedPhoto: null});
}
}
render() {
return (
<ScrollView>
<View style={{ flex: 1, backgroundColor: '#fff'}}>
<View style={styles.photoGroup}>
{ !this.state.isCapturing?
<View style={{ height: "100%", width: "100%" , justifyContent: 'center', alignItems: 'center'}}>
<Ionicons name="ios-cloud-upload-outline" size={80}/>
</View>
:
<Camera style={{ height: "100%", width: "100%" }} ref={ref => { this.camera = ref}} type={Camera.Constants.Type.back}/>
}
</View>
<TouchableOpacity style={styles.CameraButton} onPress={()=>this.accessCamera()}>
<Text>{this.state.accessCameraLabel}</Text>
</TouchableOpacity>
</View>
</ScrollView>
);
}
}
There is no problem when using iOS simulator and expo client (debug in same network). Android is no problem as well. The problem only exist when opening published project in expo client (iOS) and standalone app by exp build.
I have tried to test this case in new project but it shows the same problem, my sdkVersion is 29.0.0.