10 React Native Features Worth Exploring This Weekend

Not a Medium Member? “Read For Free”

1. Animated.ValueXY.getTranslateTransform

Animated.ValueXY is an animated value that holds two numbers at once: x and y. It’s perfect for moving something around the screen.

To actually move a view with it, you need to turn those two numbers into a transform. You could write it yourself, but getTranslateTransform() does it for you.

In the demo, a square slides around the four corners of a box, forever.

Code:

const corners = [
  { x: LOOP_END, y: 0 },
  { x: LOOP_END, y: LOOP_END },
  { x: 0, y: LOOP_END },
  { x: 0, y: 0 },
];

export function GetTranslateTransformDemo() {
  const theme = useTheme();
  const position = useRef(new Animated.ValueXY({ x: 0, y: 0 })).current;

  useEffect(() => {
    const loop = Animated.loop(
      Animated.sequence(
        corners.map(toValue =>
          Animated.timing(position, {
            toValue,
            duration: 700,
            easing: Easing.inOut(Easing.cubic),
            useNativeDriver: true,
          }),
        )…