Scenes on React Native 0.71

[gavrichards]

I posted this issue on the React Native Github but haven't had a response, maybe it's a bit too niche as most RN devs probably aren't using scenes.

facebook/react-native#37278

I wondered if anyone here might have any thoughts, particularly as this repository now relies on Scenes for newer functionality, or the Now Playing template.

[birkir]

I am updating our scene example to RN 71, so stay tuned!

[birkir]

Works well for me now.
https://github.com/birkir/react-native-carplay/blob/master/apps/example/ios/AppDelegate.swift

[gavrichards]

Thanks, I'll give this a try.

[gavrichards]

I have got this working on iPhone, not yet tested CarPlay.

Do you know anything about launchOptions versus connectionOptions?

launchOptions is used to pass information about how the app was launched, for example the payload from a push notification, or info about a Siri Shortcut.

With Scenes, "launchOptions" in the AppDelegate is always empty, and instead similar data is provided to the scene delegate as "connectionOptions".

But the RN Bridge expects launchOptions to be passed when it's initialised, and that happens in AppDelegate. So you can see how this is an issue.

To get around it, pre RN 0.71, I had to intercept connectionOptions in the Scene delegate's willConnectTo method, parse and rebuild it in the "launchOptions" format, and then initialise the Bridge there instead of AppDelegate. I did this by checking if "appDelegate.bridge == nil", as it could've already been initialised by the other scene delegate.

But with RN 0.71, initialisation of the bridge is abstracted, so there's seemingly no way to still do this.

Any help would be hugely appreciated. As things stand, RN CarPlay using Scenes, along with RN 0.71, can't really be used in an app that also uses push notifications or Siri Shortcuts.

[birkir]

https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/AppDelegate/RCTAppDelegate.mm#L55-L85

This is all the "abstraction", that was previously in RN70 and older inside AppDelegate.m, as you can see its rather easy to copy this into your own swift code. For example in the PhoneScene you could initialize the bridge like this.

guard let appDelegate = (UIApplication.shared.delegate as? AppDelegate) else { return }
if appDelegate.bridge == nil {
  appDelegate.bridge = appDelegate.createBridge(delegate: appDelegate, launchOptions: launchOptions)
}

Or create a wrapper function in your AppDelegate.swift and call it from a scene delegate.

func application() {
  return true;
}

func initStuff() {
  let application = UIApplication.shared;
  let launchOptions = /* your previously mapped options */
  let app = super.application(application, didFinishLaunchingWithOptions: launchOptions);
  // rest of code
}

[gavrichards]

Thanks @birkir. I would be inclined to go with the latter approach, but I think it suffers two issues:

1. It creates rootViewController, which we don't want to happen when the app is launched on CarPlay first (i.e. CarScene) - I think that should only be created when PhoneScene is initialised
2. It doesn't store rootView anywhere, which is useful for passing to libraries like react-native-bootsplash

[DanielKuhn]

Hi @gavrichards - while adding CarPlay-support to my react native app (with push notifications support) I am now stuck at exactly this point. Did you manage to find a solution yet?

I'm using react-native-splash-screen instead of react-native-bootsplash but the problem is the same: They both expect rootView.

[gavrichards]

@DanielKuhn If it helps, my PhoneScene.swift now looks like this:

import Foundation
import UIKit
import SwiftUI

class PhoneSceneDelegate: UIResponder, UIWindowSceneDelegate {
  var window: UIWindow?
  func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
    guard let appDelegate = (UIApplication.shared.delegate as? AppDelegate) else { return }
    guard let windowScene = (scene as? UIWindowScene) else { return }

    appDelegate.initAppFromScene(connectionOptions: connectionOptions)

    let rootViewController = UIViewController()
    rootViewController.view = appDelegate.rootView;

    let window = UIWindow(windowScene: windowScene)
    window.rootViewController = rootViewController
    self.window = window
    window.makeKeyAndVisible()

    // Added for react-native-bootsplash
    // Help for using Swift: https://github.com/zoontek/react-native-bootsplash/issues/245
    RNBootSplash.initWithStoryboard("Launch Screen", rootView: appDelegate.rootView as! RCTRootView) // <- initialization using the storyboard file name
  }

  func scene(_ scene: UIScene, continue userActivity: NSUserActivity) {
    RNSSSiriShortcuts.scene(scene, continue: userActivity)
  }
}

