question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Listener in Animated.event

See original GitHub issue
          onScroll={event(
            [
              {
                nativeEvent: {
                  contentOffset: {
                    y: this.scrollY
                  }
                }
              }
            ],
            {
              listener: () => {
                console.log('scrolling');
              }
            }
          )}

As in original Animated library, how do I pass a listener like this?

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:10 (3 by maintainers)

github_iconTop GitHub Comments

16reactions
Stratecommented, Oct 24, 2019

I would like to add another one example to use call, because it was unclear for me how to use call to solve requested issue: capture scroll position on JS side. For me there was an solution:

onScroll={Animated.event(
              [
                {
                  nativeEvent: {
                    contentOffset: {
                      y: y =>
                        Animated.block([
                          Animated.set(this.scrollY, y),
                          Animated.call(
                            [y],
                            ([offsetY]) => (this.listOffsetY = offsetY)
                          )
                        ])
                    }
                  }
                }
              ],
              {
                useNativeDriver: true
              }
            )}
6reactions
osdnkcommented, Aug 15, 2018

Thank you for this issue! let us suppose that you have some Animated.Value V which applies some style to some view.

const V = new Animated.Value();
// sth
<Animated.View
  style={{
    transform: [
      { translateX: V }
    ]
  }}
>
  /* sth */
</Animated.View>

In this case if you wish some code executed as listener for this value, simply use:

const wrappedV = block([
	call([V], r => console.log(r[0])),
	V
])

and

<Animated.View
  style={{
    transform: [
      { translateX: wrappedV }
    ]
  }}
>
  /* sth */
</Animated.View>

Now on each evaluation of V, wrappedV will be evaluated as well, but it will include its side-effect with this call node.

call accepts array of nodes which will be passed as array of current values to function given as second argument

Read more comments on GitHub >

github_iconTop Results From Across the Web

React-native animated.event custom onScroll listener
When you look at the source code: /** * Takes an array of mappings and extracts values from each arg accordingly, * then...
Read more >
Animated.event - React Native Animated for Beginners
Animated.event. This is just a helper function to map arbitrary data to Animated values. Check out the docs for their explanation ...
Read more >
Animated - React Native
Imperative API to attach an animated value to an event on a view. Prefer using Animated.event with useNativeDrive: true if possible. Is this ......
Read more >
Element: animationend event - Web APIs | MDN
The animationend event is fired when a CSS Animation has completed. If the animation aborts before reaching completion, such as if the element ......
Read more >
Animated and React Native ScrollViews | by evening kid
In today's chapter, let's learn about animated events with scroll views. This was first published as a video for the How To Animated...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found