Failed to capture view snapshot

[nguyenhuynhdeveloper]

Failed to capture view snapshot i have issue , when run android

// function CaptureScreen const handleCaptureScreen = () => { captureRef(viewShotRef, { format: 'png', quality: 0.8, result: 'base64', }).then(base64 => { const option = { url: 'data:image/jpg;base64,' + base64, }; callbackCaptureSignatureView(base64); console.log('signature option', option); }); }; <View style={{ position: 'absolute', top: 0, right: 0, left: 0, bottom: 0, backgroundColor: 'transparent', borderWidth: 1, // height: size.REM * 150, // height: 150, // borderColor: colors.BG_COLOR_HEADER, // borderBottomColor: colors.BG_COLOR_HEADER, // backgroundColor: '#fff', }} disabled={true}> <ViewShot ref={viewShotRef} disabled={true}> <View style={[styles.containerForIpad]} {...panResponder.panHandlers} // Quyết định có vẽ được trên view hay không > <Svg width="100%" height="100%" preserveAspectRatio="none" disabled={true} ref={ref => { // this?.svg = ref; }}> <G disabled={true}> {renderPath()} {/** 現在、一筆書きしている最中のパスの描画 */}

          <Path
            d={pointsToSvg(points)}
            stroke="red"
            strokeWidth={sizePont}
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeDasharray="4"
            fill="none"
          />
        </G>
      </Svg>
    </View>
  </ViewShot>
</View>

[n-ii-ma]

Try adding collapsable={false} to the View you want to capture: https://github.com/gre/react-native-view-shot/issues/482#issuecomment-1657083089

[Akshaybagai52]

Try adding collapsable={false} to the View you want to capture: #482 (comment)

Hey can you tell me in typescript it is not allowed to put collapsable={false} because there is no prop which is exporting from types in ViewShot tag is there any other way to do this or any alternate library

[n-ii-ma]

Try adding collapsable={false} to the View you want to capture: #482 (comment)

Hey can you tell me in typescript it is not allowed to put collapsable={false} because there is no prop which is exporting from types in ViewShot tag is there any other way to do this or any alternate library

You should add collapsable={false} to the View you want to capture and not the ViewShot tag. You don't necessarily have to use ViewShot. Instead, you can use captureRef and capture the View tag:

import { View } from 'react-native';
import React, { useRef } from 'react';
import { captureRef } from 'react-native-view-shot';

const Capture = () => {
  const viewRef = useRef();

  const captureComponent = async () => {
    const uri = await captureRef(viewRef);
    // Do whatever you want with the uri
  };

  return (
    <View ref={viewRef} collapsable={false}>
      ...
    </View>
  );
};

[prani95]

Try adding collapsable={false} to the View you want to capture: #482 (comment)

Hey can you tell me in typescript it is not allowed to put collapsable={false} because there is no prop which is exporting from types in ViewShot tag is there any other way to do this or any alternate library

You should add collapsable={false} to the View you want to capture and not the ViewShot tag. You don't necessarily have to use ViewShot. Instead, you can use captureRef and capture the View tag:

import { View } from 'react-native';
import React, { useRef } from 'react';
import { captureRef } from 'react-native-view-shot';

const Capture = () => {
  const viewRef = useRef();

  const captureComponent = async () => {
    const uri = await captureRef(viewRef);
    // Do whatever you want with the uri
  };

  return (
    <View ref={viewRef} collapsable={false}>
      ...
    </View>
  );
};

Got same error and this not worked to me

[prani95]

I found my error: ` <View style={props.style}>

  <MaskedView maskElement={
    <Text style={[styles.label, styleLabelAlign, styleLabelSize, styleLabelWeight, props.styleText]}>
      {labels?.join('\n')}
    </Text>
  }>
    <LinearGradient start={{ x: 0, y: 1 }} end={{ x: 1, y: 0 }} colors={[props.primaryColor, props.secondaryColor]}>
      <Text style={[styles.label, styleLabelAlign, styleLabelSize, styleLabelWeight, props.styleText, { opacity: 0 }]}>{labels?.join('\n')}</Text>
    </LinearGradient>
  </MaskedView>

`

with the maskedview i got the error, if i remove it it's all right. Obviously i need it so someone know how can i fix it? i already tried to put the backgroundcolor or the collapsable={false}

[DmitryB11]

Any updates why on Android MaskedView is not captured?

[DmitryB11]

Any solution for this on Android? I use svg Mask to solve this problem but because my component is complicated it is a lot of work and some elements like expo icons doesn't work with svg Mask. It would be great if you solve this problem, on iOS it works with no problem.

[nijarv]

I'm using ImageBackground from react-native and continue to encounter the error on Android, even after setting collapsible to false. However, it works perfectly on iOS.

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

[fabiiomariiano]

As I commented here #482 , one specific style was causing the error to me. I was already using the collapsable={false} and tried it with captureRef and captureScreen functions.

[tdvuanh]

I tried all the methods above but they did not fix my issue. I have a view inside a modal. The reason may be from Android, not this lib. When I see it in the Logcat of Android Studio. I got this error: java.lang.IllegalArgumentException: Software rendering doesn't support hardware bitmaps I don't know how to fix it now, cause I don't relate too much to android

Anybody can invest in this error?

[KimGarza]

Try adding collapsable={false} to the View you want to capture: #482 (comment)

Okay this was the most simplest, quickest suggestion ever that actually soled my issue.. but can you explain why I am totally confused why adding this onto my view worked!