react-native-bpk-component-button

Backpack React Native button component.

Installation

1. Install the npm package:

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

2. 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'

3. 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