react-native-bpk-component-badge v6.0.1

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

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