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.66k stars 345 forks source link

Error: Failed to capture view snapshot on React Native 0.72.0 #482

Open n-ii-ma opened 1 year ago

n-ii-ma commented 1 year ago

bug report

After upgrading to React Native 0.72.0, I get the Failed to capture view snapshot error.

It worked on React Native 0.71.11

Version & Platform

Aria@1.0.0-alpha.6 /Users/vedadi/Aria
├─┬ @gorhom/bottom-sheet@4.4.7
│ ├─┬ @gorhom/portal@1.0.14
│ │ └── react-native@0.72.0 deduped
│ └── react-native@0.72.0 deduped
├─┬ @notifee/react-native@7.8.0
│ └── react-native@0.72.0 deduped
├─┬ @react-native-async-storage/async-storage@1.18.2
│ └── react-native@0.72.0 deduped
├─┬ @react-native-clipboard/clipboard@1.11.2
│ └── react-native@0.72.0 deduped
├─┬ @react-native-community/netinfo@9.3.10
│ └── react-native@0.72.0 deduped
├─┬ @react-native-firebase/app@18.1.0
│ └── react-native@0.72.0 deduped
├─┬ @react-native-masked-view/masked-view@0.2.9
│ └── react-native@0.72.0 deduped
├─┬ @react-navigation/native@6.1.7
│ └── react-native@0.72.0 deduped
├─┬ @react-navigation/stack@6.3.17
│ ├─┬ @react-navigation/elements@1.3.18
│ │ └── react-native@0.72.0 deduped
│ └── react-native@0.72.0 deduped
├─┬ @sentry/react-native@5.6.0
│ └── react-native@0.72.0 deduped
├─┬ react-native-background-timer@2.4.1 (git+ssh://git@github.com/aria-khodro/react-native-background-timer.git#18cc30364d35492e2e5d6390f0b61fb9544d022f)
│ └── react-native@0.72.0 deduped
├─┬ react-native-bootsplash@4.7.2
│ └── react-native@0.72.0 deduped
├─┬ react-native-element-dropdown@2.9.0
│ └── react-native@0.72.0 deduped
├─┬ react-native-gesture-handler@2.12.0
│ └── react-native@0.72.0 deduped
├─┬ react-native-linear-gradient@2.7.3
│ └── react-native@0.72.0 deduped
├─┬ react-native-loading-spinner-overlay@3.0.1
│ └── react-native@0.72.0 deduped
├─┬ react-native-maps@1.7.1
│ └── react-native@0.72.0 deduped
├─┬ react-native-mmkv@2.10.0
│ └── react-native@0.72.0 deduped
├─┬ react-native-modern-datepicker@1.0.0-beta.91 (git+ssh://git@github.com/aria-khodro/react-native-modern-datepicker.git#1262b655a4585300bdb71043ebe0e11ffa391ecc)
│ └── react-native@0.72.0 deduped
├─┬ react-native-paper@5.8.0
│ └── react-native@0.72.0 deduped
├─┬ react-native-qrcode-svg@6.2.0 (git+ssh://git@github.com/aria-khodro/react-native-qrcode-svg.git#fbef3350002dc9a921fee1fc281886abdd5a908b)
│ └── react-native@0.72.0 deduped
├─┬ react-native-reanimated-carousel@3.4.0
│ └── react-native@0.72.0 deduped
├─┬ react-native-reanimated@3.3.0
│ └── react-native@0.72.0 deduped
├─┬ react-native-safe-area-context@4.6.3
│ └── react-native@0.72.0 deduped
├─┬ react-native-screens@3.22.0
│ └── react-native@0.72.0 deduped
├─┬ react-native-size-matters@0.4.0
│ └── react-native@0.72.0 deduped
├─┬ react-native-skeleton-placeholder@5.2.4
│ └── react-native@0.72.0 deduped
├─┬ react-native-svg-transformer@1.0.0
│ └── react-native@0.72.0 deduped
├─┬ react-native-svg@13.9.0
│ └── react-native@0.72.0 deduped
├─┬ react-native-toast-message@2.1.6
│ └── react-native@0.72.0 deduped
├─┬ react-native-view-shot@3.7.0
│ └── react-native@0.72.0 deduped
├─┬ react-native@0.72.0
│ └─┬ @react-native/virtualized-lists@0.72.5
│   └── react-native@0.72.0 deduped
└─┬ react-redux@8.1.1
  └── react-native@0.72.0 deduped

Platform: Only happens on Android

arasrezaei commented 1 year ago

expriencing same issue, no error occured and no uri has produced, expo sdk 49 react native 72.3 with new arch

n-ii-ma commented 1 year ago

expriencing same issue, no error occured and no uri has produced, expo sdk 49 react native 72.3 with new arch

Finally someone else reports this issue! I don't think this package is actively maintained anymore.

Would appreciate if anyone recommends an alternate package that works with new versions of RN.

Shankulkarni commented 1 year ago

Any update on this? I am facing the same issue on Android.

timothyerwin commented 1 year ago

I'm facing the same issue in android

 ERROR  Oops, snapshot failed [Error: Failed to capture view snapshot]
n-ii-ma commented 1 year ago

Until this package is updated in order to become compatible with RN v0.72+, it should be considered obsolete.

paulsonnenschein commented 1 year ago

I had this problem, but this seems to have fixed it for me: https://github.com/gre/react-native-view-shot/issues/7#issuecomment-521379462

n-ii-ma commented 1 year ago

Adding collapsable={false} to the View component which you want to capture temporarily fixes this issue.

Thanks to @paulsonnenschein (https://github.com/gre/react-native-view-shot/issues/482#issuecomment-1652097803) for pointing to the solution: https://github.com/gre/react-native-view-shot/issues/7#issuecomment-521379462

Akshaybagai52 commented 1 year ago

Can anyone tell me if they able to get the solution for this issue it is urgent for me to do that if there are any library which can replace this library then you can tell me

n-ii-ma commented 1 year ago

Can anyone tell me if they able to get the solution for this issue it is urgent for me to do that if there are any library which can replace this library then you can tell me

Did you try adding collapsable={false} to the View component which you want to capture?

nijarv commented 1 year 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>
dominik-mrugalski commented 9 months ago

Adding collapsable={false} to the View component which you want to capture temporarily fixes this issue.

Thanks to @paulsonnenschein (#482 (comment)) for pointing to the solution: #7 (comment)

I've checked this solution and it won't work for me (iOS was OK but android had an error). I had to change View to the ViewShot tag, and it started working.

fabiiomariiano commented 4 months ago

To me, unbelievable, what worked was removing a negative margin left from Video component.

import { Video } from 'expo-av'
 ....
return (
  <Video
    source={{ uri: props.url }}
    style={{
      position: 'absolute',
      top: 0,
      left: 0,
      width: '100%',
      height: '100%',
      marginLeft: '-10%',
    }}
  />
);

This way, always that the video is on screen, the error [Error: Failed to capture view snapshot] occurs.

After remove the marginLeft, came back to works fine o.O

JaifDev commented 2 months ago

Adding collapsable={false} to the View component which you want to capture temporarily fixes this issue.

Thanks to @paulsonnenschein (#482 (comment)) for pointing to the solution: #7 (comment)

Setting Collapsible to false is also not working, is there any alternative?