I have a View containing an image with another view overlaying it. I wish to use captureRef to save the image with the overlay, but when ever I try this Expo Go crashes without leaving any logs or error messages. Is there anything that could be causing this?
//I have a button that calls this. This is what crashes the app
const savePicture = async () => {
const result = await captureRef(savedPicture, {
result: 'tmpfile',
})
}
// if photoData isn't undefined we render this
<View style={styles.container} ref={savedPicture}>
<Image source={{ uri: photoData.uri }} style={styles.camera}/>
<View style={styles.overlay}>
<View style={styles.shape}/>
</View>
</View>
What I'm trying to do is similar to this https://kyleclutter.medium.com/react-native-adding-overlay-date-stamp-to-photo-7c7299327004
Docs for captureRef: https://docs.expo.dev/versions/latest/sdk/captureRef/
CodePudding user response:
Okay so after hours and hours of trying things I found that the ref's View has to have a background color. No transparency. I don't know if this is a bug specifically with Expo or captureRef. Probably something with newer versions as it reportedly doesn't happen in older versions.
Hopefully this can help some of you frustrated devs out there.
Fixed Code:
<View style={[styles.container, {backgroundColor: 'black'}]} ref={savedPicture}>
<Image source={{ uri: photoData.uri }} style={styles.camera}/>
<View style={styles.overlay}>
<View style={styles.shape}/>
</View>
</View>