Have ideas to improve npm?Join in the discussion! »

    react-native-dynamic-app-icon

    1.1.0 • Public • Published

    React Native Dynamic App Icon

    Since iOS 10.3 Apple supports alternate App Icons to be set programmatically. This package integrates this functionality as React Native module. Android is not (yet?) supported.

    Table of Contents

    Install

    $ npm install react-native-dynamic-app-icon
    

    Mostly automatic installation

    $ react-native link react-native-dynamic-app-icon
    

    Manual installation

    1. In XCode, in the project navigator, right click LibrariesAdd Files to [your project's name]
    2. Go to node_modulesreact-native-dynamic-app-icon and add RNDynamicAppIcon.xcodeproj
    3. In XCode, in the project navigator, select your project. Add libRNDynamicAppIcon.a to your project's Build PhasesLink Binary With Libraries
    4. Run your project

    Add alternate icons

    Alternate icons have to be placed directly in your Xcode project rather than inside an asset catalogue. The @2x and @3x naming convention is supported as usual.

    Adjust info.plist

    Copy the following to your info.plist and adjust it as needed. Omit the file extension (and @2x) part, Xcode will pick them accordingly. You can add more alternate icons by copying the an alternate block.

    <key>CFBundleIcons</key>
    <dict>
      <key>CFBundleAlternateIcons</key>
      <dict>
        <key>alternate</key>
          <dict>
            <key>CFBundleIconFiles</key>
            <array>
              <string>AppIcon_alternate</string>
            </array>
            <key>UIPrerenderedIcon</key>
            <false/>
          </dict>
          <key>alternate2</key>
          <dict>
            <key>CFBundleIconFiles</key>
            <array>
              <string>AppIcon_alternate2</string>
            </array>
            <key>UIPrerenderedIcon</key>
            <false/>
          </dict>
        <key>CFBundlePrimaryIcon</key>
        <dict>
          <key>CFBundleIconFiles</key>
          <array>
            <string>FILENAME</string>
          </array>
        </dict>
      </dict>
    </dict>
    

    Usage

    import AppIcon from 'react-native-dynamic-app-icon';
     
    AppIcon.setAppIcon('alternate');
     
    AppIcon.getIconName(result => {
      alert( 'Icon name: ' + result.iconName );
    });

    Api

    setAppIcon(key: string)

    To change the app icon call this method with one of the alternate app icons keys specified in your plist.info. To reset to the default app icon pass null.

    supportsDynamicAppIcon()

    Returns a promise which resolves to a boolean.

    getIconName(callback(result))

    Returns a callback with an object containing the icon name. Example: {iconName: 'default'}.

    License

    MIT © idearockers

    Install

    npm i react-native-dynamic-app-icon

    DownloadsWeekly Downloads

    735

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    16.8 kB

    Total Files

    11

    Last publish

    Collaborators

    • avatar