Rotation also requires you to use interpolate because the rotation transform properties must be given a value in degrees, or in radians. The most common is going to be degrees. The value provided would look like 90deg. However you can also use radians if you prefer.

You may want to just do a rotate which will rotate both x and y. However you can additionally rotate each piece independently.

Lets take a look at example of animating each of these separately.

export default class animations extends Component {
  state = {
    animation: new Animated.Value(0),
  };
  startAnimation = () => {
    Animated.timing(this.state.animation, {
      toValue: 1,
      duration: 1500,
    }).start(() => {
      this.state.animation.setValue(0);
    });
  };

  render() {
    const xInterpolate = this.state.animation.interpolate({
      inputRange: [0, 1],
      outputRange: ["0deg", "360deg"],
    });

    const yInterpolate = this.state.animation.interpolate({
      inputRange: [0, 0.5, 1],
      outputRange: ["0deg", "0deg", "180deg"],
    });

    const animatedStyles = {
      transform: [{ rotateX: xInterpolate }, { rotateY: yInterpolate }],
    };
    return (
      <View style={styles.container}>
        <TouchableWithoutFeedback onPress={this.startAnimation}>
          <Animated.View style={[styles.box, animatedStyles]} />
        </TouchableWithoutFeedback>
      </View>
    );
  }
}

We interpolate the X to do a full 360 degrees, however half way through the animation we will animate the y 180 degrees.

Live Demo