Monday, 28 October 2019

How to dismiss a React Native RCTRootView back to a Native ViewController

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

I've looked into similar issues:

While following different tutorials:

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=>
          <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


from How to dismiss a React Native RCTRootView back to a Native ViewController

1 comment:

  1. Hey! This is my first visit to your blog! We are
    a collection of volunteers and starting
    a new project in a community in the same niche. Your blog provided us beneficial information to work on. You have done a marvellous job!

    React Native Development Company
    Reactjs Development Company Texas

    ReplyDelete