npm

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

react-native-bpk-component-badge

5.0.6 • 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

Keywords

none

install

npm i react-native-bpk-component-badge

Downloadsweekly downloads

132

version

5.0.6

license

Apache-2.0

homepage

github.com

repository

Gitgithub

last publish

collaborators

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