React-native-reanimated: Way to access animated value in JS?

[scottmas]

Hi, I have looked and looked but can't seem to find a way to access an animated value in JS. I'm definitely a novice to this all. All the examples in the Example folder are concerned solely with visual appearance. There are many use cases though where the JS thread actually needs to know the current value of the Animated value. For example, I'm trying to create a drag and drop interface with multiple options and I need to know precisely _where_ the animated value has come to rest (on drag end) so that I can calculate which drag option the user has selected.

Sorry if this is simply something I missed!

[wcandillon]

You can use call for that effect. Or on onChange might what you are looking for depending on your use case.
For instance:

        <Animated.Code>
        {
          () => call([val], ([val]) => alert(val))
        }
        </Animated.Code>

I hope this helps.

[scottmas]

That's it! Sorry, I simply missed it. There it was all along in the Code example (https://github.com/kmagiera/react-native-reanimated/blob/master/Example/code/index.js)

Thank you!

[sebqq]

hello @wcandillon is there any way to get values (run call's method callback) when lifecycle methods are triggered? for example componentDidUpdate or react-navigation's onFocus or any other. I would like to set StatusBar's barStyle according to scrollY value when the screen is focused. Btw great videos man!

[computerjazz]

@sinodko In cases like yours, I use Animated.Values as flags to trigger native events. Something like:

onUpdateFlag = new Value(0)
animVal = new Value(0)

componentDidUpdate() {
   this.onUpdateFlag.setValue(1)
}

doThisOnUpdate = ([val]) => {
  console.log(`component updated, my animated value is: ${val}`)
}

render() {
  return (
   <Animated.Code>
        {
          () => onChange(this.onUpdateFlag, [
             cond(this.onUpdateFlag, call([this.animVal]), this.doThisOnUpdate))
             set(this.onUpdateFlag, 0) 
         ])
        }
 </Animated.Code>
  )
}

[nathvarun]

You can use call for that effect. Or on onChange might what you are looking for depending on your use case.
For instance:

        <Animated.Code>
        {
          () => call([val], ([val]) => alert(val))
        }
        </Animated.Code>

I hope this helps.

So for example, if you're trying to log out the scroll position:

 <Animated.Code>
        {
          () => call([this.scrollY], ([val]) => console.log(val))
        }
 </Animated.Code>

[sebqq]

Is it alright to define first argument of onChange as array of two nodes?

[bmovement]

@sinodko In cases like yours, I use Animated.Values as flags to trigger native events. Something like:

onUpdateFlag = new Value(0)
animVal = new Value(0)

componentDidUpdate() {
   this.onUpdateFlag.setValue(1)
}

doThisOnUpdate = ([val]) => {
  console.log(`component updated, my animated value is: ${val}`)
}

render() {
  return (
   <Animated.Code>
        {
          () => onChange(this.onUpdateFlag, [
             cond(this.onUpdateFlag, call([this.animVal]), this.doThisOnUpdate))
             set(this.onUpdateFlag, 0) 
         ])
        }
 </Animated.Code>
  )
}

Love this method @computerjazz! Inspired me to make this little helper (although I'm sure this needs more development):

export const animatedCallback = (nodes, callback) => {
  const value = new Value(0);

  const trigger = () => {
    value.setValue(1);
  }

  const watcher = onChange(value, [
    cond(value, call(nodes, callback)),
    set(value, 0),
  ])

  return [trigger, watcher];
}

Basically, nodes is an array of animated nodes, and callback is a method ready to receive an array of scalar values. The method returns a method to trigger the callback, and a "watcher" that needs to be added to an Animated.Code block.

[bharatgupta99]

Hi, is there a way to get js value inside a callback method. For example, a callback method passed to Animated.ScrollView's onMonentumScrollEnd method?