react-native-bpk-component-rating

2.0.0 • Public • Published

react-native-bpk-component-rating

Backpack React Native rating component.

Installation

npm install react-native-bpk-component-rating --save

Because this package ships with native code, it is also necessary to add some native dependencies to your RN project:

Android

Add the following configurations to gradle:

  1. Define the react-native-bpk-component-rating project in your settings.gradle file:
    include ':react-native-bpk-component-rating'
    project(':react-native-bpk-component-rating').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-bpk-component-rating/src/android')
  1. Add react-native-bpk-component-rating as a dependency in your app/module build.gradle file:
    dependencies {
      implementation project(':react-native-bpk-component-rating')
    }

If you have defined project-wide properties in your root build.gradle, this library will detect the presence of the following properties:

ext {
    compileSdkVersion   = 28
    targetSdkVersion    = 28
    minSdkVersion       = 21
    buildToolsVersion   = "28.0.3"
}

If you haven't or are using the pre compiled version bellow, it will use the values shown above.

Pre-compiled version

Alternatively, the pre-compiled version is available on Skyscanner's internal Artifactory. Make sure you have the infrastructure-maven registry configured and are logged in, then add the following dependency to your build.gradle file:

    dependencies {
      implementation 'net.skyscanner.backpack:react-native-bpk-component-rating:<version>'
    }

Note: The version should be the same used for the npm package.

Importing the bridge package

After you have installed the lib, import the BpkRatingPackage() in your React application:

import net.skyscanner.backpack.reactnative.rating.BpkRatingPackage 
 
....
 
@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new BpkRatingPackage()
    );
}

iOS

Add a dependency to your Podfile using the path to the NPM package as follows:

  pod 'react-native-bpk-component-rating', path: '../node_modules/react-native-bpk-component-rating'

Note that the react-native-bpk-component-rating depends on Backpack. If your Podfile also depends on this directly, both dependencies must be for compatible semver versions.

Usage

import React from 'react';
import { View } from 'react-native';
import BpkRating from 'react-native-bpk-component-rating';
 
const ratings = () => (
  <View>
    <BpkRating
      title={['Low title', 'Medium title', 'High title']}
      subtitle={['Low subtitle', 'Medium subtitle', 'High subtitle']}
      value={5}
      orientation="horizontal"
    />
    <BpkRating
      title="One title to rule them all"
      subtitle="One subtitle to rule them all"
      size="lg"
      value={9}
    />
  </View>
)

Props

Property PropType Required Default Value
title oneOfType(string, arrayOf(string)) true -
subtitle oneOfType(string, arrayOf(string)) true -
value object true -
orientation oneOf('horizontal', 'vertical') false 'horizontal'
size oneOf('xs', 'sm', 'base', 'lg') false 'base'
  • For title andsubtitle a string or array is supported. When providing an array you should provide an array with three items, for low, medium and high scores.

Versions

Current Tags

Version History

Package Sidebar

Install

npm i react-native-bpk-component-rating

Weekly Downloads

0

Version

2.0.0

License

Apache-2.0

Unpacked Size

62.9 kB

Total Files

30

Last publish

Collaborators

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