React-native-reanimated: Listener in Animated.event

[aeruhxi]

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

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

[AbdallaElabd]

Can't you use this node call(argsNodes, callback)? It's in the docs.

[aeruhxi]

I considered using it but I couldn't find any example on how I am supoosed to use it. Also, it's not clear what argsNodes is. A simple example could help.

[osdnk]

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

[aeruhxi]

Thanks for the explanation.

[zachgibson]

For anyone using expo and not seeing more than one log: #90

[Strate]

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
              }
            )}

[dihanmalik]

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
              }
            )}

Thank you for this solution bro. I came to this kind of logic where I need to animate my botttom tabBar component and also animating my header interpolated. Thanks for this, great job!

[geroale]

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
              }
            )}

@Strate Hello, I can't use this solution here because when I use Animated.call I can't pass as argument the variable y since it's not an animated node but a number. How could I solve this?
I am using v1.9.0

[jakub-gonet]

@geroale,
you always can create an Animated Value outside of event node, do set(yourNode, y) at start of the block and leave rest as it is

[Daavidaviid]

How would one do this and use FlatList with Reanimated 2 ? @jakub-gonet