gre / react-native-view-shot

Snapshot a React Native view and save it to an image
https://github.com/gre/react-native-view-shot-example
MIT License
2.64k stars 344 forks source link

Failed to capture view snapshot #489

Open nguyenhuynhdeveloper opened 1 year ago

nguyenhuynhdeveloper commented 1 year ago

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

{ // this?.svg = ref; }}> {renderPath()} {/** 現在、一筆書きしている最中のパスの描画 */}
</View>
n-ii-ma commented 1 year ago

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

Akshaybagai52 commented 1 year ago

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 commented 12 months ago

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 commented 11 months ago

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 commented 11 months ago

I found my error: `

{labels?.join('\n')} }> {labels?.join('\n')} ` 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 commented 10 months ago

Any updates why on Android MaskedView is not captured?

DmitryB11 commented 10 months ago

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 commented 9 months ago

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 commented 2 months ago

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 commented 1 month ago

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 commented 3 weeks ago

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!