Cristian Gutu

react-native-get-random-values for the New Architecture

Sat, 02 Aug 2025 00:00:00 +0000

When working with cryptographic operations in JavaScript, especially in libraries like @aws-amplify/react-native, access to a secure random number generator is essential. In browsers, the crypto.getRandomValues() method is typically used for this purpose. On React Native, we have been using react-native-get-random-values, but this is no longer compatible with the new architecture.

New Architecture Replacement

A good replacement is react-native-get-random-values, this one requires react-native-nitro-modules.

This library is great but it’s not compatible with React Native 0.76 or newer. Here is a fork to address this:

https://github.com/cristiangu/react-native-get-random-values

Use the old library name

This new library has a different name and libs like AWS Amplify will break if the old name is not present. Take a look at how Amplify loads it.

You should add it into your package.json like this:

 "react-native-get-random-values": "https://github.com/cristiangu/react-native-get-random-values.git",

How to use it

The polyfill needs to be applied at import time, you can import it in index.js and before importing the AWS Amplify lib.

// index.js

// Enables native support for crypto.getRandomValues()
import 'react-native-get-random-values';

Final thoughts

If you’re upgrading to React Native 0.76+, want to use the New Architecture and rely on AWS Amplify or similar libraries, be sure to update your implementation of react-native-get-random-values.

Cut React Native Build Times by 75% with Artifact Caching

Sat, 29 Mar 2025 00:00:00 +0000

Reducing your build times is achievable by recycling your native build artifacts. In this guide, I will walk you through the steps required to implement this process effectively.

The native builds are expensive

Every time you trigger the CI to create a new build, it will create new IPA and APK files. This can take a lot of time, depending on your project size. These builds will contain the latest JS bundle. Most of the time, you don’t change native code, so why not keep the previous IPA/APK and just replace the new JS bundle?

When to go native

In this article we will use CircleCI and Fastlane to do the job, most of the code is shell based, so this can be adjusted to any other CI service.

The first step is to know when a new native build is required, we will run a git diff and here are the paths and files to check:

No cached IPA/APK found - this means that even if our diff contains JS code only, we cannot recycle a non-existent native build.
Any change in /ios.
Any change in /android.
Any change in /src/assets, in theory this could also be recycled, but we will keep it simple for now.
Any change in /.env*. Depending on the env lib that you use, these env variables can be used inside native code.
Any change in /patches, if you’re using patch-package, you’re probably patching native code.
Any change in /yarn.lock, this one is useful to trigger Android builds, on iOS we already know if a native dependency was changed because the /ios/Podfile.lock will be changed.

The order of these checks is important here.

Here is the CircleCI command for this:

and it can be used like this:

steps:
    - is-native-build-required:
        platform: android

Save and restore a cached IPA/APK

Here are four important things that we need here:

Cache the IPA/APK after a native build was finished.
Store the build in a different location for each environment and platform.
Have a way to manually reset this cache.
Use the latest cached build for a specific platform (iOS/Android) and for a specific environment (dev/staging/prod).

CircleCI doesn’t have the best tool for this job, but something close enough, is to use the save_cache and restore_cache commands.

Here is how to do this for the Android builds:

This command has one param, env, to know for which environment we save the APK.

The key param from the save_cache is constructed using:

env - a variable to know for which environment we store.
v1 - a hard coded string, to be able to manually reset the cache by changing it to v2, v3, […]
pipeline.git.revision - the git SHA that is being built. This is added automatically by CircleCI, it may have a different name on other CI services. We want this to make sure we use the latest cached build, even if it’s a recycled one. Ideally, we would recycle only the native builds and ignore the recycled ones.

The paths param is used to tell CircleCI where is the file/dir that we need to cache, here you can specify multiple paths if you output multiple APKs.

The next step is to restore this cache when needed, we will use this command:

Really similar to the previous command except the key param from restore_cache. We don’t add the last part. CircleCI will choose the latest cache entry that matches the first parts of the key.

The iOS part is really similar to this one, you can see it here.

The restore-android-apk-cache, restore-ios-ipa-cache must be called before is-native-build-required and save-android-apk-cache, save-ios-ipa-cache must be called after the build part is finished.

Have the new version and build number ready

