npmpackage.info

Gathering detailed insights and metrics for react-native-bpk-component-chip

react-native-bpk-component-chip - 6.0.1 | npmpackage.info

react-native-bpk-component-chip

Backpack Design System for the Web

6.0.1

522

Apache-2.0

TypeScript

130.29 kB

5.2

Installations

npm install react-native-bpk-component-chip

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

12.16.1

NPM Version

lerna/3.10.7/node@v12.16.1+x64 (darwin)

Pull Requests

Open

17

Total

3,718

Closed

819

Merged

2,882

Issues

Open

0

Total

133

Closed

133

Releases

223

37.10.0

Updated on Jul 04, 2025

37.9.1

Updated on Jul 01, 2025

37.9.0

Updated on Jun 25, 2025

37.8.0

Updated on Jun 17, 2025

37.7.1

Updated on Jun 11, 2025

37.7.0

Updated on Jun 04, 2025

View All 223 releases

Languages

TypeScript

JavaScript

SCSS

Shell

HTML

TypeScript (55.59%)

JavaScript (27.57%)

SCSS (16.7%)

Shell (0.13%)

HTML (0.02%)

Developer

Skyscanner

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

Apache-2.0 License

522 Stars

8,385 Commits

205 Forks

121 Watchers

111 Branches

188 Contributors

Updated on Jul 10, 2025

Maintainers

View All 188 Contributors

Package Meta Information

Latest Version

6.0.1

Package Id

react-native-bpk-component-chip@6.0.1

Unpacked Size

130.29 kB

Size

13.23 kB

File Count

NPM Version

lerna/3.10.7/node@v12.16.1+x64 (darwin)

Node Version

12.16.1

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

react-native-bpk-component-chip

Backpack React Native chip component.

Installation

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

Usage

1import React, { Component } from 'react';
2import { StyleSheet, View } from 'react-native';
3import { spacingBase } from 'bpk-tokens/tokens/base.react.native';
4import BpkChip, { BpkDismissibleChip } from 'react-native-bpk-component-chip';
5
6const styles = StyleSheet.create({
7  container: {
8    flex: 1,
9    justifyContent: 'center',
10    padding: spacingBase,
11  },
12});
13
14export default class App extends Component {
15  constructor() {
16    super();
17    this.state = {
18      flightsSelected: false,
19      showHotels: true,
20    };
21  }
22
23  dismiss = () => {
24    this.setState({
25      showHotels: false,
26    });
27  };
28
29  toggle = () => {
30    this.setState({
31      flightsSelected: !this.state.flightsSelected,
32    });
33  };
34
35  render() {
36    return (
37      <View style={styles.container}>
38        <BpkChip
39          accessibilityLabel="Toggle flights"
40          label="Flights"
41          onPress={this.toggle}
42          selected={this.state.flightsSelected}
43        />
44        { this.state.showHotels &&
45          <BpkDismissibleChip
46            accessibilityLabel="Remove hotels"
47            label="Hotels"
48            onPress={this.dismiss}
49          />
50        }
51      </View>
52    );
53  }
54}

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

No vulnerabilities found.

10

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

10

Maintained

Determines if the project is "actively maintained".

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

10

Packaging

Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.

1

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 1

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/_build.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/_build.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/_build.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/_build.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/_build.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/_build.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/_build.yml:59: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/_build.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/_build.yml:72: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/_build.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/_build.yml:74: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/_build.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/_build.yml:80: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/_build.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/_build.yml:89: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/_build.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/_build.yml:113: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/_build.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/_build.yml:115: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/_build.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/_build.yml:121: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/_build.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/_build.yml:130: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/_build.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/label-check.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/label-check.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:47: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:49: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:55: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:64: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:89: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:91: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:97: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:106: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/main.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/main.yml:113: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:126: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:128: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:134: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/main.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/main.yml:147: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/main.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/main.yml:163: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:47: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:49: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:55: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:64: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:90: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:92: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:98: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:107: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/pr.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/pr.yml:123: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:133: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:43: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:45: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:51: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:60: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:87: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:91: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:97: update your workflow using https://app.stepsecurity.io/secureworkflow/Skyscanner/backpack/release.yml/main?enable=pin
Info: 0 out of 48 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 5 third-party GitHubAction dependencies pinned
Info: 3 out of 3 npmCommand dependencies pinned

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

5.2

/10

Last Scanned on 2025-01-27

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

react-native-bpk-component-chip

Installations

Developer Guide

No

CommonJS

12.16.1

lerna/3.10.7/node@v12.16.1+x64 (darwin)

Pull Requests

17

3,718

819

2,882

Issues

0

133

133

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

react-native-bpk-component-chip

Installation

Usage

Props

BpkChip

Theme Props

BpkDismissibleChip

10

10

10

10

10

10

1

0

0

0

0

0

0

5.2

/10