npm

Need private packages and team management tools?Check out npm Orgs. »

react-native-bpk-component-button

11.0.4 • Public • Published

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
  1. 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'
  1. 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') false null

Theme Props

Primary

  • buttonPrimaryTextColor
  • buttonPrimaryGradientStartColor
  • buttonPrimaryGradientEndColor

Secondary

  • buttonSecondaryTextColor
  • buttonSecondaryBackgroundColor
  • buttonSecondaryBorderColor

Featured

  • buttonFeaturedTextColor
  • buttonFeaturedGradientStartColor
  • buttonFeaturedGradientEndColor

Destructive

  • buttonDestructiveTextColor
  • buttonDestructiveBackgroundColor
  • buttonDestructiveBorderColor

All button types

  • buttonBorderRadius (Optional, doesn't apply when iconOnly={true})

Keywords

none

install

npm i react-native-bpk-component-button

Downloadsweekly downloads

115

version

11.0.4

license

Apache-2.0

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
Report a vulnerability