react-native-bpk-component-badge

6.0.1 • Public • Published

react-native-bpk-component-badge

Backpack React Native badge component.

Installation

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

Usage

import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import BpkBadge, { BpkBadgeIcons, BADGE_TYPES, BADGE_DOCKED_TYPES } from 'react-native-bpk-component-badge';
import BpkIcon, { icons } from 'react-native-bpk-component-icon';
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}>
        <BpkBadge message="Badge" accessibilityLabel="This is a badge" type={BADGE_TYPES.success} />
        <BpkBadge message="Badge" type={BADGE_TYPES.warning} />
        <BpkBadge message="Badge" type={BADGE_TYPES.destructive} />
        <BpkBadge message="Badge" type={BADGE_TYPES.inverse} />
        <BpkBadge message="Badge" type={BADGE_TYPES.light} />
        <BpkBadge message="Badge" type={BADGE_TYPES.outline} />
        <BpkBadge
          message="Badge"
          type={BADGE_TYPES.success}
          accessoryView={
            <BpkBadgeIcons
              icons={[<BpkIcon icon={icons.flight} />, <BpkIcon icon={icons.hotels} />]}
              separator="+"
            />
          }
        />
        <BpkBadge message="Badge" docked={BADGE_DOCKED_TYPES.start} type={BADGE_TYPES.warning} />
        <BpkBadge message="Badge" docked={BADGE_DOCKED_TYPES.end} type={BADGE_TYPES.destructive} />
      </View >
    );
  }
}

Props

Property PropType Required Default Value
accessibilityLabel string if message === null props.message
accessoryView element false null
docked oneOf('start', 'end') false null
message string false null
type oneOf('success', 'warning', 'destructive', 'light', 'inverse', 'outline') false warning

accessoryView

The accessory view allows for icons to be placed in front of the text inside the Badge component in conjunction with BpkBadgeIcons.

BpkBadgeIcons

Renders icons suitable to be placed inside a Badge.

Theme Props

  • badgeSuccessBackgroundColor
  • badgeWarningBackgroundColor
  • badgeDestructiveBackgroundColor
  • badgeSuccessTextColor
  • badgeWarningTextColor
  • badgeDestructiveTextColor

Props

Property PropType Required Default Value
icons arrayOf(BpkIcon) true -
itemStyle style false null
separator string false null

Readme

Keywords

none

Package Sidebar

Install

npm i react-native-bpk-component-badge

Weekly Downloads

0

Version

6.0.1

License

Apache-2.0

Unpacked Size

217 kB

Total Files

13

Last publish

Collaborators

  • anambl
  • skyscanner-koalasquad
  • gert-jan.vercauteren
  • frugoman
  • marianeumayer-skyscanner
  • ojcurt
  • shaundon