Nighttime Pachinko Marathon
    Wondering what’s next for npm?Check out our public roadmap! »

    react-native-flat-button

    1.0.6 • Public • Published

    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

    Prop Type Default Description
    type string(required) - Type of button. Use predefined types: 'primary', 'neutral', 'warn', 'positive', 'negative', 'info' or use 'custom'
    backgroundColor string '#34495e' Sets button's background color.
    borderColor string '#2c3e50' Sets button's border color.
    borderRadius number 8 Sets button's border radius.
    shadowHeight number 4 Sets button's border shadow.
    borderLeftWidth number 0.5 Sets button's border left shadow.
    borderRightWidth number 0.5 Sets button's border right shadow.
    activeOpacity number 0.9 Sets button's onpressing transparency. (It should be between 0 to 1)
    containerStyle View.propTypes.style {justifyContent: 'center',alignItems: 'center'} Sets button's style (Same as TouchableOpacity)
    contentStyle Text.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)

    Install

    npm i react-native-flat-button

    DownloadsWeekly Downloads

    14

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    11.1 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar