npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

backpack-react-native

v25.0.0

Published

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

Downloads

428

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

mungodewarmungodewaranamblanamblskyscanner-koalasquadskyscanner-koalasquadgert-jan.vercauterengert-jan.vercauterenfrugomanfrugomanmarianeumayer-skyscannermarianeumayer-skyscannerojcurtojcurttiagohngltiagohngl

Keywords

Readme

Backpack Design System for React Native

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

Android Actions Build Status iOS Actions Build Status

Quick links

Usage

Installation

npm install backpack-react-native --save

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

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

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

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