JavaScript
Switch branches/tags
Nothing to show
Clone or download
1
Latest commit 422e26f Mar 11, 2018
Permalink
Failed to load latest commit information.
examples update propTypes Mar 11, 2018
src update propTypes Mar 11, 2018
.gitignore add example Apr 20, 2017
.npmignore Add Ripple Component Apr 24, 2017
LICENSE Initial commit Apr 10, 2017
README.md Add Ripple Component Apr 24, 2017
index.js Add Ripple Component Apr 24, 2017
package.json update propTypes Mar 11, 2018
scripts.js Add Ripple Component Apr 24, 2017
yarn.lock update propTypes Mar 11, 2018

README.md

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

npm version

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

Example

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)