expo camera takePictureAsync() not taking expectedly

#1

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.

3 Likes
Camera requiring two clicks?
#2

Hey @ccmok2,

Can you create a Snack with your code so we can test it ourself?

Cheers,

Adam

#3

Sure. Here it is.

But I found that there is no problem running project from Snack in the same device (iPhone 7 plus). It is only happened in published project in XDE.

#4

I also encountered this problem, it works fine on the development, but after building the app, the camera button have to be pressed twice before taking a photo. Any solution to this?

1 Like
#5

I have the same issue. I have to trigger another action to take a picture. I have the issue since I upgrade from sdk28 to sdk30

#6

I resolve the problem by coming back to sdk 28

closed #7

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.