Animated Login View

The Animated Login View provides a unique visual appearance for the Login, Register pages.

Preview

The Animated Login View provides a unique visual appearance for the Login, Register pages. On successful login there will be shown an animation opening the background for the content (in most cases some sort of dashboard view).

Animation playing on successful login, registration

Code sample

import React from 'react';
import { View, Image } from 'react-native';


import { AnimatedLogin, Textfield, Button } from '@dormakaba/digital-reactnative-visual';';

class Login extends React.Component {
  render() {
    const onAnimationDone = () => {
      // navigate to dashbord view
    }

    const onPress = () => {
      this.loginView.animate();
    }

    return (
      <AnimatedLogin
        ref={(ref) => this.loginView = ref}
        onAnimationDone={onAnimationDone}
        logo={<Image source={require('../../assets/img/appicon.png')} style={{ width: 76, height: 76 }} />}
        footer={(
          <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
            <Text>APP Version: 1.0.0</Text>
            <Text>API Version: 1.2.1</Text>
          </View>
        )}
      >
        <Textfield label="Username" />
        <Textfield label="Password" />
        <View style={{ marginTop: 20, flexDirection: 'row', justifyContent: 'flex-end' }}>
          <Button onPress={onPress} primary>Login</Button>
        </View>
      </AnimatedLogin>
    );
  }
}

Hints

Trigger animation on state change (redux)

In case you're using redux you might trigger the success animation onComponentWillReceiveProps based on state change like:

  // isAuthenticated get passed in eg. via redux state
  componentWillReceiveProps({ isAuthenticated }) {
    const { navigation } = this.props;
    if (isAuthenticated) this.loginView && this.loginView.animate();
  }

Usage on pages without animations

For using just the background and look & feel without the need of playing the animation there is the LoginAreaView