Before refreshing the APK/IPA files, we need to know the next version and build number, depending on your setup this may vary but a good practice for React Native projects is to use the version field from package.json. Let’s define a new command in CircleCI to read this and keep it in an env variable.

The build number should be fetched from Firebase/TestFlight/AppStore Connect/Google Play and incremented or updated as you wish, this will not be covered here. Fastlane has a lot of tools for this:

Refresh the recycled APK file

Having the cached builds ready to be used and the flag env variables (NATIVE_ANDROID_BUILD_REQUIRED, NATIVE_IOS_BUILD_REQUIRED) to know when to use them, we can start on Android and refresh the APK file with the new JS bundle.

This implementation may vary from project to project but here is what we want:

Unarchive the APK file using apktool.
Delete the old JS bundle from there.
Create a new un-minified JS bundle using the current source files.
Compile the JS bundle to bytecode (if you’re using Hermes).
Copy the new JS bundle inside the APK dir.
Update APK’s build number and version.
Zip back the APK dir.
Sign the APK file.
Move it back in the cached path defined in the save_cache command, so CircleCI will be able to find it.

This time, we will do it inside Fastfile, but this is basically a shell script so feel free to adjust it for your project.

# [...]

new_build_number = latest_release[:buildVersion].to_i + 1
if ENV["NATIVE_ANDROID_BUILD_REQUIRED"] == "true"
    # Do your regular fastlane steps
    # [...]
else 
    UI.message("Skipping native Android build")
    refresh_apk_js_bundle(
        build_number: new_build_number.to_s
    )
    # Distribute the new build, the path is "./mobile_app.apk"
end

# [...]

The refresh_apk_js_bundle action can be defined in the same directory as your Fastfile, actions/refresh_apk_js_bundle.rb.

This fastlane action will use wget, yq, apktool and bundletool, if your CI machine does not contain these, you can install them by creating a new file inside the fastlane dir, install-tools-android.sh.

Now having these tools ready, we can refresh the APK file. In the first part we call the install-tools-android.sh script, use apktool to unzip the APK file and delete the old JS bundle file.

In the next part we create a new JS bundle, compile it to bytecode using Hermes and copy the new bundle inside the APK dir.

The last steps are to upload the new source maps to your favorite crash reporting service, set the new version and build number inside apktool.yml, create the new APK and sign it.

Complete source for the refresh_apk_js_bundle.rb can be found here.

Refresh the recycled IPA file

The iOS part is similar to the Android one, first we unzip the IPA file, create a new JS bundle, compile it to bytecode using Hermes and copy it back in the original location.

Next, we sign the IPA using a signing_identity and provisioning_profile(s) defined by Fastlane in some ENV variables. You can replace com.bundle.identifier with your own identifier. This fastlane action has a new parameter, match_type, it can have the following values: adhoc, appstore, development or enterprise.

Complete source for the refresh_ipa_js_bundle.rb can be found here.

For the iOS lane, this action can be used like this:

# [...]

latest_release = firebase_app_distribution_get_latest_release(app: firebase_app_id)
if ENV["NATIVE_IOS_BUILD_REQUIRED"] == "true"
    update_project_settings(
        profile_type: "AdHoc",
        build_number: (latest_release[:buildVersion].to_i + 1).to_s
    )
    # Do your regular fastlane steps
    # [...]
else
    UI.message("Skipping native iOS build")
    refresh_ipa_js_bundle(
        match_type: "adhoc",
        build_number: (latest_release[:buildVersion].to_i + 1).to_s
    )
    # Distribute the new build, the path is "./mobile_app.ipa"
end

# [...]

Good to know

On Android, this will not work for .aab files, they are really different compared to an APK.
It would be nice to create a new env variable to store the artifact file name and use it inside the shell scripts in both fastlane actions, sh("something #{ENV["PRODUCT_NAME"]}.apk")
The save_cache and restore_cache commands are saving every new build even if it’s a recycled one. Unfortunately, there is no way to delete the old cache or skip certain build steps in CircleCI. This cache expires automatically after 15 days.
The APK sign logic is duplicated on Android, if you change something inside ./android/app/build.gradle make sure to also update the refresh_apk_js_bundle.rb file.
This article assumes that you use the default JS bundle file names, index.android.bundle and main.jsbundle.
If your project is using productFlavors & flavorDimensions on Android and multiple build schemes & build configs on iOS, more customizations are needed to accommodate the things explained above.

