CODEWITHSUNDEEP
react-native
monk
monk

Reputation: 163

With animated transform,onLayout cannot be triggered

My codes render a red square and moved using PanResponder.After release pan ,it move by animation transform. But onLayout() does not trigger when I drag the square. I want to get the square location anytime even in animating. What is the problem?

<View style={styles.container}>
    <Animated.View
      style={[
        styles.box,
        {
          transform: [
            { translateX: this._animatedValue.x },
            { translateY: this._animatedValue.y },
          ],
          backgroundColor: 'red'
        },
      ]}
      {...this._panResponder.panHandlers}
      onLayout={({ nativeEvent }) => { console.log(nativeEvent.layout) }}
    />
  </View>

Thanks!

Upvotes: 2

Views: 2644

Answers (1)

ajthyng
ajthyng

Reputation: 1275

If you want the current position at any time, and you're using a PanResponder to move track the user's touch while they move the square, I would suggest using a listener on your Animated.event() that I'm assuming you're passing to your onPanResponderMove handler.

It would look something like 

Animated.event([null, {dx: this._animatedValue.x, dy: this._animatedValue.y}], {
  listener: ({nativeEvent}) => {
    //nativeEvent has your x and y position in it
  }
})

Here's the React Native docs on Animated.event(), which have an example showing how to use it in a PanResponder, though they're only tracking on the X direction.

Upvotes: 2

Related Questions