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
;;;; const styles = StyleSheet; { return <View style=stylescontainer> <BpkButton type=BUTTON_TYPESprimary title="Book flight" onPress= {} /> <BpkButton type=BUTTON_TYPESfeatured title="Book flight" onPress= {} /> <BpkButton disabled type=BUTTON_TYPESdestructive title="Book flight" onPress= {} /> <BpkButton large type=BUTTON_TYPESprimary title="Book flight" onPress= {} /> <BpkButton type=BUTTON_TYPESfeatured title="Book flight" icon="baggage" onPress= {} /> <BpkButton type=BUTTON_TYPESprimary title="Book flight" icon="baggage" iconAlignment=ICON_ALIGNMENTSleading onPress= {} /> <BpkButton type=BUTTON_TYPESfeatured 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