Sources

That was it

Recycling native build artifacts can significantly reduce build times and improve the efficiency of your CI/CD pipeline, especially for React Native projects. By leveraging this, you can save valuable time.

While the approach outlined in this article focuses on CircleCI and Fastlane, the scripts are platform agnostic or at least easily adjustable to other CI/CD tools and workflows.

Forward third-party Push Notifications to React Native Firebase Messaging

Fri, 10 Jan 2025 00:00:00 +0000

Sometimes your React Native app has multiple sources for push notifications. In this article I will explain how to forward push notifications received on the native side from a third-party like Klaviyo to React Native Firebase Messaging library. This is really useful because you can re-use one set of callbacks on the JS side for multiple native “clients”, in this case Firebase Cloud Messaging and Klaviyo.

iOS

Include these imports in your *-Bridging-Header.h so we can use them in Swift. If you don’t have a bridging header in place, please follow this article.

#import <RNFBApp/RNFBRCTEventEmitter.h>
#import "RNFBMessagingSerializer.h"

Now it’s time to implement UNUserNotificationCenterDelegate in your AppDelegate.swift file.

import RNFBMessaging
import KlaviyoSwift

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate, UNUserNotificationCenterDelegate {
  var window: UIWindow?
  var bridge: RCTBridge!

  func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
    FirebaseApp.configure()
    UNUserNotificationCenter.current().delegate = self
    //[...]
  }
}

Let’s implement some methods from that protocol. This one can be useful if you want to display push notifications while your app is in foreground.

extension AppDelegate {
    func userNotificationCenter(
    _ center: UNUserNotificationCenter,
    willPresent notification: UNNotification
    ) async -> UNNotificationPresentationOptions {
    if #available(iOS 14.0, *) {
      return [.banner]
    } else {
      return [.alert]
    }
  }

In the next method, we will receive the notification object, then we will convert it to a dictionary using some functions from RNFBMessaging. Once the dictionary data is ready we will use the sendEvent() function and send it to the JS realm. This event will trigger the callback passed to messaging().onNotificationOpenedApp(callback).

The last part is also handling the case when the app is opened from scratch, and on the JS side messaging().getInitialNotification() is expected to return the push notification.

func userNotificationCenter(
    _ center: UNUserNotificationCenter,
    didReceive response: UNNotificationResponse
) async {
    // This will check if the notification is from Klaviyo
    let handled = KlaviyoSDK().handle(notificationResponse: response) { }
    if(!handled) {
        return
    }
    // https://github.com/invertase/react-native-firebase/blob/9b5c405b2933c84daad561117a3eebacc65cbb7e/packages/messaging/ios/RNFBMessaging/RNFBMessaging%2BUNUserNotificationCenter.m#L151
    let userInfo = response.notification.request.content.userInfo
    let dict = RNFBMessagingSerializer.notification(toDict: response.notification)
    RNFBRCTEventEmitter.shared().sendEvent(withName: "messaging_notification_opened", body: dict)

    // Making sure the getInitialNotification() func will return something on app cold start.
    // https://github.com/invertase/react-native-firebase/blob/9b5c405b2933c84daad561117a3eebacc65cbb7e/packages/messaging/lib/modular/index.d.ts#L104
    RNFBMessagingUNUserNotificationCenter.sharedInstance().initialNotification = dict
}

Android

On Android we need to patch the library in order to expose a private field. Here is a @react-native-firebase+messaging+20.4.0.patch file that is only adding the public keyword for ReadableMap initialNotification from ReactNativeFirebaseMessagingModule.java. More details on how to patch a library can be found here.

