https://github.com/zecaptus/react-native-md-motion-buttons

A simple animated transition based on the dribble from invision.
https://github.com/zecaptus/react-native-md-motion-buttons

android animation button invision ios javascript material material-design motion react react-native transition

Last synced: 21 days ago
JSON representation

A simple animated transition based on the dribble from invision.

• Host: GitHub
• URL: https://github.com/zecaptus/react-native-md-motion-buttons
• Owner: zecaptus
• License: mit
• Created: 2017-04-10T10:36:38.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-03-11T14:33:38.000Z (almost 7 years ago)
• Last Synced: 2024-11-15T21:15:53.533Z (27 days ago)
• Topics: android, animation, button, invision, ios, javascript, material, material-design, motion, react, react-native, transition
• Language: JavaScript
• Homepage:
• Size: 2.9 MB
• Stars: 88
• Watchers: 5
• Forks: 12
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-native - react-native-md-motion-buttons ★50 - Material design motion button inspired by inVision app. (Components / UI)
• awesome-reactnative-ui - react-native-md-motion-buttons - native-md-motion-buttons/master/examples/doc/button.gif)| (Others)
• awesome-react-native - react-native-md-motion-buttons ★50 - Material design motion button inspired by inVision app. (Components / UI)
• awesome-reactnative-ui - react-native-md-motion-buttons - native-md-motion-buttons/master/examples/doc/button.gif)| (Others)
• awesome-react-native - react-native-md-motion-buttons ★50 - Material design motion button inspired by inVision app. (Components / UI)
• awesome-react-native - react-native-md-motion-buttons ★50 - Material design motion button inspired by inVision app. (Components / UI)

README

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

[![npm version](https://badge.fury.io/js/react-native-md-motion-buttons.svg)](https://badge.fury.io/js/react-native-md-motion-buttons)

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

![Example](examples/doc/button.gif)

# Installation

`npm install react-native-md-motion-buttons --save`

# Usage

```jsx

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 (

      

        New screen

      

      

    )

  }

}

export default class examples extends Component {

  render() {

    const promise = () => new Promise((resolve, reject) => setTimeout(() => resolve(), 2000) );

    return (

        }>

          

            Welcome to React Native!

          

          

            To get started, edit index.ios.js

          

          

            Press Cmd+R to reload,{'\n'}

            Cmd+D or shake for dev menu

          

          

        

    )

  }

}

```

#### View Props

| Prop | Type | Description |

|---|---|---|

|**`children`**|`ReactElement`|React Element(s) to render. **Button must be a direct child.**|

|**`homeScreen`**|`ReactElement`|New screen to render after the animation. `` expose a `logout` function as a prop to this Component |

|**`style`**|`StyleSheet`|Apply style to the View|

#### Button Props

| Prop | Type | Description |

|---|---|---|

|**`title`**|`?String`|Button title.  _Default : 'Login'_|

|**`color`**|`?String`|Text color.  _Default: 'white'_|

|**`style`**|`StyleSheet`|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)