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 and click on image if you want view video:
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
rnpm link #auto linked libs to Xcode, or Android
react-native run-ios # Run ios simulator
react-native run-android # Run android simulator
Tutorial step by step
Coming soon...
Ecosystem flow
Packages
- React native router flux navigate scence easy
- React native vector icons easy use icon, and custom icon svg
More Documentation
If you want to a Master Animation in React Native you should read
- Animated in React Native for beginer
- Dynamic Animated Listview
- Animated from facebook
- Animated examples
- Animation book
- Understand Animated in React Native from CSS
- 40 tutorial for learn Sketch
- Video tutorial learn sketch