Animated.event argMapping only setting first mapping in array

[JesperLekland]

• [x] I have reviewed the documentation
• [x] I have searched existing issues
• [x] I am using the latest React Native version

I have a ScrollView that animates pager style dots on each "page scroll". This works perfectly fine with an Animated.event with useNativeDriver: true. Now I want to animate something outside of the ScrollView but still based on its scroll value, i.e pass in an onScroll prop. I can't for the life of me figure out how to combine the inner onScroll (the one that I use to animate the pager style dots) with the one passed in through props.

Using Animated.event without useNativeDriver allows me to call both events with the event passed back through the ScrollViews onScroll but setting useNativeDriver to true kills that option (it's no longer a function).

animatedValue = new Animated.Value(0);
_onScroll = Animated.event(
  [{ nativeEvent: { contentOffset: { y: this.animatedValue }}}],
  // { useNativeDriver: true }
)

onScroll = (event) => {
  this.props.onScroll(event)
  // works only if useNativeDriver is false
  this._onScroll(event)
}

So my second options was to try to combine the two Animated.events into one, here I noticed that only the first mapping in the first argument to Animated.event is actually used. I'm assuming this is a bug based on what the documentation states. If you're not supposed to combine the values that way, then how would I go about solving my problem? See the snack for a minimal reproducible demo of the problem.

Environment

Environment:
  OS: macOS High Sierra 10.13.3
  Node: 9.3.0
  Yarn: 1.5.1
  npm: 5.5.1
  Watchman: 4.9.0
  Xcode: Xcode 9.2 Build version 9C40b
  Android Studio: 3.0 AI-171.4408382

Packages: (wanted => installed)
  react: 16.2.0 => 16.2.0
  react-native: 0.53.3 => 0.53.3

Steps to Reproduce

https://snack.expo.io/HJ1IUnP9z. Run the app, open the logs tab and scroll in the ScrollView, only one value is updated.

Expected Behavior

I would expect the "outer scroll" in the expo snack to log the same values as the inner scroll.

Actual Behavior

Only the inner animated value is updated through the native event

[react-native-bot]

Thanks for posting this! It looks like your issue may refer to an older version of React Native. Can you reproduce the issue on the latest release, v0.54?

Thank you for your contributions.

[JesperLekland]

@react-native-bot Yes! This is reproducible on both versions of React Native. My own project uses 0.53.3 but the Snack is on the latest version. I've updated the issue to reflect this

[hramos]

0.54 is the latest version, and Snack lags stable releases, so the Old Version label is accurate in this case.

[hramos]

Tagging as a Stack Overflow question as this looks like a request for help in implementing a particular animation.

[react-native-bot]

This issue looks like a question that would be best asked on Stack Overflow.

Stack Overflow is amazing for Q&A: it has a reputation system, voting, the ability to mark a question as answered. Because of the reputation system it is likely the community will see and answer your question there. This also helps us use the GitHub bug tracker for bugs only.

Will close this as this is really a question that should be asked on Stack Overflow.

[JesperLekland]

@hramos I've obviously phrased this the wrong way (tried to sneak a question in there 😅), I wanted to clearly state my reasoning for having more than one "mapping". The bug I want to report still exists however. An Animated.Event accepts an array of mappings but as far as I can tell it only actually maps the source to the first mapping in the array. Therefore I request this issue to be reopened. Or should I open a new one with better phrasing?

[react-native-bot]

This issue looks like a question that would be best asked on Stack Overflow.

Stack Overflow is amazing for Q&A: it has a reputation system, voting, the ability to mark a question as answered. Because of the reputation system it is likely the community will see and answer your question there. This also helps us use the GitHub bug tracker for bugs only.

Will close this as this is really a question that should be asked on Stack Overflow.

[JesperLekland]

@hramos Seems like we have a conflict with the @react-native-bot

[mistarA]

@JesperLekland did you find any solution to this? Facing the same and don't seem to find anything helpful.