react-native-flat-button

npm version

Flat button component for react-native

react-native flat button

Installation

npm i react-native-flat-button --save

API

PropTypeDefaultDescription
typestring(required)Type of button. Use predefined types: 'primary''neutral''warn''positive''negative''info' or use 'custom'
backgroundColorstring'#34495e'Sets button’s background color.
borderColorstring'#2c3e50'Sets button’s border color.
borderRadiusnumber8Sets button’s border radius.
shadowHeightnumber4Sets button’s border shadow.
borderLeftWidthnumber0.5Sets button’s border left shadow.
borderRightWidthnumber0.5Sets button’s border right shadow.
activeOpacitynumber0.9Sets button’s onpressing transparency. (It should be between 0 to 1)
containerStyleView.propTypes.style{justifyContent: 'center',alignItems: 'center'}Sets button’s style (Same as TouchableOpacity)
contentStyleText.propTypes.style{color: 'white',fontSize: 18,fontWeight: 'bold'}Sets button’s text style (Same as Text)

Example

import React, { Component } from 'react'
import {
  Alert,
  AppRegistry,
  StyleSheet,
  Text,
  View,
} from 'react-native'

import Button from 'react-native-flat-button'

class Example extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={{ fontSize: 20, fontWeight: 'bold' }}>
          Pre-Defined Buttons
        </Text>

        <Button
          type="primary"
          onPress={() => Alert.alert('Primary Button')}
          containerStyle={styles.buttonContainer}
        >
          Primary Button
        </Button>

        <Button
          type="positive"
          onPress={() => Alert.alert('Positive Button')}
          containerStyle={styles.buttonContainer}
        >
          Positive Button
        </Button>

        <Button
          type="negative"
          onPress={() => Alert.alert('Negative Button')}
          containerStyle={styles.buttonContainer}
        >
          Negative Button
        </Button>

        <Button
          type="neutral"
          onPress={() => Alert.alert('Neutral Button')}
          containerStyle={styles.buttonContainer}
        >
          Neutral Button
        </Button>

        <Button
          type="warn"
          onPress={() => Alert.alert('Warn Button')}
          containerStyle={styles.buttonContainer}
        >
          Warn Button
        </Button>

        <Button
          type="info"
          onPress={() => Alert.alert('Info Button')}
          containerStyle={styles.buttonContainer}
        >
          Info Button
        </Button>

        <Text style={{ fontSize: 20, fontWeight: 'bold' }}>
          Custom Buttons
        </Text>

        <Button
          type="custom"
          onPress={() => Alert.alert('Custom Button #1')}
          backgroundColor={"#1abc9c"}
          borderColor={"#16a085"}
          borderRadius={10}
          shadowHeight={5}
          containerStyle={styles.buttonContainer}
          contentStyle={styles.content}
        >
          Custom Button
        </Button>

        <Button
          type="custom"
          onPress={() => Alert.alert('Custom Button #2')}
          backgroundColor={"#9b59b6"}
          borderColor={"#8e44ad"}
          borderRadius={6}
          shadowHeight={8}
          activeOpacity={0.5}
          containerStyle={styles.buttonContainer}
          contentStyle={{ fontSize: 22, fontWeight: '900' }}
        >
          Custom Button
        </Button>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  buttonContainer: {
    width: 200,
    height: 50,
    marginVertical: 5
  },
  content:{
    fontSize: 22
  }
})

AppRegistry.registerComponent('Example', () => Example)