diff --git a/node_modules/@react-native-firebase/messaging/android/src/main/java/io/invertase/firebase/messaging/ReactNativeFirebaseMessagingModule.java b/node_modules/@react-native-firebase/messaging/android/src/main/java/io/invertase/firebase/messaging/ReactNativeFirebaseMessagingModule.java
index 3b89817..e5d4c64 100644
--- a/node_modules/@react-native-firebase/messaging/android/src/main/java/io/invertase/firebase/messaging/ReactNativeFirebaseMessagingModule.java
+++ b/node_modules/@react-native-firebase/messaging/android/src/main/java/io/invertase/firebase/messaging/ReactNativeFirebaseMessagingModule.java
@@ -40,7 +40,7 @@ import java.util.Map;
 public class ReactNativeFirebaseMessagingModule extends ReactNativeFirebaseModule
     implements ActivityEventListener {
   private static final String TAG = "Messaging";
-  ReadableMap initialNotification = null;
+  public ReadableMap initialNotification = null;
   private HashMap<String, Boolean> initialNotificationMap = new HashMap<>();
 
   ReactNativeFirebaseMessagingModule(ReactApplicationContext reactContext) {

In this case, Klaviyo already has a service to create and display the push notification on Android, if your push provider doesn’t offer this, feel free to check out their implementation. Don’t forget to also register that service in your AndroidManifest.xml.

The following must be added inside <application> [...] </application>.

<service android:name="com.klaviyo.pushFcm.KlaviyoPushService" android:exported="false">
    <intent-filter>
        <action android:name="com.google.firebase.MESSAGING_EVENT" />
    </intent-filter>
</service>

To make use of that patch, when the app is started, in MainActivity.kt we check for a notification bundle in the intent. If we find something, we are sending the bundle to a helper function to convert it to a WritableMap. This dictionary is set to initialNotification, this field is part of the already running instance of a native module called ReactNativeFirebaseMessagingModule. On the JS side messaging().getInitialNotification() will return this push notification.

import com.facebook.react.bridge.WritableNativeMap
import com.klaviyo.analytics.Klaviyo
import com.klaviyo.analytics.Klaviyo.isKlaviyoIntent
import io.invertase.firebase.common.ReactNativeFirebaseEventEmitter
import io.invertase.firebase.messaging.ReactNativeFirebaseMessagingModule

// [...]

override fun onCreate(savedInstanceState: Bundle?) {
    // https://github.com/software-mansion/react-native-screens/issues/17#issuecomment-424704067
    super.onCreate(null)

    if(intent.isKlaviyoIntent) {
        // Only for Analytics
        Klaviyo.handlePush(intent)
        // Cold app start after tapping on a push notification from Klaviyo
        val remoteMessageMap =
            ReactNativeFirebaseMessagingSerializer.klaviyoExtrasToWritableMap(intent.extras)
        val newInitialNotification = WritableNativeMap()
        newInitialNotification.merge(remoteMessageMap!!)

        val modules = this.reactInstanceManager.currentReactContext?.nativeModules
        val messagingModule = modules?.first { it.name == "RNFBMessagingModule" } as ReactNativeFirebaseMessagingModule
        messagingModule.initialNotification = newInitialNotification
    }
}

If the app is already running in background or in foreground, the onNewIntent() method will be called on notification tap. Here we will convert again the bundle extras to a dictionary and send it as an event. On the JS side, this event will trigger the callback passed inside messaging().onNotificationOpenedApp(callback).

override fun onNewIntent(intent: Intent?) {
    super.onNewIntent(intent)
    if (intent?.isKlaviyoIntent != true) {
        return
    }
    // Only for Analytics
    Klaviyo.handlePush(intent)
    val remoteMessageMap =
        ReactNativeFirebaseMessagingSerializer.klaviyoExtrasToWritableMap(intent.extras)
    val emitter = ReactNativeFirebaseEventEmitter.getSharedInstance()
    emitter.sendEvent(
        io.invertase.firebase.messaging.ReactNativeFirebaseMessagingSerializer.remoteMessageMapToEvent(
            remoteMessageMap, true
        )
    )
}

That was it

Now your push notifications from third-party providers will show up on the JS side when using @react-native-firebase/messaging.

import messaging from '@react-native-firebase/messaging';

const unsubscribe = messaging().onNotificationOpenedApp(callback);
const notification = await messaging().getInitialNotification();

Using Swift in Fabric components and Turbo Modules

Mon, 25 Mar 2024 00:00:00 +0000

React Native’s new architecture is here, a few more releases, and it will be enabled by default for new library projects.

A lot of important libraries have already started to migrate or completed the migration to this new architecture.

Scroll to the end and clone the example project where Swift is being used in Fabric components and Turbo Modules, or stay with us and learn how to do this step-by-step.

While Turbo Modules fully support Swift, the create-react-native-library doesn’t offer a template for this. Here’s how you can use it:

Make sure to add @objc public to classes and methods you want to expose in Objective-C/C++.
Import the Swift headers: #import (your podspec name)-Swift.h, in your Objective-C++ file (.mm).

When trying to build a Fabric component in Swift I saw this discussion where I saw that Swift is not supported yet.

At first, I was surprised by this, then I quickly realised that although Objective-C is easily interoperable with Swift, in this new architecture there is a layer that is completely OS-agnostic and written in C++. That layer is called Fabric, basically the RN team created a fully cross-platform implementation for the React Shadow Tree.

This wasn’t enough for me, so I started digging more. I was thinking that perhaps there are some C++ parts that might not be compatible with Swift because C++ interoperability is supported only in Swift 5.9 and above.

There is a way

To be able to call Swift code, you need to have a thin Objective-C layer. Let’s create a new RN library and show you step-by-step.

cristiangutu@ % npx create-react-native-library@latest new-lib      
✔ What is the name of the npm package? … react-native-new-lib
[...]
✔ What type of library do you want to develop? › Turbo module with backward compat
✔ Which languages do you want to use? › Kotlin & Objective-C
✔ Project created successfully at new-lib!

Make sure you select Turbo module with backward compat, we will start with a simple Turbo module for now.

Install node_modules, the iOS Pod dependencies and start the Metro server.

cd new-lib
yarn
cd example/ios/
bundle install
RCT_NEW_ARCH_ENABLED=1 pod install
cd ..
yarn start

Open Xcode, NewLibExample.xcworkspace, and try to run the example project. It’s important to have a fully working iOS project in this state.

Swift Turbo Modules

To support Swift in a Turbo Module, we need to tell CocoaPods to pick up the .swift extension. Open the react-native-new-lib.podspec and include swift in source_files list.

[...]
    s.platforms    = { :ios => min_ios_version_supported }
    s.source       = { :git => "https://github.com/cristiangu/react-native-new-lib.git", :tag => "#{s.version}" }

    s.source_files = "ios/**/*.{h,m,mm,swift}" 👈

    # Use install_modules_dependencies helper to install the dependencies if React Native version >=0.71.0.
    # See https://github.com/facebook/react-native/blob/febf6b7f33fdb4904669f99d795eba4c0f95d7bf/scripts/cocoapods/new_architecture.rb#L79.
    if respond_to?(:install_modules_dependencies, true)
[...]

Now let’s have a simple Swift class. Inside new-lib/ios, create a new file with the following implementation:

// Calculator.swift

@objc public class Calculator: NSObject {
    @objc public static func multiply(a: Double, b: Double) -> Double {
        return a * b
    }
}

Go to new-lib/example/ios and run RCT_NEW_ARCH_ENABLED=1 pod install, you should see the Pod being installed again.

[...]
[Codegen] Found rncore
Downloading dependencies
Installing react-native-new-lib 0.1.0 👈
Generating Pods project
[...]

Let’s use it, we need to import a special header. This .h file behaves like an umbrella header for your Swift code. To learn more about this, check out these docs. Open new-lib/ios/NewLib.mm and make the following changes:

#import "NewLib.h"
#import "react_native_new_lib-Swift.h" // 👈 Yes, Xcode will not allow `-` characters, only for the last part.

@implementation NewLib
RCT_EXPORT_MODULE()

// Example method
// See // https://reactnative.dev/docs/native-modules-ios
RCT_EXPORT_METHOD(multiply:(double)a
                  b:(double)b
                  resolve:(RCTPromiseResolveBlock)resolve
                  reject:(RCTPromiseRejectBlock)reject)
{
    double result =  [Calculator multiplyWithA:a b:b]; // 👈
    resolve([NSNumber numberWithDouble:result]); // 👈
}
[...]

Add a breakpoint in Xcode, run again the Example project and you will see the Swift code being executed. 🎉

Supporting both Fabric components and Turbo modules

All the templates offered by the create-react-native-library don’t include a template to have Fabric components and Turbo modules in the same library.

To achieve this, open new-lib/package.json and scroll to the bottom and do the following change:

[...]
 "codegenConfig": {
    "name": "RNNewLibSpec",
    "type": "all", 👈
    "jsSrcsDir": "src"
  }

Using Swift in Fabric components

In our current project we will start to create some files for our new MyComponentView Fabric component. Basically I will re-use most of the files that are generated when you create a new library, make sure you choose the Fabric view with backward compat template.

cristiangutu@ % npx create-react-native-library@latest my-component
✔ What is the name of the npm package? … react-native-my-component
[...]
✔ What type of library do you want to develop? › Fabric view with backward compat
✔ Which languages do you want to use? › Kotlin & Objective-C
✔ Project created successfully at my-component!

Copy the following files from my-component/ios into new-lib/ios:

MyComponentView.h
MyComponentView.mm
MyComponentViewManager.mm

Open the MyComponentView.mm file and replace all the RNMyComponentViewSpec strings with RNNewLibSpec. This value is generated from new-lib/package.json, codeGenConfig property.

Replace the #import "Utils.h" lines from MyComponentView.mm and MyComponentViewManager.mm with:

#import "react_native_new_lib-Swift.h"

Now let’s create something that can be used in our Fabric component, let’s have the usual Hex to UIColor converter. Inside new-lib/ios create this new file:

// UIColor+Hex.swift

extension UIColor {
    @objc public convenience init(hex: String, alpha: CGFloat = 1.0) {
        var hexValue = hex.trimmingCharacters(in: CharacterSet.whitespacesAndNewlines).uppercased()
        
        if hexValue.hasPrefix("#") {
            hexValue.remove(at: hexValue.startIndex)
        }
        
        var rgbValue: UInt64 = 0
        Scanner(string: hexValue).scanHexInt64(&rgbValue)
        
        let red = CGFloat((rgbValue & 0xFF0000) >> 16) / 255.0
        let green = CGFloat((rgbValue & 0x00FF00) >> 8) / 255.0
        let blue = CGFloat(rgbValue & 0x0000FF) / 255.0
        
        self.init(red: red, green: green, blue: blue, alpha: alpha)
    }
}

Both MyComponentView.mm and MyComponentViewManager.mm are setting a background color using the value sent in the color prop on the JS side. We need to update those implementations to use our new Swift implementation.

Find and replace all the [_view setBackgroundColor: occurrences with:

[_view setBackgroundColor: [[UIColor alloc] initWithHex:colorToConvert alpha:1.0]]; in MyComponentView.mm
[view setBackgroundColor: [[UIColor alloc] initWithHex:json alpha:1.0]]; in MyComponentViewManager.mm

The iOS native implementation is complete now, let’s go back to JS realm 🌈 and link them together. Inside new-lib/src create a new file, and add the following implementation:

// MyComponentViewNativeComponent.ts

import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
import type { ViewProps } from 'react-native';

interface NativeProps extends ViewProps {
  color?: string;
}

export default codegenNativeComponent<NativeProps>('MyComponentView');

In the new-lib/src/index.tsx file, add the following exports:

[...]
export { default as MyComponentView } from './MyComponentViewNativeComponent';
export * from './MyComponentViewNativeComponent';

Edit the new-lib/example/src/App.tsx to use your new Fabric component:

[...]
return (
    <View style={styles.container}>
      <Text>Result: {result}</Text>
      <MyComponentView style={styles.box} color="#64C17F" /> 👈
    </View>
  );
[...]

Refresh everything by running RCT_NEW_ARCH_ENABLED=1 pod install inside new-lib/example/ios and run again the Example app.

You should see our new Fabric component in the wild! 🎉

Conclusion

This is a very simple example of using Swift inside Turbo modules and Fabric components, but I will stop here because this article is already too long.

Having this in place enables you to start using fully-fledged UIViews defined in Swift; in the - (instancetype)initWithFrame:(CGRect)frame method from MyComponentView.mm you are free to instantiate any UIView defined in Swift.

It’s time to use the best of both worlds, React Native’s New Architecture and Swift on iOS!

Check out this example project with everything that we did today.

Adding a Forked Pod as a Dependency in a Podspec on iOS

Sun, 24 Mar 2024 00:00:00 +0000

You’re developing a new CocoaPods library. You found a bug in one of your library dependencies, so you decide to fork that pod dependency and fix it.

After pushing the fix to the forked repository, you want to update your s.dependency with the new version of your forked pod dependency.

Here, you get an error while running pod install and you learn that CocoaPods doesn’t support :git => [...] in a .podspec file.

[!] Invalid 'my-new-lib.podspec' file: [!] Podspecs cannot specify the source of dependencies. The ':git' option is not supported. ':git' can be used in the Podfile instead to override global dependencies.

Basically, you cannot declare this in a .podspec file, you can have it only in a Podfile:

s.dependency 'ForkedPodName', :git => 'https://github.com/cristiangu/myforkedlib.git'

What do you do?

Add the forked lib repo as a Git Submodule in your current repo:

cd <my-new-lib-podspec-root-dir>
git submodule add git@github.com:cristiangu/myforkedlib.git

In your .podspec file add the following:

Pod::Spec.new do |s|
    [...]
    s.dependency "ForkedPodName"
  
    s.subspec 'ForkedPodName' do |ss|
        ss.source_files = 'ForkedPodName/**/*.{swift}'
    end
end

Refresh everything with: pod install

Now your forked library (the git submodule) will be used as source_files for your ForkedPodName dependency.

Learn more about:

How to add DKIM and DMARC records to your email

Fri, 02 Feb 2024 00:00:00 +0000

DKIM and DMARC records are now required by Google and Yahoo if you want to bulk send emails but they are also useful for your private custom domain email because without them your emails can get blocked by various firewalls.

Add a DKIM record

1 - If you’re using Namecheap’s email solution (Private Email), go to email settings and look for the Show DKIM button.

2 - Click on it and copy only the value between the quotes.
default._domainkey IN TXT (" THIS VALUE ");

3 - Go to your favorite DNS manager and add a new DNS record with the following:

Record Type: TXT
Name: default_.domainkey
Value: THE VALUE BETWEEN QUOTES
TTL: use the default or leave it empty

Check if the DKIM record is doing the job

Try to send an email to you using your custom domain email address, once you got it check the headers of that email, for example on Gmail you should see PASS for the DKIM field.

If you don’t see this, wait 24 hours for those DNS records to be up-to-date.

Add a DMARC record

DMARC also helps authenticate email messages. It tells email servers what to do after checking a domain’s SPF and DKIM records, which are other ways to verify emails. You can read more about this here.

1 - There are many ways to configure this, you can use this guided generator to generate a value for this record.

2 - Go to your favorite DNS manager and add a new DNS record with the following:

Record Type: TXT
Name: _dmarc
Value: YOUR VALUE
TTL: use the default or leave it empty

Check if the DMARC record is doing the job

Try to send an email to you using your custom domain email address, once you got it check the headers for that email. Look for dmarc=pass if you find this, everything should be ok.

If you don’t see this, wait 24 hours for those DNS records to be up-to-date.

If you encounter any other issues, feel free to leave a comment and I will get back to you!

Optimising React Native's View component render speed

Thu, 28 Sep 2023 00:00:00 +0000

We all know that you can achieve a significant performance boost if you’re rendering fewer views. The <View/> component is one of the most used components in any React Native project.

It seems that by directly using the RCTView without its corresponding JS node, we can achieve this performance boost.

Before

Let’s try rendering a <View/> multiple times. If we check Flipper, this will output a render time of 592.8ms

In Flipper, if we switch to the Components tab, we can see our <View/> nodes.

After

Now let’s create a new file and export a View const, but point it to ViewNativeComponent.

Try running your test again using this new View component like this:

In my case, the render time significantly decreased to 280.1ms. Now, if you look in the Components tab in Flipper, you will not see those View nodes. Here, I’m assuming this import is causing RN to render directly into the native layer.

That was it! This post was inspired by Nate’s tweet, if you want to learn more about this, go check it out!

react-native-fast-image - No flickering when changing the image source

Sat, 02 Sep 2023 00:00:00 +0000

What is react-native-fast-image?

Before diving into the details of the patch, let’s briefly review what react-native-fast-image is and why it’s widely used.

react-native-fast-image is a library that enhances image loading and rendering in React Native applications. It leverages the powerful Glide library for Android and SDWebImage for iOS to provide a highly optimized image loading experience. This means faster image loading, better caching, and smoother transitions when displaying images in your app.

Introducing a new prop

The patch in question is adding a new prop, useLastImageAsDefaultSource, by making changes to both the Android and iOS implementations of react-native-fast-image. Let’s break down the changes step by step.

Android Changes

In the Android part of the patch, we see a new method added to the FastImageViewManager class:

This method is used to set a property called useLastImageAsDefaultSource on an instance of FastImageViewWithUrl, which is the Android equivalent of the react-native-fast-image component.

This is how the new property is being used in FastImageViewWithUrl, line 23 is the most important one:

iOS Changes

In the iOS part of the patch, we see a similar addition in the FFFastImageView.h:

Then this property is being used in FFFastImageView.m, check out line 15:

What Does It Do

The purpose of this patch is to give you more control over the default image source displayed while an image is loading. When useLastImageAsDefaultSource is set, the component will use the last loaded image as the placeholder while the new image is being fetched. When set to false (or not set at all), the defaultSource prop will be used as the placeholder. By doing this you can avoid the flicker that is occurring during the image change.

How to Use It

To take advantage of this patch, you need to set the useLastImageAsDefaultSource prop on your FastImage component to a truthy value.

The Patch Diff

If you’re already using patch-package you can create a new file (react-native-fast-image+8.6.3.patch) in your patches directory and add this diff:

Demo

Conclusion

The introduction of the useLastImageAsDefaultSource is a subtle enhancement that can significantly elevate the user experience within image-rich applications.

React Native animated bottom modal in a Native Stack Navigator

Sat, 05 Aug 2023 00:00:00 +0000

If you’re using the React Navigation library and you want to show a bottom modal you cannot use the useCardAnimation() hook to know the state of the transition, this hook is not available in native navigators.

You can implement a gesture-aware bottom modal with a transparent background using the bare minimum:

RN Animated API
yarn add react-native-gesture-handler

Declare the GModal in your Native Stack navigator. If you plan to have multiple modals feel free to include all of them in <RootStack.Group>. All the screenOptions values will automatically be passed down to all of the children.

Create a new GModal.tsx file and let’s start with some imports.

Add a root view.

Add a <PanGestureHandler> with an animated content view, this <Animated.View> will be translated on Y axis using the gesture data provided by the PanGestureHandler.

Declare a variable to hold the current Y value and some functions that will be called by the PanGestureHandler.

Take a look and play a bit with this.

Let’s change the blue background, in the root view replace the blue value with transparent and you will see the content beneath.

If you open the modal and drag it up as much as you can, at the bottom of the modal, because it’s transparent you can see the parent’s page content.

Let’s create a new component to fix this.

This component will be placed as the last child in the root view:

Add a drop shadow for our content view so we can see the edges more clearly.

It’s cool to swipe it down to close it but we also want the modal to be dismissed if we click on the transparent background. Add a <Pressable> to intercept some click events and link it to the already defined closeModal() function.

One problem here. If you click on the red view, the onPress will be called and the modal will be closed, if you don’t want this, make sure to add another <Pressable> over <PanGestureHandler>.

You’re pretty much done! Watch this short demo with a polished Logout Modal on Android.

Check out the full implementation here.

Top quality sources to find free and paid landing page templates in 2023

Thu, 06 Jul 2023 00:00:00 +0000

A few weeks ago I started to build a landing page for my company, GUU Labs, and I realized how hard it is to find some good starting points.

Here is a list with the best ones that I’ve found, written in various frameworks, take a look and find what suits you best:

Astro.js, if you’re planning to use it, they have this list with a lot of free and paid templates.
Wicked Templates is offering some really good paid starters built in HTML 5 & Tailwind.
Cruip is by far one of the best paid options that you have out there, the templates look good and can be downloaded in React.js, Next.js, Vue.js or Laravel. Besides this, you also get Figma or Sketch designs, making it very easy to edit your assets.
One Page Love has this very long list with a ton of templates written in various frameworks and it also includes some for Framer or Webflow.
If coding is not your expertise Webflow has some crazy good templates and if you want something simpler Framer is your buddy.
Built At Light Speed is a really big aggregator where you can find a lot of stuff.
Next.js Templates offer some good free starter templates for Next.js.
Tailwind Awesome will be a nice place for all the Tailwind fans out there.
Coming Soon Kit offers an interesting package with 45+ one page templates available in Tailwind & Figma or in Webflow & Figma.
shadcn/ui is a really good components library to help build that landing page almost from scratch.
Radix UI was the inspiration for shadcn/ui, check it out!
MUI has some really good templates built with MUI in React.js and Next.js, these are more focused for a dashboard type of project.

May this help you do your best work!