backpack-react-native v25.0.0
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
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 yoursettings.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/modulebuild.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
Add the native packages to the
getPackages
function in yourMainActiviy
.override fun getPackages(): List<ReactPackage> { return Arrays.asList( MainReactPackage(), ... MapsPackage(), LinearGradientPackage(), CalendarPackage(), DialogPackage(), BpkSnackbarPackage()) }
Append
|uiMode
to theandroid:configChanges
prop of<activity>
inAndroidManifest.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
( NOTandroid/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>
```
In the
Build Phases
of your project, in the sectionCopy Bundle Resources
add a reference to theBpkIcon.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
- 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
2 days ago
24 days ago
24 days ago
25 days ago
11 months ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago