Slimy

Learn React Native animations in a fun way! Contribute with your creative animations to show all the possibilities!

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!

Screen Shot 2022-05-18 at 4 41 00 PM

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.

Get Started

Slimy runs on an Expo 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.

Go into the "My Slimy" screen, and jump into src/components/Slimy.tsx to complete the challenges.

Challenges

We'll organize the key concepts of animations in five challenges. These challenges were created to try and cover most of the concepts you'll need to create any animation you'd like, but the animations presented in each one are not very complicated. The idea is to use the challenges to learn and then be able to implement more logically complex animations that use those same core concepts.