Neptune: Planet or Myth?

    react-native-md-motion-buttons

    1.1.0 • Public • Published

    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)

    Install

    npm i react-native-md-motion-buttons

    DownloadsWeekly Downloads

    12

    Version

    1.1.0

    License

    MIT

    Last publish

    Collaborators

    • captus