react-native-reanimated: [iOS] ScrollView event fatal crash

Hey @piaskowyk, can we please also backport this to 2.x, since the diff that causes this issue is in that branch as well? 🙂

Fixed by: https://github.com/software-mansion/react-native-reanimated/pull/4403 The fix will be available since 3.2.0

Still happening in v3.0.2. This is happening to me on a FlatList. It wasn’t happening in version v2.14.4

Same here, tried to use withTiming but it still crashes. The list has only 1 item in it. If there are multiple items it doesn’t crash, I’m using FlashList and reanimated 3.0.1

@bnovarini I’ve also encountered this filckering, 100% it’s a math issue, try playing around with the [0, 64], [100, 41] values and the initial absolute position of the TabBar. This flickering was happening to me only on Android though, iOS was fine.

After updating to version 3.0.0 found the same problem. Adding withTiming and/or interpolate doesn’t solve the problem. In my case, the application crashes when the height of the component inside the Animated.ScrollView is animated to decrease.

@sunnylqm you’re right, me bad 🙏 that’s mean I need to make a release as soon as possible

heyy, i still have this issue on 2.15 and 2.17 on 2.14.4 works fine can anyone help me?

Still happening in v3.1.0. In addition, the withTiming + duration fix no longer seems to work (whereas it did work on v2.14.4).

Still happening on v2.14.4. Unfortunately, the withTiming workaround has some flickering.

Can confirm https://github.com/software-mansion/react-native-reanimated/pull/4403 fixes our crash.

After some few iterations, below is the solution I’ve come up with to fix the flicker/crash bug.

First, you need to determine the static height of the scrollview minus the height of the header, insets, tab bar, etc.

const insets = useSafeAreaInsets()
const dimentions = useWindowDimensions()

// The static height of the content within the screen
const contentHeight = useMemo(
  () =>
    dimentions.height -
    (insets.top + insets.bottom + HEADER_HEIGHT + SEARCH_BAR_HEIGHT + TAB_BAR_HEIGHT /* etc */),
  [insets.top, insets.bottom, dimentions.height],
)

Second, on the useAnimatedScrollHandler, you only want to update the scrollY.value if the scrolled height is smaller than the “actual” scrollview height. e.g.

const SCROLL_DRAG_AREA = 200
const scrollY = useSharedValue(0)
const scrollHandler = useAnimatedScrollHandler(
  {
    onScroll: (e) => {
      // If the "static" height is greater than the actual height
      // DO NOT update scroll value
      if (e.contentOffset.y + contentHeight + SCROLL_DRAG_AREA > e.contentSize.height) {
        return
      }

      // Safe
      scrollY.value = e.contentOffset.y
    },
  },
  [contentHeight],
)

Now you can interpolate the scroll value e.g.

const $animatedHeader = useAnimatedStyle(
  () => ({
    height: interpolate(
      scrollY.value,
      [0, SCROLL_DRAG_AREA],
      [HEADER_HEIGHT, 0],
      Extrapolation.CLAMP,
    ),
    opacity: interpolate(
      scrollY.value,
      [0, SCROLL_DRAG_AREA],
      [1, 0],
      Extrapolation.CLAMP,
    ),
  }),
)

The reason this works (at least on my case) is that the reanimated bug happens only if the actual content height of the scrollview is smaller than the static height when overScrollMode is enabled (default). The only drawback on this is that the header animated height is ignored during over scroll if there’s less content 🤷‍♂️

I hope this helps on someway while debugging the root cause, but for now this works as expected without the flicker/crash

Hey! I used the solution proposed by @valentinoConti as a quick fix to avoid crashing the app, however the scroll keeps flickering/bouncing with this approach. I’ve tried several durations and also tried both inside useAnimatedScrollHandler and wrapping the interpolate function. Both avoid crashing, but result in the flickering behavior.

Using v2.13.0

  const scrollHandler = useAnimatedScrollHandler((event) => {
    animatedOffsetY.value = withTiming(event.contentOffset.y, { duration: 10 })
  })

  const magicScroll = useAnimatedStyle(() => {
    const paddingTop = interpolate(animatedOffsetY.value, [0, 64], [100, 41], Extrapolate.CLAMP)
    return {
      paddingTop
    }
  })

Attached is a video showing the behavior

https://user-images.githubusercontent.com/49925472/204670604-130cdc08-4713-4482-aced-bc1e20c580ae.mp4