larsvinter/react-native-awesome-button

React Native Awesome Button

An <AwesomeButton /> component that creates a button depicting different states in terms of e.g. color and label text. When a new buttonState is passed to the component the button will animate transition to the new appearance specified upon initiation. You can also pass in different functions to be called on touch depending of the current state of the button.

Content

• Installation
• Usage Example
  • Simple Example
  • Advanced Example
• Component properties
• Roadmap
• Contributing

Installation

1. npm install react-native-awesome-button --save
2. Whenever you want to use it within React Native code you can: import AwesomeButton from 'react-native-awesome-button'
3. Use <AwesomeButton /> wherever you want :)

Usage Example

Simple Example

To use <AwesomeButton>, you need to import react-native-awesome-button and insert <AwesomeButton> comonent in the render function with the required properties. Just as it's done below:

import React, { Component } from 'react';
import {
  AppRegistry,
  View,
  StyleSheet
} from 'react-native';
import AwesomeButton from 'react-native-awesome-button';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    margin: 30,
    marginTop: 560
  }
});


class Simple extends Component {
  handleButtonPress() {
    console.log('I was pressed');
  }

  render() {
    return (
      <View style={styles.container}>
        <AwesomeButton
          states={{
            default: {
              backgroundStyle: {
                backgroundColor: 'red',
                minHeight: 60,
                alignItems: 'center',
                justifyContent: 'center',
                borderRadius: 30
              },
              onPress: this.handleButtonPress
            }
          }}
        />
      </View>
    );
  }
}

AppRegistry.registerComponent('Simple', () => Simple);

In this example, a simple button with only one appearance and onPress-function will be rendered. This would produce something like this:

To run this example yourself, you need to do the following:

1. Clone the full source code from github: git clone [email protected]:larsvinter/react-native-awesome-button.git
2. Change to the proper directory of the simple example: cd react-native-awesome-button/examples/Simple
3. Install dependencies: npm install
4. For ios: Open the project in Xcode and hit 'run' (the project is inside 'ios' folder) (remember to restart the packager)

Advanced Example

This shows how you might implement an animated button that transitions to a new state upon e.g. a user press. Notice that you create an object that specifies the different states and then pass the prop buttonState to the button, when you want it to transition to a new appearance. You can have an unlimited number of possible states for a button.

import React, { Component } from 'react';
import {
  AppRegistry,
  View,
  StyleSheet
} from 'react-native';
import AwesomeButton from 'react-native-awesome-button';
import { Icon } from 'react-native-material-design';


const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    margin: 30,
    marginTop: 560
  }
});

export default class Advanced extends Component {
  constructor(props) {
    super(props);
    this.state = {
      buttonState: 'idle'
    };
    this.handleLogin = this.handleLogin.bind(this);
  }

  handleLogin() {
    this.setState({ buttonState: 'busy' });
    setTimeout(() => {
      this.setState({ buttonState: 'success' });
    }, 2500);
  }

  render() {
    return (
      <View style={styles.container}>
        <AwesomeButton
          states={{
            idle: {
              text: 'Log In',
              icon: <Icon name="person" color="rgba(255, 255, 255, .9)" />,
              iconAlignment: 'left',
              backgroundStyle: {
                backgroundColor: 'blue',
                minHeight: 60,
                alignItems: 'center',
                justifyContent: 'center',
                borderRadius: 30
              },
              labelStyle: {
                color: 'white',
                alignSelf: 'center',
                marginLeft: 10
              },
              onPress: this.handleLogin
            },
            busy: {
              text: 'Loggin In',
              spinner: true,
              spinnerProps: {
                animated: true,
                color: 'white'
              },
              backgroundStyle: {
                backgroundColor: 'darkblue',
                minHeight: 60,
                alignItems: 'center',
                justifyContent: 'center',
                borderRadius: 30
              }
            },
            success: {
              text: 'Logged In',
              backgroundStyle: {
                backgroundColor: 'green',
                minHeight: 60,
                alignItems: 'center',
                justifyContent: 'center',
                borderRadius: 30
              }
            }
          }}
          transitionDuration={400}
          buttonState={this.state.buttonState}
        />
      </View>
    );
  }
}


AppRegistry.registerComponent('Advanced', () => Advanced);

In this example, a login-button with three different appearances will be rendered. This would produce something like this (in 3 steps):

To run this example yourself, you need to do the following:

1. Clone the full source code from github: git clone [email protected]:larsvinter/react-native-awesome-button.git
2. Change to the proper directory of the advanced example: cd react-native-awesome-button/examples/Advanced
3. Install dependencies: npm install
4. Open the project in Xcode and hit 'run' (the project is inside 'ios' folder) (remember to restart the packager)

Component properties

Definition of each key-value pair in the states objects

Each state in the states object should have a unique key. For each of these keys you need to specify an object. This object will hold all parameters that are specific for the button when in the given state. Each of these objects can have one or more of these key-value pairs:

Versions

v 1.8.0

• Added feature to include an icon (any View will be accepted) to left or right hand side of text (see Advanced example)
• Fixed linting errors in examples

v 1.7.0 Major refactoring adding several improvements (and a few breaking changes):

• Background Style now accepts same styling properties as the component View
• Label Style now accepts same styling properties as the component Text
• Addressed several bugs raised
• Added eslinting (using airbnb preset)

Roadmap

• Add tests
• Add animations on other props (e.g. labelStyle or width)
• Add smooth fade in/out of text at "center timing" of animation to sync effects
• Add Android examples

Contributing

If you would like to refactor or help with new features, please create a separate branch, make your changes, commit, push and submit a pull-request.