Skip to content

zecaptus/react-native-md-motion-buttons

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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)