React Native Animation Series #1

Photo by Kelli Tungay on Unsplash

Hi there, it’s Alvaro, and today we are starting this new series with React Native!

What we’ll do here?

• Beautiful animations with React Native
• Explore all the capabilities with hand-made animations (zero additional libraries), the Animated API.
• Styled-Components!
• Redux (it maybe adds complexity but we can control our animations wherever we want!)

What do we need?

• A workspace
• Expo (node, IDE, etc)
• Hype to learn

Wanna start? Let’s go!

Today’s animation…

today’s animation

We’ll hide/show a side menu and change the status bar style.

Let’s start:

(all the yarn commands can be executed with npm)

expo init AnimatedMenu
cd AnimatedMenu
yarn add styled-components redux react-redux

Once everything is completed, create 2 components, “Dashboard.js” for the main components, an “Menu.js” for the menu. And a folder to save al the redux things (I like to have something like…