Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@hawkrives/react-native-alternate-icons

allaboutolaf182MIT0.6.2TypeScript support: included

React Native Alternate Icons for iOS 10.3+

react-component, react-native, ios, alternate icons

readme

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
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();

changelog

0.4.6

  • Remove many of the rejects that would happen when functions were called on old iOS versions
  • Return "default" from getIconName when alternate icons are unavailable

0.4.5

  • Ensure that we run on the main thread, because iOS requires it

0.4.4

  • Fixed module exporting

0.4.3

  • Fixed reworked API to use the RCT_* things correctly

0.4.2

  • More doc updates

0.4.1

  • Updated README; added CHANGELOG

0.4.0

  • First release under my fork while I try to figure out what to upstream
  • Reworked the API of the module to use promises
  • Renamed supportDevice to isSupported