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.
Related content
Last updated: Apr 17, 2026
