Tutorial Intro

Let's get our Slimy in less than 5 minutes.

Overview

The idea of this training is to introduce the basic concepts of React Native animations with the Reanimated 2 library in a fun way.

Let me introduce you to who will be our loyal companion throughout our journey. This is Slimy!

Slimy is a 150x150 View. As simple as that. Maybe some styles here and there, but in the end it is just a view, because the goal of this training is to learn how to animate components that we'll use every day. You can customize it however you want, color, border radius, whatever. It’ll be the base for our project.

We'll use the basic concepts of animations to bring Slimy to life.

Reanimated

Reanimated is a powerful animation library, designed to create and run animations. Since JavaScript is single threaded, running animations on the JS thread can result in frame drops due to other app logic that might be running at the same time. Reanimated mitigates this by running the animations on the UI thread.

Getting Started

Get started by getting your own Slimy to build on.

What you'll need

Slimy runs on an Expo app.

• Node.js version 18.0 or above.
• Expo Go on your phone.
  • Otherwise, get an iOS Simulator or Android Emulator set up

Generate a Slimy app

To get started, clone the repository and run the following commands:

npm install
npm start

Then get Expo Go on your phone and scan the QR code that appears on the terminal. You can also run the app on a simulator.

You can now head into the next section to get started with the challenges!