@hawkrives/react-native-alternate-icons

    0.6.0 • Public • Published

    react-native-alternate-icons

    React Native Alternate Icons for iOS 10.3+

    Requirements

    • React Native 0.44+ (only tested on 0.44)

    Installation

    npm install @hawkrives/react-native-alternate-icons@latest --save

    Link the library to your React Native project

    react-native link

    Manual Linking

    https://facebook.github.io/react-native/docs/linking-libraries-ios.html

    Preparation & Code Sample

    Preparation

    Add your icons into your Xcode Project

    Icons in your Xcode Project

    Add the following code to your info.plist

    <key>supportsAlternateIcons</key>
    <true/>
    <key>CFBundleIcons</key>
    <dict>
      <key>CFBundlePrimaryIcon</key>
      <dict>
        <key>CFBundleIconFiles</key>
        <array>
          <string>icon_filename</string>
        </array>
        <key>UIPrerenderedIcon</key>
        <true/>
      </dict>
      <key>CFBundleAlternateIcons</key>
      <dict>
        <key>icon_type_alternate_name</key>
        <dict>
          <key>CFBundleIconFiles</key>
          <array>
            <string>alternate_icon_filename</string>
          </array>
          <key>UIPrerenderedIcon</key>
          <true/>
        </dict>
      </dict>
    </dict>

    Using in your React Native applications

    • setIconName(name: string): Promise<void> – takes one of the icon "names" defined in your Info.plist (icon_type_alternate_name, in the example above)
    • getIconName(): Promise<string> – returns the current icon's name
    • reset(): Promise<void> – resets the icon to the default bundle icon
    • isSupported(): Promise<boolean> – checks if the current devide is supported. Always returns false on Android.

    Because these all return promises, you can use them with ES2016's async/await syntax, too!

    For example, you can import all of the functions as a namespace:

    import * as Icons from '@hawkrives/react-native-alternate-icons';
     
    await Icons.setIconName(iconName);

    or import just one or two of them:

    import {getIconName} from '@hawkrives/react-native-alternate-icons';
     
    await getIconName();

    Install

    npm i @hawkrives/react-native-alternate-icons

    DownloadsWeekly Downloads

    560

    Version

    0.6.0

    License

    MIT

    Unpacked Size

    18 kB

    Total Files

    17

    Last publish

    Collaborators

    • hawkrives