Awesome Open Source
Awesome Open Source

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

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

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,536,557
Reactjs (75,732
Android (41,687
Ios (19,606
React Native (11,823
Animation (5,233
Material Design (3,509
Material (1,579
Button (777
Transition (573
Motion (327
Invision (18
Related Projects