How to pass the data between the react-native app and action extension on iOS

As you might know, an iOS application and its extensions use standalone data containers that do not intersect and can not be accessed from one another. This article outlines a technique for sharing data between the application itself and application extension bidirectionally. It uses NSUserDefaults configured with special suite via App Groups .

The final result of passing data from the React Native application to Action Extension

Pre-requirements

1. Homebrew
2. Cocoapods
3. Node.js

Installation

You can always get the entire code here https://github.com/eugenehp/RNBacklinks.

1. Create a react-native application using a Typescript template.

npx react-native init RNBacklinks — template react-native-template-typescript

2. Open RNBacklinks/ios/RNBacklinz.xcworkspacein Xcode.

RNBacklinkz.xcworkspace

3. Add Action Extension

Adding Action Extension

4. Configure your Action Extension. Make sure it is set to Objective-C and No User Interface.

Configure your Action Extension

5. Confirm activation of your extension and ⌘-R to run the app in a simulator.

6. In the simulator click ⌘-H to see the home screen. Go to Safari. Open any webpage, and click share. Scroll down and enable your newly added extension.

Click Edit Actions

Click on “Done” and click on “ShowBacklinks” to see the background of your webpage set to red color

Great! You are halfway there.

Now let’s make sure there is a data flow between Application Container and Action Extension Container.

An app extension’s container is distinct from its containing app’s container from Apple Developer Documentation

1. In Xcode go to the main application RNBacklinkz, select the first target RNBacklinkz, and click + Capability.

Add new capability to your application

2. Select App Groups capability and click Enter.

Select App Groups capability and click Enter.

3. Configure App Group name: app.backlinks

4. Add the same capability to the app extension

Select ShowBacklinks in the targets and add capabilities

Congratulations! 🎉 You have just configured your Xcode.

Configure app group name in NSUserDefaults on the react-native side of your application.

import DefaultPreference from 'react-native-default-preference';
const SUITE_NAME = 'group.app.backlinks';
DefaultPreference.setName(SUITE_NAME);

Next, in your Action Extension, go to ActionRequestHandler.m

Action Extension Objective-C Code

And configure NSUserDefaults too, this time in Objective C code.

NSString* COLOR_ITEM = @"color";
NSUserDefaults* defaults = [[NSUserDefaults alloc] initWithSuiteName:@"group.app.backlinks"];
NSString* newColor = [defaults stringForKey:COLOR_ITEM];

And that’s it.

Full code is available here:

• Application (Typescript) — https://github.com/eugenehp/RNBacklinks/blob/main/App.tsx
• The extension (Objective C ) — https://github.com/eugenehp/RNBacklinks/blob/main/ios/ShowBacklinks/ActionRequestHandler.m
• Extension (Javascript) — https://github.com/eugenehp/RNBacklinks/blob/main/ios/ShowBacklinks/Action.js

Here is what the final app looks like:

React Native Application Action Extension

In Part 2 we will explore building functionality inside Action.js in the Action Extension. Follow us to stay updated.

About the author

Eugene Hauptmann, CEO of Reactive Lions™

Eugene Hauptmann, CEO of Reactive Lions™

Eugene is a faith-centric technologist, a serial entrepreneur, angel investor, advisor, and mentor.

He is the founder and CEO of REACTIVE LIONS INC. where he is implementing his vision of faith-driven entrepreneurship in the tech world. He is currently running a team of over 40 talented engineers across the US.

Eugene is the expert in building tech teams and he is a chief architect of scalable software products. His experience goes beyond B2B and B2C in multiple industries like Cyber Security, Deep Tech, FinTech, Media, AI, ML, Data platforms, Marketplaces, Wellness, Healthcare, Space, M&A, and more.

Contact us to learn how we can help your business build great tech.