Dismiss a React Native RCTRootView back to a Native ViewController

Question

I'm creating an app to integrate react-native with an existing Swift app.

I've looked into similar issues:

• React-Native: Dismiss/Exit React-Native View back to Native
• How can I go back to native view controller from react-native page?

While following different tutorials:

• React Native calling class methods on native Swift
• Swift in React Native the ultimate guide
• React Native tutorial integrating in an existing app*

And the official docs

The problem is: all of them are outdated (but the docs). Most of them use the legacy Navigation rather than Stack Navigator. One of the tutorials (the one with an asterisk) shows how to dismiss the React Native app back to the Native app using the rootTag of the app, but again, this was done with the legacy Navigation.

If I try to do the same, I'm not able to see the props from my app.

I have a single Storyboard with a Button inside that when clicked calls this UIViewController:

ButtonController

import Foundation
import UIKit
import React

class ButtonController: UIViewController  {
    @IBOutlet weak var button: UIButton!

    @IBAction func buttonClicked(_ sender: Any) {
        let data:[String : String] = ["onNavigationStateChange": "{handleNavigationChange}",
                                      "uriPrefix":"/app"];
        let rootView = MixerReactModule.sharedInstance.viewForModule("ReactNativeApp", initialProperties: data)

        let viewController = UIViewController()
        viewController.view = rootView
        self.present(viewController, animated: true, completion: nil)
    }
}

And when I start the app I can see this:

2019-10-23 10:29:30.021 [info][tid:com.facebook.react.JavaScript] Running "ReactNativeApp" with {"rootTag":1,"initialProps":{"uriPrefix":"/app","onNavigationStateChange":"{handleNavigationChange}"}}

But when I try to access the this.props property on React Native code I get undefined.

index.js

import HomeScreen from './components/HomeScreen'
import {AppRegistry} from 'react-native';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';

const MainNavigator = createStackNavigator({
  Home: {screen: HomeScreen}
}, {
  initialRouteName: 'Home'
})

const NavigationApp = createAppContainer(MainNavigator);

AppRegistry.registerComponent('ReactNativeApp', () => NavigationApp)

console.log("NANANA1", this)
console.log("NANANA2", this.routeName)
console.log("NANANA3", MainNavigator)
console.log("NANANA4", MainNavigator.props)
console.log("NANANA5", NavigationApp)
console.log("NANANA6", NavigationApp.props)

export default NavigationApp

HomeScreen.js

import React from 'react';
import {Text, View, Button, NativeModules} from 'react-native';

var RNBridge = NativeModules.RNBridge;

export default class HomeScreen extends React.Component {
    static navigationOptions = {
      headerTitle: () => (
        <Text>'Welcome'</Text>
      ),
      headerLeft: () => (
        <Button title="Dismiss" onPress={() => {
          console.log("WOLOLO: ", RNBridge)
          console.log("ROGAN: ", this._reactInternalFiber.tag)
          RNBridge.dismissPresentedViewController(this._reactInternalFiber.tag)
          // RNBridge.dismissPresentedViewController(1)
        }}/>
      )
    };
    render() {
      console.log('KIKIKI', this._reactInternalFiber.tag)
      console.log("MMMMMMM: ", this.props)
      return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Text>Home Screen</Text>
        </View>
      );
    }
}

These are the 2 files that I use in RN to generate my View. I've tried many things to get the rootTag value, and the only one that seems to provide this value is (tag and rootTag on XCode are the same (1))

this._reactInternalFiber.tag

But I don't know how to send these values to my headerLeft method to use the same tag so that when I press the Dismiss button it calls the Swift code for dismissPresentedViewController.

How can I dismiss my VC effectively? Or at least get the rootTag being passed from Swift to my headerLeft() method?

I'm using these versions of react-native:

react-native-cli: 2.0.1
react-native: 0.61.2

Answer 1

If your are looking to dismiss the native swift view controller presented from RN View

self.dismiss(animated: true, completion: nil)

I present the swift view controller as below

 let modelVC = ModelViewController()  <-- sub class of UIViewController

 DispatchQueue.main.async {
   let navController = UINavigationController(rootViewController: modelVC)
   navController.modalPresentationStyle = .fullScreen
   let topController = UIApplication.topMostViewController()
   topController?.present(navController, animated: true, completion: nil)
 }

I have an extension on the UIApplication to find out what is the top most view controller which is used above

extension UIApplication {

  class func topMostViewController(controller: UIViewController? = UIApplication.shared.keyWindow?.rootViewController) -> UIViewController? {

    if let navigationController = controller as? UINavigationController {
      return topMostViewController(controller: navigationController.visibleViewController)
    }

    if let tabController = controller as? UITabBarController {
      if let selected = tabController.selectedViewController {
        return topMostViewController(controller: selected)
      }
    }

    if let presented = controller?.presentedViewController {
      return topMostViewController(controller: presented)
    }

    return controller
  }
}