and then in my AppDelegate I have:

  /**
   Replicate didFinishLaunchingWithOptions from RCTAppDelegate with two differences:
   1. Store rootView property, so it can be used in PhoneScene to pass to RNBootSplash
   2. Not creating rootViewController as this should only be created when PhoneScene is initiated, not CarScene
   */
  func initAppFromScene(connectionOptions: UIScene.ConnectionOptions) {
    // If bridge has already been initiated by another scene, there's nothing to do here
    if (self.bridge != nil) {
      return;
    }
    
    let application = UIApplication.shared;

    let enableTM = false;
#if RCT_NEW_ARCH_ENABLED
    enableTM = self.turboModuleEnabled;
#endif
    RCTAppSetupPrepareApp(application, enableTM);
    
    self.bridge = super.createBridge(
      with: self,
      launchOptions: self.connectionOptionsToLaunchOptions(connectionOptions: connectionOptions)
    )
    
#if RCT_NEW_ARCH_ENABLED
    self.bridgeAdapter = RCTSurfacePresenterBridgeAdapter(initWithBridge: self.bridge, contextContainer:_contextContainer);
    self.bridge.surfacePresenter = self.bridgeAdapter.surfacePresenter;

    self.unstable_registerLegacyComponents();
    RCTComponentViewFactory.currentComponentViewFactory().thirdPartyFabricComponentsProvider = self;
#endif
    
    let initProps = self.prepareInitialProps();
    self.rootView = self.createRootView(with: self.bridge, moduleName: self.moduleName, initProps: initProps)
    self.rootView!.backgroundColor = UIColor.systemBackground
  }
  
  /**
   Convert ConnectionOptions to LaunchOptions
   When Scenes are used, the launchOptions param in "didFinishLaunchingWithOptions" is always null, and the expected data is provided through SceneDelegate's ConnectionOptions instead but in a different format
   */
  func connectionOptionsToLaunchOptions(connectionOptions: UIScene.ConnectionOptions) -> [UIApplication.LaunchOptionsKey: Any] {
    var launchOptions: [UIApplication.LaunchOptionsKey: Any] = [:];

    if connectionOptions.notificationResponse != nil {
      launchOptions[UIApplication.LaunchOptionsKey.remoteNotification] = connectionOptions.notificationResponse?.notification.request.content.userInfo;
    }
    
    if !connectionOptions.userActivities.isEmpty {
      let userActivity = connectionOptions.userActivities.first;
      let userActivityDictionary = [
        "UIApplicationLaunchOptionsUserActivityTypeKey": userActivity?.activityType as Any,
        "UIApplicationLaunchOptionsUserActivityKey": userActivity!
      ] as [String : Any];
      launchOptions[UIApplication.LaunchOptionsKey.userActivityDictionary] = userActivityDictionary;
    }
    
    return launchOptions;
  }

[DanielKuhn]

@gavrichards Thanks a ton!
I got my app running on the phone by moving the RNSplashScreen.show()-call to after the rootView-creation from @birkir 's example and then launching the CarPlay-app afterwards, but I bet I'll come back to this once I start fiddling around with starting it in CarPlay first.

Thanks to @birkir for the awesome work on this package by the way!

[eduardooris]

Can you tell me if it's possible to do it without transforming the project into Swift?

@DanielKuhn @birkir @gavrichards

[DanielKuhn]

@eduardooris : I found that the Podverse sources contain a "regular" ObjC implementation using scenes: https://github.com/podverse/podverse-rn
Seems to work just as well.

[eduardooris]

@DanielKuhn I'm building a screen for CarPlay in a Swift class. But my application is in React Native with Objective-c. As I'm using the carplay-driving-task right, if I don't declare the scenes in the .plist, xcode gives me the error: application does not implement carplay template application lifecycle methods in its scenedelegate. I already configured the entire .plist. But, my iPhone app is completely dark. I realized it was because I hadn't declared the scenes in Delegate.
Can you tell me how I can do this in Objective-c ?: func application(_ application: UIApplication, configurationForConnecting connectingSceneSession: UISceneSession, options: UIScene.ConnectionOptions) -> UISceneConfiguration {
if (connectingSceneSession.role == UISceneSession.Role.carTemplateApplication) {
let scene = UISceneConfiguration(name: "CarPlay", sessionRole: connectingSceneSession.role)
scene.delegateClass = CarSceneDelegate.self
return scene
} else {
let scene = UISceneConfiguration(name: "Phone", sessionRole: connectingSceneSession.role)
scene.delegateClass = PhoneSceneDelegate.self
return scene
}
}

[DanielKuhn]

@eduardooris as commented above: Check the podverse-rn repo: https://github.com/podverse/podverse-rn/blob/develop/ios/podverse/AppDelegate.m#L67

[eduardooris]

@DanielKuhn I gave it a read. But, I saw that there is no AppDelegate