Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

backpack-react-native

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

backpack-react-native

> Backpack is a collection of design resources, reusable components and guidelines for creating Skyscanner's products.

25.0.0
latest
Source
npm

Version published: 7 months ago

Maintainers: 7

Created: 5 years ago

Source

Backpack Design System for React Native

Backpack is a collection of design resources, reusable components and guidelines for creating Skyscanner's products.

Quick links

Usage

Installation

npm install backpack-react-native --save

Android

From source

Our Android code is written in Kotlin, so in order to compile it from source you need to have org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" in the classpath.

Add the following your root build.gradle file:

buildscript {
  ext.kotlin_version = '1.5.21'
  dependencies {
    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
  }
}

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

  ext {
      compileSdkVersion   = 30
      targetSdkVersion    = 30
      minSdkVersion       = 26
  }

Define the backpack-react-native project in your settings.gradle file:

  include ':backpack-react-native'
  project(':backpack-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/backpack-react-native/android')

Add bpk-appearance as a dependency in your app/module build.gradle file:

    dependencies {
      implementation project(':backpack-react-native')
    }

Pre compiled

Alternatively, the pre compiled version is available on Skyscanner's internal Artifactory.

    dependencies {
      implementation 'net.skyscanner.backpack:bpk-appearance:<version>'
    }

iOS

From source

Add the following dependencies to your Podfile using the path to the NPM package as follows:

  pod 'BackpackReactNative', path: '../node_modules/backpack-react-native/ios/BackpackReactNative'
  pod 'BVLinearGradient', :path => '../node_modules/react-native-linear-gradient'

Third party libs

This package depends on react-native-maps and its native components need to be integrated manually by following their instructions.

Configuration

Android

Add the native packages to the getPackages function in your MainActiviy.

override fun getPackages(): List<ReactPackage> {
  return Arrays.asList(
        MainReactPackage(),
        ...
        MapsPackage(),
        LinearGradientPackage(),
        CalendarPackage(),
        DialogPackage(),
        BpkSnackbarPackage())
}

Append |uiMode to the android:configChanges prop of <activity> in AndroidManifest.xml. Example:

<activity
    android:name=".MainActivity"
    android:exported="true"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode">

This ensures the RN code will react to system-wide changes to the current appearance.

Icons

This method has the advantage of fonts being copied from this module at build time so that the fonts and JS are always in sync, making upgrades painless.

Edit android/app/build.gradle ( NOT android/build.gradle ) and add the following:

apply from: "node_modules/backpack-react-native/bpk-component-icon/fonts.gradle"

iOS

Icons

The most reliable way to install the file on iOS is manually, three simple steps are required:

update the Info.plist file by adding

<key>UIAppFonts</key>
  <array>
    <string>BpkIcon.ttf</string>
  </array>

if the entry UIAppFonts is already there, just add <string>BpkIcon.ttf</string> inside the <array> like so

<array>
    ... existing entries
    <string>BpkIcon.ttf</string>
  </array>

In the Build Phases of your project, in the section Copy Bundle Resources add a reference to the BpkIcon.ttf file path like /path/to/node_modules/@skyscanner/bpk-svgs/dist/font/BpkIcon.ttf
Rebuild the app

Contributing

To contribute please see contributing.md.

List of packages

FAQs

What is backpack-react-native?

Is backpack-react-native well maintained?

Package last updated on 18 Apr 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install