Error: Failed to capture view snapshot on React Native 0.72.0

[n-ii-ma]

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]

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

[n-ii-ma]

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]

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

[timothyerwin]

I'm facing the same issue in android

 ERROR  Oops, snapshot failed [Error: Failed to capture view snapshot]

[n-ii-ma]

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

[paulsonnenschein]

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]

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]

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]

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]

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]

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]

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]

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?