react-native-bpk-component-chip

Backpack React Native chip component.

Installation

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

Usage

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import { spacingBase } from 'bpk-tokens/tokens/base.react.native';
import BpkChip, { BpkDismissibleChip } from 'react-native-bpk-component-chip';
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: spacingBase,
  },
});
 
export default class App extends Component {
  constructor() {
    super();
    this.state = {
      flightsSelected: false,
      showHotels: true,
    };
  }
 
  dismiss = () => {
    this.setState({
      showHotels: false,
    });
  };
 
  toggle = () => {
    this.setState({
      flightsSelected: !this.state.flightsSelected,
    });
  };
 
  render() {
    return (
      <View style={styles.container}>
        <BpkChip
          accessibilityLabel="Toggle flights"
          label="Flights"
          onPress={this.toggle}
          selected={this.state.flightsSelected}
        />
        { this.state.showHotels &&
          <BpkDismissibleChip
            accessibilityLabel="Remove hotels"
            label="Hotels"
            onPress={this.dismiss}
          />
        }
      </View>
    );
  }
}

Props

BpkChip

Property	PropType	Required	Default Value
accessibilityLabel	string	true	-
onPress	func	true	-
label	string	true	-
disabled	bool	false	false
selected	bool	false	false
innerChipStyle	ViewStyle	false	null
type	oneOf(CHIP_TYPES)	false	primary

Note that on Android, style should be used for positional styling and innerChipStyle should be used for other styling. (On iOS, style and innerChipStyle are applied together so it doesn't matter which you use!)

Theme Props

• chipSelectedBackgroundColor
• chipSelectedTextColor
• chipOutlineSelectedBackgroundColor
• chipOutlineSelectedTextColor

BpkDismissibleChip

Property	PropType	Required	Default Value
accessibilityLabel	string	true	-
label	string	true	-
onPress	func	true	-
disabled	bool	false	false
innerChipStyle	ViewStyle	false	null
type	oneOf(CHIP_TYPES)	false	primary

Note that on Android, style should be used for positional styling and innerChipStyle should be used for other styling. (On iOS, style and innerChipStyle are applied together so it doesn't matter which you use!)