@hawkrives/react-native-alternate-icons

React Native Alternate Icons for iOS 10.3+

Stats

StarsIssuesVersionUpdatedCreatedSize
@hawkrives/react-native-alternate-icons
100.6.02 years ago4 years agoMinified + gzip package size for @hawkrives/react-native-alternate-icons in KB

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

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.