react-native-bpk-component-button

react-native-bpk-component-button

Backpack React Native button component.

Installation

• Install the npm package:

npm install react-native-bpk-component-button --save-dev

• Add some dependencies to your Podfile (iOS Only):

pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
pod 'React', :path => '../node_modules/react-native'
pod 'BVLinearGradient', :path => '../node_modules/react-native-bpk-component-button/node_modules/react-native-linear-gradient'

• react-native-bpk-component-button depends on react-native-bpk-component-icon make sure to follow the installation guide for the icon component for the different platforms

Note: This is necessary because react-native-bpk-component-button depends on react-native-linear-gradient.

Usage

import { StyleSheet, View } from 'react-native';
import React, { Component } from 'react';
import BpkButton, { BUTTON_TYPES, ICON_ALIGNMENTS } from 'react-native-bpk-component-button';
import { spacingBase } from 'bpk-tokens/tokens/base.react.native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: spacingBase,
  }
});

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <BpkButton
          type={BUTTON_TYPES.primary}
          title="Book flight"
          onPress={() => {}}
        />
        <BpkButton
          type={BUTTON_TYPES.featured}
          title="Book flight"
          onPress={() => {}}
        />
        <BpkButton
          disabled
          type={BUTTON_TYPES.destructive}
          title="Book flight"
          onPress={() => {}}
        />
        <BpkButton
          large
          type={BUTTON_TYPES.primary}
          title="Book flight"
          onPress={() => {}}
        />
        <BpkButton
          type={BUTTON_TYPES.featured}
          title="Book flight"
          icon="baggage"
          onPress={() => {}}
        />
        <BpkButton
          type={BUTTON_TYPES.primary}
          title="Book flight"
          icon="baggage"
          iconAlignment={ICON_ALIGNMENTS.leading}
          onPress={() => {}}
        />
        <BpkButton
          type={BUTTON_TYPES.featured}
          title="Book flight"
          icon="baggage"
          iconOnly
          onPress={() => {}}
        />
      </View>
    );
  }
}

Props

Property	PropType	Required	Default Value
onPress	func	true	-
title	string	true	-
accessibilityLabel	string	false	props.title
disabled	bool	false	false
icon	oneOf(string, element) Strings must be a BpkIcon	false	null
iconAlignment	oneOf('leading', 'trailing')	false	trailing
iconOnly (iOS only)	bool	false	false
large (iOS only)	bool	false	false
theme	See Theme Props below	false	null
type	oneOf('primary', 'featured', 'secondary', 'destructive', 'outline')	false	null

Theme Props

Primary

• buttonPrimaryTextColor
• buttonPrimaryGradientStartColor
• buttonPrimaryGradientEndColor

Secondary

• buttonSecondaryTextColor
• buttonSecondaryBackgroundColor
• buttonSecondaryBorderColor

Featured

• buttonFeaturedTextColor
• buttonFeaturedGradientStartColor
• buttonFeaturedGradientEndColor

Destructive

• buttonDestructiveTextColor
• buttonDestructiveBackgroundColor
• buttonDestructiveBorderColor