In android it does nothing and not showing any error logs. Works fine in iOS

[kuldipopenxcell]

bug report

In react native latest version (0.73.6) snapshot is not capturing in Android device. It works fine in IOS.

Version & Platform

npm ls react-native react-native-view-shot #
├─┬ @react-native-async-storage/[email protected]
│ └── [email protected] deduped
├─┬ @react-native-google-signin/[email protected]
│ └── [email protected] deduped
├─┬ @react-navigation/[email protected]
│ ├─┬ @react-navigation/[email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
├─┬ @react-navigation/[email protected]
│ └── [email protected] deduped
├─┬ @react-navigation/[email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected] invalid: "^4.1.0" from node_modules/agora-rn-uikit
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └─┬ @react-native/[email protected]
│   └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
└─┬ [email protected]
  └── [email protected] deduped

Platform: Android

Expected behavior

It should return with URI of the image

Actual behavior

It returns nothing

Sample Code

const MapPage = () => {
  const mapRef = useRef();
  const viewRef = useRef();
  const captureMap = async () => {
    try {
      // Capture map as image
      const uri = await viewRef.current.capture();
      console.log('uri', uri);
    } catch (error) {
      console.error('Error:', error);
      Alert.alert('Error', 'Failed to save PDF.');
    }
  };
  
  return(
    <View style={styles.container}>
          <ViewShot ref={viewRef} style={{flex: 1}}>
            <MapView
              ref={mapRef}
              style={{flex: 1}}
              scrollEnabled={false}
              provider={PROVIDER_GOOGLE}
              initialRegion={{
                latitude: 55.8622166,
                longitude: 12.388021,
                latitudeDelta: 0.0922,
                longitudeDelta: 0.0421,
              }}
              onTouchStart={handleTouchStart}
              onPanDrag={handlePanDrag}
              onTouchEnd={handleTouchEnd}>
              {lines.map((line, index) => (
                <Polyline
                  key={index}
                  coordinates={line}
                  strokeColor="#FF0000"
                  strokeWidth={3}
                />
              ))}
            </MapView>
          </ViewShot>
          <Button label="Capture screenshot" onPress={captureMap} />
        </View>
    )
}

[devethan]

In my case, always stuck in these code only in Android

      const uri = await viewRef.current.capture();

there's no error, just still going on. But iOS is working fine.

[kuldipopenxcell]

I tried with this code also but there is no error logs and no clue to fix this.

  const captureSnapshot = async () => {
    try {
      const uri = await captureRef(viewRef, {
        format: 'png', // You can change the format if needed
        quality: 1, // Quality of the image, from 0 to 1
      });

      // Do something with the captured image URI (e.g., save it to disk or display it)
      console.log('Snapshot URI:', uri);
    } catch (error) {
      console.error('Error capturing snapshot:', error);
    }
  };

[adaerodriguez]

Hi guys, any advance with this issue? I have the same problem with react-native 0.73.6, on ios works great, but with Android, nothing happens

Thanks!!

[kuldipopenxcell]

Hi guys, I have found the alternative for this. since this is not working well for Android. Here you can use React Native Skia: Snapshot Views | React Native

[connor-wj-kang]

Hi guys. The same problem here. But I came up with a workaround. Just capture the full screen. After that you can clip the full screen image to the shape whatever you want.

import { captureScreen } from "react-native-view-shot";

captureScreen({
  format: "jpg",
  quality: 0.8,
}).then(
  (uri) => console.log("Image saved to", uri),
  (error) => console.error("Oops, snapshot failed", error)
);

[jordanwegener]

Hi guys. The same problem here. But I came up with a workaround. Just capture the full screen. After that you can clip the full screen image to the shape whatever you want.

import { captureScreen } from "react-native-view-shot";

captureScreen({
  format: "jpg",
  quality: 0.8,
}).then(
  (uri) => console.log("Image saved to", uri),
  (error) => console.error("Oops, snapshot failed", error)
);

Tried this and still not working for me, still no file saved/blank when shared.

[nicodbsn]

Hi guys, I ran into the same issue as OP and found a workaround by switching from core API RN Share to react-native-share.

Keep using the ViewShot config but replace your capture function with this :

const onCapture = async () => {
    const uri = await captureRef(ref, {
      format: 'png',
      quality: 0.9,
    });

    await Share.open({url: uri});
};

For whatever reason, the core Share API seems to expose url param only for iOS, that is what should cause the issue on Android.

[YogeshwarSharma]

Resolve this in Android using React Native Patch Packages.

• yarn add patch-package postinstall-postinstall
• Make changes in Android react-native-view-shot
• npx patch-package react-native-camera
• To ensure the patch is applied automatically during installation, update your package.json with a postinstallscript: "scripts": { "postinstall": "patch-package" } react-native-view-shot+3.8.0.patch

[kbqdev]

@YogeshwarSharma Still not working.

[YogeshwarSharma]

Hope, You have used patch-package and applied react-native-view-shot+3.8.0.patch

[kbqdev]

Yes, i did. But mapview still missing. I try set collapsable to false/true but same result.

[kbqdev]

This is my captureOptions const options ={ format: 'png', quality: 1, result: 'tmpfile', snapshotContentContainer: false, handleGLSurfaceViewOnAndroid: true, useRenderInContext: false,} When i set handleGLSurfaceViewOnAndroid to true Mapview will appear but other view will not and handleGLSurfaceViewOnAndroid to false. Mapview will disappear.