Awesome Open Source
Awesome Open Source

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


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,118,848
Reactjs (170,726
Learning (75,790
Animation (17,734
Sketch (6,595
Animated (3,888
Photoshop (1,348