Working on a simple camera based application that needs to generate a base64 encoded data uri version of the image. Ideally avoiding creating and storing a file on disk. react-native-camera has options for this and successfully generates the base64 encoded string on android.
The same code in iOS results in a black screen when attempting to place it in an tag, and the backend server similarly sees the base64 encoded image as corrupt.
takePicture = () => {
if (this.state.image) {
return this.setState({ image: undefined });
}
if (this.camera) {
const quality = 1; // range of 1 to 0 with 1 being full quality.
const base64 = true; // false skips the conversion of jpg to base64
const doNotSave = true; // return only the base64 representation (if set to true)
const options: TakePictureOptions = { quality, base64, doNotSave };
this.camera
.takePictureAsync(options)
.then(data => {
if (data.base64) {
this.setState({
image: {
data: data.base64,
orientation: data.pictureOrientation === 1 ? 'portrait' : 'landscape',
height: data.height,
width: data.width
}
});
return;
}
})
.catch(reason => {
Log('takePickture().catch()', reason);
});
}
};
taking the picture, builds the image information into state which is rendered by this jsx:
<Image
source={{ uri: `data:image/jpeg;base64,${state.image.data}` }}
resizeMethod={'resize'}
resizeMode={'contain'}
></Image>
This all works fine for android, but a black screen is presented in iOS. ( I recently updated to the most current version, same issue )