Nitrate Processed Mincemeat

    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

    Keywords

    none

    Install

    npm i react-native-bpk-component-icon

    DownloadsWeekly Downloads

    141

    Version

    3.0.1

    License

    Apache-2.0

    Unpacked Size

    44.6 kB

    Total Files

    22

    Last publish

    Collaborators

    • frugoman
    • zgeor
    • anambl
    • marianeumayer-skyscanner
    • ojcurt