How to translateX, translateY to a certain coordinate rather than a relative point?

Question

My question is about using translateX and translateY in react and/or react-native animations, to animate an object to a certain point.

These two transformations move an object relative to the existing point.

But for the scenario, the existing coordinate is not important and I want to assure the object moves to a certain point wherever it may exist in the screen.

Additional limitation is, I can not animate styles top, bottom, left and right because in react-native, if we animate these styles then we can not use the useNativeDriver={true} directive which causes performance problems.

Answer 1

You can use the onLayout prop to get position (relative to parent) and height/width on any View component.

Something like this should work. You might need to get position of more parent View components, depending on your current structure.

componentDidMount() {
  this.animatedValue = new Animated.Value(0);  
}

animate() {
  const { parentYPosition } = this.state;
  Animated.Timing(this.animatedValue, {
    toValue: FINAL_POSITION - parentYPosition
  }).start(); 
}

render() {
  return (
    <View 
      onLayout={event => {
        const { y } = event.nativeEvent.layout;
        this.setState({parentYPosition: y})
      }}
    >
      <Animated.View 
        style={{
          position: 'absolute',
          top: 0, 
          transform: [
          {
            translateY: this.animatedValue
          }
      />
    />
  );
}

https://facebook.github.io/react-native/docs/view#onlayout