v0.76: How to integrate with existing iOS apps using a view controller instead of app delegate

[MaxAst]

Description

Up until v0.76, the guide on how to integrate React Native in existing iOS apps used a view controller instead of an app delegate. With the new app delegate approach in v0.76 it's unclear whether it is still possible to integrate React Native with just a view controller.

What is the problem?

I used to be able to integrate React Native in iOS share extensions using the view controller approach. Since iOS share extensions do not support app delegates, it's unclear how to integrate React Native's new architecture in share extensions.

How can we address it?

Add documentation covering how to integrate v0.76 via just a view controller.

Why is it important?

It's currently not clear how to integrate React Native's new architecture in iOS app extensions.

Who needs this?

I am the author of expo-share-extension and would like to integrate the new architecture.

When should this happen (use version numbers if needed)?

Ideally in a next release

[cipolleschi]

Hi @MaxAst thanks for the question.

Currently there is no easy way to do so. The old architecture only required the RootView and the Bridge to set up React Native and this made it easy to spin up a React Native instance from wherever.

The New Architecture is a bit more complicated and we encapsulated all the required steps in the AppDelegate. We are working on some changes to make it easier to instantiate React native from wherever, decoupling it from the AppDelegate, but it is not ready yet.

As of today, the best way to achieve this is probably to copy some of the implementation in the RCTAppDelegate in your view controller. I can provide more details on how to do it if you start a PR in the repo (Also, I see that the codebase is in Swift, the new architecture is mostly in C++, so we would have to add some Objective-C/Objective-C++ files there).

cc. @okwasniewski which is helping out with the ReactNativeFactory effort.

[MaxAst]

Thanks a lot for the reply @cipolleschi! I've actually already gotten in touch with @okwasniewski after I discovered his PR for ReactNativeFactory - while I wait for him with this, I'll give rewriting the library in Objective-C a try. Will ping you here once I got a PR going 🙏

[cipolleschi]

@MaxAst There is no need to rewrite the whole library in Objective-C! You can just wrap the things you need in an Objective-C layer and keep the Swift implementation!

[MaxAst]

Hey @cipolleschi @okwasniewski, I just managed to get it work with RCTRootViewFactory! https://github.com/MaxAst/expo-share-extension/pull/50/files

However, I'm still not quite there yet - There seems to be a problem with styling because
the default font size of the Text and Button components is much smaller than the usual default and I cannot change it via fontSize. Other styling changes (e.g. backgroundColor on View) work correctly. Any ideas what could be causing this after a first glance over my PR?

This is the component:

import { type InitialProps, close } from "expo-share-extension";
import { Button, Text, View } from "react-native";

// if ShareExtension is your root component, url is available as an initial prop
export default function ShareExtension({ url }: InitialProps) {
  return (
    <View
      style={{
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <Text style={{ fontSize: 24 }}>{url}</Text>
      <Button title="Close" onPress={close} />
    </View>
  );
}

and this is what it looks like:

[cipolleschi]

no idea why you cant change the fontSize for text, honestly... It should not be related to the initialization path.

QQ: is working with metro? When it loads the bundle for shareExtension, what does Metro log? What happens when you press j in the metro terminal? I'm trying to understand if you can see this to verify that we are running on bridgeless:

[MaxAst]

yep, it's working with metro, logs look correct:

[JimmyLv]

Can't wait for this!