Quick tip-How to run native iOS code in react native-Example: App icon change

Do you understand React Native and how to implement basic things, but now you want to understand how the more complex stuff?
To explain the concept of running native iOS code, I am using Surya's package as our simple example because changing the AppIcon during runtime is a simple line of code in native Swift/Objective-C into which you pass iconName as a string:

UIApplication.shared.setAlternateIconName(iconName)

How to run the line using React Native

I placed my sample code here as a reference to the code below.

You need four files for making calls to native iOS:

• index.tsx, the only file change needed in the shared code, which creates the connection with the native code

import { NativeModules } from 'react-native';
const changeIcon = (iconName: string): Promise<string> =>
    NativeModules.ChangeIcon.changeIcon(iconName);
export { changeIcon };

• ChangeIcon.m, Objective-C file added in Xcode to the project directory that makes the native code accessible

#import <React/RCTBridgeModule.h>
@interface RCT_EXTERN_MODULE(ChangeIcon, NSObject)
RCT_EXTERN_METHOD(changeIcon:(NSString *)iconName withResolver:(RCTPromiseResolveBlock)resolve withRejecter:(RCTPromiseRejectBlock)reject)
@end

- ChangeIcon.swift, added in Xcode to the project which contains your native code (tap to expand)

@objc(ChangeIcon)
class ChangeIcon: NSObject {

    @objc
    static func requiresMainQueueSetup() -> Bool {
        return false
    }

    @available(iOS 10.3, *)
    @objc(changeIcon:withResolver:withRejecter:)
    func changeIcon(iconName: String, resolve:RCTPromiseResolveBlock,reject:RCTPromiseRejectBlock) -> Void {
        if !UIApplication.shared.supportsAlternateIcons {
            reject("Error", "Alternate icon not supported", nil)
            return
        }
        let currentIcon = UIApplication.shared.alternateIconName
        if iconName == currentIcon {
            reject("Error", "Icon already in use", nil)
            return
        }
        resolve(true)
        UIApplication.shared.setAlternateIconName(iconName)
    }
}

• Bridging-Header, is automatically recommended to be added by Xcode while adding the swift file above, as you can see in the image above the title. You don't need to rename it, just add this line

#import <React/RCTBridgeModule.h>

Usage

Don't forget to complete the other steps for the app icon update involving adding the image to the specific folder. Simply import the function from your index.tsx and then the simplest way to use it in your UI is to call the function on a button press:

import { changeIcon } from './NativeModules';
...
    <Button title='checked' onPress={() => changeIcon('checked')}/>

---

This is a part of a series of articles, please subscribe to get updates and let me know if you would like me to write another version of this article using JSI (the future of React Native) instead. Ask me any questions on Twitter, and don't forget to connect with me on LinkedIn!

The First Prototype is an emerging Mobile App Design and Development consulting small business, specializing in Cross platform and Native iOS & Android apps. Sign up on our website, and support us on social media, to be informed of simple innovations in projects like our 5-star NumberBomb game on iOS & Android!