❤
npm
Sign UpSign In

react-native-bpk-component-icon

3.0.1 • Public • Published

react-native-bpk-component-icon

Backpack React Native icon component.

Installation

npm install react-native-bpk-component-icon --save-dev

iOS installation

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 it's 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/bpk-svgs/dist/font/BpkIcon.ttf

  3. Rebuild the app

Android installation

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/react-native-bpk-component-icon/fonts.gradle"

Usage

import { View } from 'react-native';
import React, { Component } from 'react';
import BpkIcon, { icons } from 'react-native-bpk-component-icon';
import { spacingBase, colorSkyBlue } from 'bpk-tokens/tokens/base.react.native';
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: spacingBase,
  }
});
 
export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <BpkIcon
          icon={icons.beer}
          style={{ color: colorSkyBlue }}
          small
        />
        <BpkIcon
          icon={icons.beer}
          style={{ color: colorSkyBlue }}
        />
      </View>
    );
  }
}

withRtlSupport HOC

import { View } from 'react-native';
import React, { Component } from 'react';
import BpkIcon, { icons, withRtlSupport } from 'react-native-bpk-component-icon';
import { spacingBase, colorSkyBlue } from 'bpk-tokens/tokens/base.react.native';
 
const BpkIconwithRtlSupport = withRtlSupport(BpkIcon);
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: spacingBase,
  }
});
 
export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <BpkIconwithRtlSupport
          icon={icons.beer}
          style={{ color: colorSkyBlue }}
        />
      </View>
    );
  }
}

Props

Property PropType Required Default Value
icon string true -
small bool false false

Readme

Keywords

none

Package Sidebar

Install

npm i react-native-bpk-component-icon

Repository

github.com/Skyscanner/backpack

Homepage

github.com/Skyscanner/backpack#readme

Weekly Downloads

11

Version

3.0.1

License

Apache-2.0

Unpacked Size

44.6 kB

Total Files

22

Last publish

Collaborators

  • anambl
  • skyscanner-koalasquad
  • gert-jan.vercauteren
  • frugoman
  • marianeumayer-skyscanner
  • ojcurt
Try on RunKit
Report malware