React Native Login Logout Animation

Login Logout Animation

We wanted to build something similar to the Invision Login Animation (as seen on Dribbble). The animated API of React Native was used for this effect. Basically React Native Login Logout Animation is a simple two page app with fluid animation based on our React Native Flat App design which is supported for both iOS and Android platforms. One can easily import it to any React Native project.

Currently we have 2 screens available login and homepage. Sidebar has also been included.

Modular components include:

• AnimatedButton
• AnimationOverlay
• FloatingAnimatedButton

Fluent API on the components includes:

• startAnimation()
• stopAnimation()

Modular components overview:

AnimatedButton and AnimationOverlay: On clicking the AnimatedButton the onPress function of AnimatedButton fires up a promise which on resolve starts the animation.

To achieve this animation effect we reduced the button width and displayed a spinner. When the promise gets resolved then the button zooms in to fill up the entire page and navigates to the home page. There is a hack! The actual button stays on the screen but AnimationOverlay starts the animation from the center of the button.

After successful login there is another component in the home page called FloatingAnimatedButton. When you click it the button moves to the centre of the screen which was accomplished using the device width and height dimensions.

Also when the home component renders there is a zoom out animation.

In Android there is a default ripple effect which comes with TouchableNativeFeedback in React Native. However on iOS it is not included out-of-the-box. To get the same effect we calculated the X and Y offset of the onPress event and then displayed a ripple overlay to mimic the native feedback of Android.

The animated app is highly configurable that includes the duration and color of animation.

In the coming days we will add some more pages along with animation and transitions. Stay Tuned.

Created by Sanket & Sankhadeep from GeekyAnts.

Please share and recommend if you like.