Backpack Design System for React Native

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

Quick links

• Documentation
• Changelog

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       = 24
  }

1. 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')

2. 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

1. 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())
}

2. 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:

1. 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>
   

2. 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

3. Rebuild the app

Contributing

To contribute please see contributing.md.

List of packages

• bpk-appearance
• bpk-component-alert
• bpk-component-animate-height
• bpk-component-badge
• bpk-component-banner-alert
• bpk-component-boilerplate
• bpk-component-button
• bpk-component-button-link
• bpk-component-calendar
• bpk-component-card
• bpk-component-carousel
• bpk-component-carousel-indicator
• bpk-component-chip
• bpk-component-dialog
• bpk-component-flat-list
• bpk-component-horizontal-nav
• bpk-component-icon
• bpk-component-image
• bpk-component-map
• bpk-component-navigation-bar
• bpk-component-nudger
• bpk-component-panel
• bpk-component-phone-input
• bpk-component-picker
• bpk-component-progress
• bpk-component-section-list
• bpk-component-select
• bpk-component-spinner
• bpk-component-star-rating
• bpk-component-switch
• bpk-component-text
• bpk-component-text-input
• bpk-component-touchable-native-feedback
• bpk-component-touchable-overlay
• bpk-styles
• bpk-theming