Skip to content

zecaptus/react-native-md-motion-buttons

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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)

Releases

No releases published

Packages

No packages published