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}>

<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;
}}>

{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: #482 (comment)

[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:
`

  <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>

[bilalansri]

try changing style like
remove flex: 1 if had
it's working just by removing it