23

I'm I understanding it correctly ? Does this two set of code meant the same thing ?Does it have any difference in performance or reliability ?

<ScrollView
 onScroll={Animated.event(
  [{nativeEvent: {contentOffset: {y: this.state.scrollY}}}]
)}
>
</ScrollView>

AND

handleScroll(e){
  this.setState({ scrollY : e.nativeEvent.contentOffset.y });
}

<ScrollView
 onScroll={(e) => this.handleScroll(e)}
>
</ScrollView>

Thanks

4 Answers 4

17

it's not the same. Animated.event is used to map gestures like scrolling, panning or other events directly to Animated values. so in your first example this.state.scrollY is an Animated.Value. you would probably have code somewhere that initialized it, maybe your constructor would looks something like this:

constructor(props) {
  super(props);
  this.state = {
    scrollY: new Animated.Value(0)
  };
}

in your second example this.state.scrollY is the y value (just the number) that was triggered in the scroll event, but completely unrelated to animation. so you couldn't use that value as you could use Animated.Value in animation.

it's explained here in the documentation

1
  • 7
    the fact that one is an Animated.Value and the other is not is exactly what makes the difference between the two pieces of code. what more would you expect? Apr 8, 2018 at 10:15
16

If you want to handle the scroll you can use it this way:

handleScroll = (event) => {
    //custom actions
}

<ScrollView
 onScroll={Animated.event(
[{ nativeEvent: {
    contentOffset: {
      x: this.state.scrollY
     }
  }
}],{
   listener: event => {
       this.handleScroll(event);
   }})
}>
</ScrollView>
0
9

According to this source code Animated.event traverses the objects passed as arguments of it until finds an instance of AnimatedValue.

Then this key (where the AnimatedValue has been found) is applied to the callback (onScroll) and the value at the key of the event passed to the scroll is assigned to this AnimatedValue.

In the code:

const animatedValue = useRef(new Animated.Value(0)).current;
...
onScroll={Animated.event(
  [{nativeEvent: {contentOffset: {y: animatedValue}}}]
)}

is the same as

const animatedValue = useRef(new Animated.Value(0)).current;
...
onScroll={({nativeEvent: { contentOffset: {y} }}) => {
  animatedValue.setValue(y);
}}

If your callback accepts more than one event (argument), then just put the mapping object at the needed index (thus the array as the argument of Animated.value.

onScroll={Animated.event(
  [
     {}, // <- disregard first argument of the event callback
     {nativeEvent: {contentOffset: {y: animatedValue}}} // <- apply mapping to the second 
  ]
)}


0
4

Yes there is a difference in semantic

 <ScrollView onScroll={Animated.event(
  [{nativeEvent: {contentOffset: {y: this.state.scrollY}}}]
)}></ScrollView>

The first one i.e the above Animated.event returns a function that sets the scrollview's nativeEvent.contentOffset.y to your current scrollY state which I assume is animated.

The other code just sets scrollY to your scrollView's e.nativeEvent.contentOffset.y and causes a rerender to your component

0

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.