react-native-md-motion-buttons

react-native-md-motion-buttons (iOS / Android)

I wanted to re-create this animation with react-native (https://dribbble.com/shots/1945593-Login-Home-Screen)

Installation

npm install react-native-md-motion-buttons --save

Usage

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Button
} from 'react-native';
import { Login } from 'react-native-md-motion-buttons';
 
class Home extends Component {
  render() {
    return (<View style={[StyleSheet.absoluteFill, styles.container]}>
      <Text style={styles.welcome}>
        New screen
      </Text>
      <Button title="Reset" onPress={this.props.logout} />
 
    </View>)
  }
}
 
export default class examples extends Component {
  render() {
    const promise = () => new Promise((resolve, reject) => setTimeout(() => resolve(), 2000) );
 
    return (
        <Login.View style={styles.container} homeScreen={<Home />}>
 
          <Text style={styles.welcome}>
            Welcome to React Native!
          </Text>
          <Text style={styles.instructions}>
            To get started, edit index.ios.js
          </Text>
          <Text style={styles.instructions}>
            Press Cmd+R to reload,{'\n'}
            Cmd+D or shake for dev menu
          </Text>
 
          <Login.Button
              onPress={promise}
              style={styles.button}
              color="rgb(255,155,57)" />
 
        </Login.View>
    )
  }
}

View Props

Prop	Type	Description
children	ReactElement<any>	React Element(s) to render. Button must be a direct child.
homeScreen	ReactElement<any>	New screen to render after the animation. <View> expose a logout function as a prop to this Component
style	StyleSheet<any>	Apply style to the View

Button Props

Prop	Type	Description
title	?String	Button title. Default : 'Login'
color	?String	Text color. Default: 'white'
style	StyleSheet<any>	Apply style to the Button. backgroundColor is required
onPress	() => Promise>	Handle button click. Must returned a promise

Roadmap

Next release

• Add ripple effect for button
• Add a Floating Action Button (FAB) which will move to the center (like inVision dribble)