Create animations in Vega using the Animated API

In this article, you’ll build an interactive button with the Animated API that moves to a random position when selected. You’ll start with the hello-world template and add animation functionality to create a smooth, interactive experience in your Fire TV app. Vega supports three main approaches for animations: the Animated API (built into React Native), React Native Reanimated, and Lottie. This tutorial focuses on the Animated API, which requires no additional dependencies and is perfect for learning animation fundamentals.

Prerequisites

Vega development environment set up
hello-world template project created
Basic knowledge of React Native and TypeScript
Vega Virtual Device for testing

Import Animated API and `useRef()`

Open your App.tsx file and update the imports at the top. Add useRef() to the React import and add Animated to the react-native imports.

import React, {useState, useRef} from 'react';  // Add useRef here
import {
  StyleSheet,
  Text,
  ImageBackground,
  View,
  Image,
  Animated  // Add Animated here
} from 'react-native';
import {Link} from './components/Link';

The useRef() hook creates a persistent reference for your animation value, while Animated provides React Native’s animation library for creating smooth animations.

Define the position reference

Inside the App component, add a position reference after the useState() line.

export const App = () => {
  const [image, setImage] = useState(images.vega);

  // Add this line:
  const position = useRef(new Animated.ValueXY({x: 0, y: 0})).current;

  const styles = getStyles();
  // ... rest of component

This creates a position reference using useRef() to store the x and y coordinates. This value persists across component re-renders.

Create the animation function

Add this function inside the App component, before the return statement.

const getRandomNumber = (min: number, max: number) => {
  return Math.random() * (max - min) + min;
};

const handleImagePress = () => {
  const randomX = getRandomNumber(-100, 100);
  const randomY = getRandomNumber(-100, 100);

  Animated.timing(position, {
    toValue: {x: randomX, y: randomY},
    duration: 1000,
    useNativeDriver: false,
  }).start();
};

This creates an animation that moves the image to a random position over 1 second (1000 milliseconds).

Wrap the image with Animated.View

Find the image View in your return statement and wrap it with Animated.View. Before:

<View style={styles.image}>
  <Image source={image} />
</View>

After:

<Animated.View style={[styles.image, position.getLayout()]}>
  <Image source={image} />
</Animated.View>

The position.getLayout() call applies the animated x and y values to the View’s style.

Make the image clickable

Wrap the Image with a TouchableOpacity component to make it clickable. First, update your imports.

import {
  StyleSheet,
  Text,
  ImageBackground,
  View,
  Image,
  Animated,
  TouchableOpacity  // Add this
} from 'react-native';

Then update the image section.

<Animated.View style={[styles.image, position.getLayout()]}>
  <TouchableOpacity onPress={handleImagePress}>
    <Image source={image} />
  </TouchableOpacity>
</Animated.View>

Test the animation

Build and run the project on the Vega Virtual Device:

npm install && npx react-native build-vega

vega run-app <your-package-file.vpkg>

Now when you select the image on the right side of the screen, it animates to a random position.

​Prerequisites

​Import Animated API and useRef()

​Define the position reference

​Create the animation function

​Wrap the image with Animated.View

​Make the image clickable

​Test the animation

​Related content