onScroll animation with useNativeDriver on iOS doesn't work after re-render

Repro: https://snack.expo.io/SkkqUA4KG Possibly same as: #12543

The conditions to reproduce seem to be:

• You have a ScrollView and are using an Animated.event onScroll
• You are on iOS with useNativeDriver: true
• A parent of a Animated.View that uses the animated contentOffset value re-renders (in this case, resulting in the child being unmounted and mounted again)

Expected result is that the Animated.View always animates based on the Animated.Value which is linked to the scroll position.

Actual result is that the scroll-linked animation works initially, but after the component that uses the animated value is destroyed and recreated, it doesn’t work. This only happens with the native driver. It also doesn’t happen if the same animated value is used continuously elsewhere (see comment in repro), so that could be a potential clue and workaround.

Environment

Environment:
  OS: macOS High Sierra 10.13.3
  Node: 9.6.1
  Yarn: 1.5.1
  npm: 5.6.0
  Watchman: Not Found
  Xcode: Xcode 9.1 Build version 9B55
  Android Studio: Not Found

Packages: (wanted => installed)
  react: 16.2.0 => 16.2.0
  react-native: https://github.com/expo/react-native/archive/sdk-25.0.0.tar.gz => 0.52.0

[dgreensp]

Aha! I think I have an idea what’s going on. A bug in the native animation driver.

Background (gleaned from reading the source): All AnimatedValues driven by the native driver get marked as “native” AnimatedValues. Native AnimatedValues have “native tags” which are id numbers used to look up nodes in the value graph on the native side of things, but they only have these tags when “attached.” AnimatedValues become attached when they are consumed, directly or transitively, such as by an Animated.View as a prop or style prop, and are detached when they stop being used. When they start being used again, they are attached again, but with a fresh native tag.

So, my theory is that Animated.event is setting up drivers in native land that identify AnimatedValues by their native tag, and when that native tag changes, the drivers stop working.

A workaround is to make sure the AnimatedValues that are the target of the Animated.event are never detached, which can be done by passing them as pretty much any prop to any component, e.g. dummyProp={myAnimatedValue} on your ScrollView. 😃 As far as I can tell, this doesn’t result in any extra work being done, it just keeps the child count of your AnimatedValue from going to zero, so it stays in memory in native land and has a stable native tag.

[dgreensp]

Yup, give it a shot

On Tue, Mar 13, 2018 at 6:25 PM fxwan [e-mail] wrote:

We actually use const AnimatedFlatList = Animated.createAnimatedComponent(FlatList) and attach onScroll prop with

      onScroll={Animated.event(
         [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
         {
           useNativeDriver: true,
           isInteraction: false
         }
       )}

so it will do the trick if set an opacity style like you do, right?

    style={{
      flex: 1,
      // this line is the workaround:
      opacity: Animated.add(1, Animated.multiply(0, this.state.scrollY))
    }}

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/facebook/react-native/issues/18347#issuecomment-372873278, or mute the thread https://github.com/notifications/unsubscribe-auth/AAJgpoGpfVgmTHFLnW837otuY1Aj84JMks5teHFngaJpZM4SoFgn .