🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

This app use Animated for animation transition from other Scene, it’s easy and build fast.

Animation React Native

Documentation

Animated Authentication App

This app use Animated for animation transition from other Scence, it's easy and build fast. You should learn it.

Simple, clean, easy learn

Demo in Exponent App Real Device: Get app

Demo and click on image if you want view video:

Image

Design Tools

A long time, I design prototype in photoshop, it's helpful, but i have problems when convert from psd to App, it's not hard, but it spent many time of me. And i don't t know create animation in photoshop.

2 days ago, I found Sketch, and try it. After try it, bye bye photoshop.😭

Sketch, my new friend in design tools. I had learned 2 days ago, it's amazing, easy learning, and you should learn it instead learn Photoshop

Flinto convert prototype in Sketch to animation preview. Before start code in react native, you need design a transition for Scence, you can caculator timing duration, position easy, and you should do it, your app will be wonderful animation.

Zeplin It help you convert from idea design to App. It's easy export image, get distance from other component, get CSS, and more, ...

You should learn it 😘

Special thank

Thank you to Marc Andrew, it's tutorial design in sketch helpful with me.

Design Resoruces

You can download prototype design from here (Sketch file + Flinto file + Releway Fonts)

Note

My design on iPhone 6 size, if you run other iphone 5,4 or android size < 320pdi, style doesn't show good. It run good on:

  • Iphone 6 (+)
  • Iphone 7 (+)
  • Android phone (768px x 1280px or larger)

Requirement

  • React native 0.38
  • Xcode 8.1

Installation

git clone https://github.com/thanhtungdp/react-native-login-animated cd react-native-login-animated npm install react-native link # Auto link libs to Xcode, or Android react-native run-ios # Run app on iOS simulator react-native run-android # Run app on Android emulator 

Tutorial step by step

Coming soon...

Ecosystem flow

Image

Packages

More Documentation

If you want to a Master Animation in React Native you should read

Bonus


You May Also Like