Android: [Error: Failed to snapshot view tag #]

[Tadejo9]

bug report

Version & Platform

react: "18.0.0", react-native: "0.69.4",

Platform: Android, iOS works perfectly

Expected behavior

Getting url to image aka. taking a snapshot of a view.

Actual behavior

[Error: Failed to snapshot view tag #]

Steps to reproduce the behavior

yarn add react-native-view-snapshot

Called on button click

const takeSnapshot = async () => {
    if (snapshotViewRef.current !== null && snapshotViewRef.current.capture) {
        try {
            const uri = await snapshotViewRef.current.capture();
        } catch (error) {
            console.log(error)
        }
    }
}

Component <ViewShot ref={snapshotViewRef} options={{ fileName: path, format: "jpg", quality: 1 }}>...</ViewShot>

[nolife08021]

facing same issue. any solution for this?

[antoniel]

Same

[antoniel]

I believe I was able to figure it out. It seems to be related to forwardRef. Previously, I had a component structure like this:

<ViewShot
  ref={refViewShot}
  options={{
    fileName: 'file-name',
    format: 'jpg',
    quality: 0.9
  }}
>
  <Box>
    <Typography>Oooolha onde nois chegou</Typography>
  </Box>
</ViewShot>

After taking a brief look at the source code, I had an insight that ViewShot might be looking for the ref of the children. I'm not sure if that's actually the case, but once I wrapped the Box with a View, the error disappeared:

<ViewShot
  ref={refViewShot}
  options={{
    fileName: 'file-name',
    format: 'jpg',
    quality: 0.9
  }}
>
  <View>
    <Box>
      <Typography>Oooolha onde nois chegou</Typography>
    </Box>
  </View>
</ViewShot>

Hope this helps!

[nijarv]

Still getting same issue any help??

import { captureRef } from 'react-native-view-shot';

const viewRef = useRef(null);

captureRef(viewRef, {
  format: "png",
  quality: 1,
}).then((uri) => {
  console.log(uri);
})

<ImageBackground
  ref={viewRef}
  collapsable={false}
  source={{ uri: themeUriPath }}
  style={{ height: '100%', width: '100%' }}
>
    {renderLayers()}
</ImageBackground>