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:
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 😘
Thank you to Marc Andrew, it's tutorial design in sketch helpful with me.
You can download prototype design from here (Sketch file + Flinto file + Releway Fonts)
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)
- React native 0.38
- Xcode 8.1
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
Coming soon...
- React native router flux navigate scence easy
- React native vector icons easy use icon, and custom icon svg
If you want to a Master Animation in React Native you should read