React-native-camera (android): Takepictureasync() Throws Error

After calling takePictureAsync() from react-native-camera, i'm getting this error: { 'framesToPop': 1, 'nativeStackAndroid': [], 'userInfo': null, 'message': 'Preview is p

Solution 1:

Try to use component as FaCC (Function as Child Components)! This way worked for me.

constPendingView = () => (
  <Viewstyle={{flex:1,
      backgroundColor: 'lightgreen',
      justifyContent: 'center',
      alignItems: 'center',
    }}
  ><Text>Waiting</Text></View>
);

classExampleAppextendsPureComponent {
  render() {
    return (
      <Viewstyle={styles.container}><RNCamerastyle={styles.preview}type={RNCamera.Constants.Type.back}
        >
          {({ camera, status, recordAudioPermissionStatus }) => {
            if (status !== 'READY') return <PendingView />;
            return (
              <Viewstyle={{flex:0, flexDirection: 'row', justifyContent: 'center' }}><TouchableOpacityonPress={() => this.takePicture(camera)} style={styles.capture}>
                  <Textstyle={{fontSize:14 }}> SNAP </Text></TouchableOpacity></View>
            );
          }}
        </RNCamera></View>
    );
  }

  takePicture = asyncfunction(camera) {
    const options = { quality: 0.5, base64: true };
    const data = await camera.takePictureAsync(options);
    //  eslint-disable-next-lineconsole.log(data.uri);
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: 'black',
  },
  preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  capture: {
    flex: 0,
    backgroundColor: '#fff',
    borderRadius: 5,
    padding: 15,
    paddingHorizontal: 20,
    alignSelf: 'center',
    margin: 20,
  },
});

Solution 2:

Is this an issue with the library or my implementation?

It appears to be a problem with the example code. I noticed the same thing and my solution is similar to FredVieira but doesn't use FaCC. It appears that the camera will not resume on Android unless the RNCamera component has children. So if you change the example from

<RNCamera... /><View...><TouchableOpacity...><Textstyle={{fontSize:14 }}> SNAP </Text></TouchableOpacity></View>

to

<RNCamera...><View...><TouchableOpacity...><Textstyle={{fontSize:14 }}> SNAP </Text></TouchableOpacity></View></RNCamera>

it should work. So you can use a function or a component, just as long as the RNCamera has a child.