Building an Animated List in React Native with Reanimated | Beginners Tutorial 2023

Learn how to build an animated list in React Native using the Reanimated library. It’s designed for beginners who want to add smooth transitions when adding or removing items from a list. You’ll see how to set up a new Expo project, configure Reanimated, and create reusable components for the list and cards.

The tutorial covers styling the cards with images and text, managing state with React hooks, and preparing the project for animations. By the end, you’ll have a solid foundation to add various animations like slide, fade, and rotation to your React Native lists.

What's inside

• Creating a new Expo project and installing Reanimated
• Configuring Babel for Reanimated plugin
• Setting up components: CardList and Card
• Managing list data with React useState hook
• Rendering list items with ScrollView and mapping data
• Styling cards with images, text, and shadows
• Using SafeAreaView to handle device safe areas
• Preparing for animations with Reanimated

Creating a new Expo project and installing Reanimated

I start by creating a new Expo app using the command npx create-expo-app animated-list. After entering the project folder, it installs the react-native-reanimated package. Expo is used for simplicity, but the same approach works with React Native CLI.

This setup ensures you have a clean environment ready for building animated lists. The installation is quick, and the project is opened in Visual Studio Code for development.

Configuring Babel for Reanimated plugin

To enable Reanimated’s features, you need to modify the Babel configuration. The tutorial shows adding the Reanimated plugin to the babel.config.js file by including "react-native-reanimated/plugin" in the plugins array.

This step is crucial because it allows Reanimated to work properly with the JavaScript code and native animations. Without this configuration, animations won’t run as expected.

Setting up components: CardList and Card

The project structure includes a components folder with two main components: CardList and Card. CardList is responsible for rendering the list container and managing the data, while Card displays individual items.

I demonstrate creating these components with functional React syntax, exporting them properly, and importing them into App.js. This modular approach keeps the code organized and reusable.

Managing list data with React useState hook

Since the list will change dynamically, the tutorial uses React’s useState hook to manage the array of movie items. The initial data is a static array of objects with properties like id, title, description, and posterURL.

Using useState allows adding or removing items and triggering re-renders. This setup prepares the list for animated transitions when items change.

Rendering list items with ScrollView and mapping data

Inside the CardList component, a ScrollView wraps a container View that holds the list items. The data array is mapped to render a Card component for each movie.

Passing all movie properties as props to each Card makes it easy to display the relevant information. This pattern is straightforward and works well with React Native’s rendering model.

Styling cards with images, text, and shadows

I cover styling the cards to look visually appealing. The Card component uses Image for the poster, Text for title and description, and applies styles like width, height, margin, padding, border radius, and shadows.

Shadows are added with React Native’s shadow properties to give depth. The poster image is styled to fill the card width with a fixed height. These styles make the cards look polished and ready for animation.

Using SafeAreaView to handle device safe areas

To prevent content from overlapping device notches or edges, the Card component’s root View is replaced with SafeAreaView. This ensures the UI respects safe areas on iOS and Android devices.

Adding horizontal padding inside the container further improves layout spacing. This small detail improves the user experience on modern devices.

Preparing for animations with Reanimated

While I focus on setup and styling, it lays the groundwork for adding animations with Reanimated. By managing state and rendering cards dynamically, you can later add animated transitions for adding, removing, or updating list items.

The tutorial hints at using various animation types like slide, fade, bounce, and rotation, which you can implement next using Reanimated’s APIs.

Resources

CourseReact Native course

Fundamentals through shipping: the concepts behind the prompts, with lifetime access.

Premium resourcePro Membership

Access premium tutorials, source code, and exclusive content.