DEV Community: Saamer Mansoor

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

Saamer Mansoor — Tue, 19 Jul 2022 12:18:05 +0000

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!

Android Version Code & Name from AppCenter environment variables

Saamer Mansoor — Mon, 11 Oct 2021 04:18:59 +0000

Android developers using ReactNative, Flutter, Java or Kotlin use Microsoft AppCenter, a free, neat and extremely popular DevOps tool, to automate app build creation and distribution. A popular challenge is the ability to set your App's Version Name and Build Number/Code without making constant code changes, so that you can easily create newer apps with the click of the Build button in AppCenter.

What is the Version Code and Name?

The Version Name is the value that you see in the Play Store as "Current Version" shown below. The version code (or build number) is not visible to the end-user, but just like the version name you cannot upload an app that has a version code less than or equal to the existing one.

Build Settings changes:

If you haven't started using AppCenter, you just need to create a new Android app, select the App language and then connect your Git Repository, then against a specific branch you can select specific build settings so it automatically creates a new build with every Pull Request merged, for your QA to test.

You can manually change the values of the versionCode and versionName in your build.gradle, but that can't be independently done by someone non-technical, and requires another manual code change & pull request by a developer, approval by reviewer of code like this:

versionCode 201
versionName "1.2.1"

Let's automate this!

microsoft / appcenter

Central repository for App Center open source resources and planning.

Overview

Important

Visual Studio App Center is scheduled for retirement on March 31, 2025. While you can continue to use Visual Studio App Center until it is fully retired, there are several recommended alternatives that you may consider migrating to.

Learn more about support timelines and alternatives.

Planning

Over the past few years our team’s focus has been to deliver a first class DevOps experience for mobile and desktop developers. A substantial part of this journey involved building the next generation of HockeyApp services for our customers. Earlier this year, we completed the HockeyApp shut down. We are now looking at what's next for the App Center service.

Just like any software engineering team, as we focused on building and scaling App Center, we accumulated technical debt that can no longer be sustained. Therefore, as we look to what is next, the App…

View on GitHub

AppCenter allows you to add pre-build scripts that can provide a lot more flexibility, but this feature is very easy to automate, and doesn't even need a shell script! To understand the changes, it's important to note that Android expects an integer value for Version Code and a string value for Version Name! When you put any value into the AppCenter environment variable dictionary, you can retrieve the values using the System.getenv() function, so we simply replace our build.gradle code from above, with this:

versionCode System.getenv("VERSION_CODE") ? System.getenv("VERSION_CODE").toInteger() : 201
versionName System.getenv("VERSION_NAME") ? System.getenv("VERSION_NAME").toString() : "1.2.1"

We added the ternary null checker so that the code works if you try to manually deploy from your local machine as well. That's it, just build and give it a test!

Please subscribe so I know people out there want me to write more technical articles in my free time, and feel free to let me know on Twitter if you have any questions. You can support me by following my small business on LinkedIn, to be informed of innovations & products like our free 5-star NumberBomb game on Android & iOS!

Did Facebook really slow down or move away from React Native?

Saamer Mansoor — Wed, 08 Sep 2021 13:09:29 +0000

Mobile application development is moving super fast for all the UI frameworks. The winner will really be who ever is able to sustain a true community, just like Firebase has been killing all other mobile NoSQL backend solutions. So far Google has been doing it extremely well with Flutter v2.2. In my opinion, unless Microsoft forces its teams to use MAUI/Xamarin like Facebook did with React Native, it risks getting "Silverlighted" eventually.

I thought facebook rewrote in native?

Just watched a talk at the React Native EU Conference last week, where a Facebook Engineer showed how they had to significantly improve the main branch of react native to improve their fleet of apps and the efficiency of their teams.

I recently interviewed for a native swift/obj-c position with Facebook, they have entire native teams

At 1 hour and 12 minutes of this video from September 2021, Joshua Gross, Sr. Software Egr. at FB says:

“At Facebook, all of our apps using React native, use react native from the main branch..”

Yeah you could be right that they are moving, because he doesn't say "all our apps use react native". But I did some searches and found that in mid-2018, there were unofficial rumors and some reorganization that made people believe that Facebook moved away. But according to the talk, they are still using it for over 1000 “surfaces”.

The Bottomline

It’s important to note that all of the biggest drawbacks have already been tackled with updates really. One of the biggest is thanks to the use of JSI (like JNI in Java programming) in the libraries that uses C++ instead of the single threaded “JS Bridge” (for periodic communication between the JS code and native layer), thus you now finally get- “mutli threading” and “native performance”. The first talk of the conference by Marc Rousavi goes through it, and here's his GitHub repo of a React Native app using JSI that detects "colorwaves (swatches/palettes)" from a camera in real-time by scanning each frame:

mrousavy / Colorwaver

🎨 An app to detect color palettes in the real world - powered by VisionCamera

Some Other React Native Criticisms

If I wasn’t so busy hating JavaScript, I’d be stepping into the mobile spot

If you are able to pickup any native/hybrid/cross platform UI framework, React Native will be a piece of cake in the learning curve, and pretty fun because of the live server/hot reload. Despite have a smaller PR budget than Flutter, React Native is still the most popular framework for building mobile apps.

It’s easy conceptually, but the language makes it terrible. Besides, it’s less like mobile with hooks instead of using the lifecycle overrides.

Actually, React & React Native applications can be written in TypeScript (TS) instead of JavaScript. And TS takes away most of the unsettling parts of React because it's strongly typed, and unsurprisingly more than half of react native apps use Typescript. Hooks are just lifecycle overrides beneath the surface, but for functional components instead of class components

Maybe I’m completely confused. I’m going to go look at more JavaScript and rot my brain some more

Don't worry, hooks is new too! It was introduced in v16.8 and we are on v17 now, but everyone’s storming towards it. And there’s different kinds of hooks you use depending on which lifecycle event you want to override. I highly recommend Bob Ziroll’s free course here

Please subscribe to get updates of articles I write and feel free to let me know on Twitter if you have any questions, and don't forget to connect with me on LinkedIn!