react-native-multi-state-button v1.0.5

react-native-multi-state-button

A simple react-native multi-state button

Demo

Setup

Install it with:

npm install --save react-native-multi-state-button , or

yarn add react-native-multi-state-button.

Usage

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Dimensions
} from 'react-native';
import MSButton from 'react-native-multi-state-button';
const { width, height } = Dimensions.get('window')

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      index: 'not selected'
    }
  }

  render() {
    let { index } = this.state;
    return (
      <View style={styles.container}>
        <MSButton 
          width={width - 32}
          buttonsList={[ 'PEOPLE', 'ALL', 'ITEMS' ]} 
          onStateChange={(index => this.setState({index}))} />
        <Text style={styles.instructions}>
          Selected Index: {index}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    padding: 16
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginTop: 16,
  },
});

props