search

software-mansion / react-native-reanimated

React Native's Animated library reimplemented
https://docs.swmansion.com/react-native-reanimated/
MIT License
9.04k stars 1.31k forks source link

[Android] `<Animated.ScrollView />` is crashing on `navigate.goBack()` when using `refreshControl` prop #4306

Closed vozaldi closed 1 year ago

vozaldi commented 1 year ago

Description

This issue occurs after I upgraded from v2 to v3 in React Native 0.71.4.

My app keep crashing when I opened a page and pressing back button (or executing navigation.goBack()).

I tried to reproduce the issue using bare React Native 0.71.4 project and installed both Reanimated v3 and latest React Navigation.

I found that these props are having weird behavior:

Whenever I add <Animated.ScrollView refreshControl={{....}} /> with children <Animated.View exiting={...} /> the app is crashing when navigating back.

<Animated.ScrollView
  refreshControl={(
    <RefreshControl refreshing={refreshing} />
  )}
>
  <Animated.View
    entering={ZoomIn}
    exiting={ZoomOut}
  />
</Animated.ScrollView>

Tested on Android device and emulator (Android 13, SDK 33). Crashing in both debug and production mode.

Steps to reproduce

Crash Repro:

  1. Clone or download the repo.
  2. Run the yarn android.
  3. In Home page, press "Go to Page A" button.
  4. In Page A, press "Check Crash" button or just navigate back using back button.
  5. The app crashes.

Not Crashing:

  1. In file PageA.tsx, comment one of these prop refreshControl or exiting
  2. Run the app and navigation works normally.

Snack or a link to a repository

https://github.com/vozaldi/repro-rn-reanimated-crash

Reanimated version

3.0.2

React Native version

0.71.4

Platforms

Android

JavaScript runtime

None

Workflow

React Native (without Expo)

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

acollazomayer commented 1 year ago

I am experiencing the same issue on android.

vozaldi commented 1 year ago

Update: tested on iOS and everything is working fine.

vozaldi commented 1 year ago

Update (2):

The issue disappeared when I changed the navigator from @react-navigation/stack to @react-navigation/native-stack. So the crash is only happening with @react-navigation/stack component.

However, @react-navigation/stack provides more customizable component which is not available in @react-navigation/native-stack.

vozaldi commented 1 year ago

@Latropos Thank you for helping to review this issue.

I have updated my repo to Reanimated v3.1.0 and the issue still occurs.

Latropos commented 1 year ago

@vozaldi Yes, I know. We are still working on good solution, but if you need a workaround, you can add an exiting animation to RefreshControl. 🙃

+ const AnimatedRefreshControl = Animated.createAnimatedComponent(RefreshControl);

<Animated.ScrollView
  refreshControl={(
-    <RefreshControl refreshing={refreshing} />
+    <AnimatedRefreshControl exiting={ZoomOut} refreshing={refreshing} />
  )}
>
  <Animated.View
    entering={ZoomIn}
    exiting={ZoomOut}
  />
</Animated.ScrollView>
vozaldi commented 1 year ago

Hi @Latropos

I have tested your updates, and it worked flawlessly 🚀

Thank you

Pipi144 commented 11 months ago

I still encounter this issue on Android!

npx react-native info: System: OS: macOS 13.5.1 CPU: (20) x64 Intel(R) Core(TM) i9-10910 CPU @ 3.60GHz Memory: 50.01 MB / 32.00 GB Shell: version: "5.9" path: /bin/zsh Binaries: Node: version: 21.2.0 path: /usr/local/bin/node Yarn: version: 1.22.21 path: /usr/local/bin/yarn npm: version: 10.2.3 path: /usr/local/bin/npm Watchman: version: 2023.11.20.00 path: /usr/local/bin/watchman Managers: CocoaPods: Not Found SDKs: iOS SDK: Platforms: