Support brownfield apps

[DanielZlotin]

We should support integrating into existing native apps

[joshjhargreaves]

@DanielZlotin : if you don't mind me saying so, this is quite a change in stance from your comment on this issue: https://github.com/wix/react-native-navigation/issues/813#issuecomment-284391927. Is there any reason motivating this change in stance?

[DanielZlotin]

@joshyhargreaves I'm always open to questions :) nothing changed, my stance is the same: cocoapods will not be supported, swift shouldn't be a problem, and support for brownfield apps (in other words, being extensible) - as I said before:

I'm not against supporting this, but this would come at a maintenance cost.

If you would like that, please open an issue with this request and we'll try to implement it after >v2.0.0 is out.

So I want to give it a try

[k0nserv]

Hey, I'm interested in support for existing apps so I'm really happy you are tackling that! Any particular reason to not support CocoaPods? It's the preferred dependecy option in most existing apps after all

[MattFoley]

Would anyone happen to have a summary of what would need to be done here to support this? We may be interested in taking this on for you.

[MattFoley]

First glance, the two main issues are just:

1. Bridge/JS loading (splash screen and window manipulation included)
2. Usage of UIApplication, mainly UIApplication's delegate.rootViewController field.

I feel like I have a pretty good understanding of what would be required for 2, but not for 1. I made a good list of rootViewController usages. These would need to be migrated to use a root view controller defined by the host application, rather than fetched directly from the UIApplication.

UIApplication usages or rootViewController usages.
* RNNSideMenuSideOptions
    * Uses rootViewController, assumes it is an RNNSideMenuController
        * Will need to modify given rootViewController reference/setter/getter
* RNNBridgeManager
    * onBridgeWillReload, sets rootViewController to null
        * Will need to modify given rootViewController reference/setter/getter
* RNNCommandsHandler
    * setRoot:completion: sets up rootViewController for application
        * Will need to modify given rootViewController reference/setter/getter
* Constants.m 
    * topBarHeight
    * statusBarHeight
    * bottomTabsHeight
* RNNModalManager
    * dismissAllModals 
        * Attempts to dismiss from rootViewController
        * Should start with setter/getter for rootViewController
    * topPresentedVC
        * Attempts to search just through presentedViewControllers for top most VC
        * Should start with setter/getter for rootViewController
* RNNSplashScreen
    * Creates it’s own window
        * Assigns it’s window to the app delegates key window root view.

I'll need some more time, and probably some fiddling, to sketch out a plan to break it up completely.

[MattFoley]

Any updates here? I see you're now in v2 Alpha.

[guyca]

Hey @MattFoley, Sorry for the delayed response.

We’re still interested in supporting brownfield apps. Unfortunately, as the Wix app doesn’t exactly require this feature, we will probably never get to implement it. We simply can’t commit to it. That being said, we are planning to improve support for external screens. External screens will become first class citizens in RNN and have full access the the native Navigator, meaning the entire public api exposed by Navigation.js will be available to them.

We’re fully open to pr’s and collaborators. While we’re not able to work on this issue full time, we’re always available to assist and would love to help out as much as we can. If you’d like to take ownership on this issue, you can reach me on discord, twitter or slack

[anhtuank7c]

example for ios right here: https://github.com/anhtuank7c/scooter-baby

[Natteke]

example for ios right here: https://github.com/anhtuank7c/scooter-baby

@anhtuank7c Hi! Thanks for example!

I have managed to do so with latest stack in my project: RNN 6 RN 63 Xcode 13 Swift 5

But after a call of ReactNativeNavigation.bootstrap(jsSourceCode, launchOptions: nil);nothing appears on screen, but js code in terminal was compiled and even screenLog was shown: Running "HighScores" with {"rootTag":11,"initialProps":{"componentId":"Component5"}}

I also was unable to run your example because xcode 13 does not runs with RN 0.59 because of https://github.com/facebook/react-native/issues/25138. I tried to make everything like you did, except things in ReactCommunicator and scooter baby-Bridging-Header.h. I dont really get when that code runs

[anhtuank7c]

@Natteke I don't have xcode 13 and the example using RNN 2.18.5 It's been more than a year since the example was created.

I have no idea about RNN 6 (Apis may changes)

[Natteke]

@anhtuank7c thats true, i understand. I just assumed you may have any ideas.

This is the single thread and example i have found :c

[anhtuank7c]

@Natteke I just added a script to fix RN on Xcode 11+ Pull the latest code then run node ./scripts/rnMonkeyPaths.js or it will execute automatically right after npm install Remove an existing app in simulator/device if this example exists. Run the app again. I just do a small example, don't have enough motivation to make it more helpful. So sorry.

[Natteke]

@anhtuank7c it works! Thank you very much! At least i see now that it was possible, and i got motivated :D

I will spend today and tomorrow in tries to run this with latest libraries. Will answer here in case of success.

[Natteke]

i made a repo where i currently stuck. It compiles fine, but dont render anything https://github.com/Natteke/RNN-swiftt-test

i have no idea what RNN wants from me to do. Only assuming that RNN dont know where to render UI in this case

[anhtuank7c]

@Natteke Get started by reading RNN code. You may need some cups of Vodka to read all of them ^^! (kidding)

[rizwankce]

@Natteke I just fixed it on your repo. Main reason is because RNN is heavily depends on UIApplication and UIApplicationDelegate windows. It will create a new window and load up the splash screen first and then load the first React Native view whichever you set via setRoot.

https://github.com/Natteke/RNN-swiftt-test/pull/1

I have been using RNN on my brownfield work apps (on App store) for almost an year. I have started using it from v2 and recently had to upgrade to v6 to fix iOS 13 issues. There are no changes I did in the lib to make it work. But its pretty much self explanation-able if you take a look at RNN source code. Let me know if you need any help.

Also, to make a note - I do have some issues on relaunch of the RNN views due to its maintaining window by its own. Sometime views gets added twice.

[Natteke]

@rizwankce thank you very much! It works!

Judging on your changes it is really working almost out of the box. Awesome :)

I came to RN from frontend and just finished beginners java and swift course, so it's extremely hard for me to read Obj-C. But one day i think the time will come to deep dive in RNN sources :D

About issue on relaunch. You mean relaunch while switching between native/RN windows? Or those views doubles after some JS code calls?

[rizwankce]

@Natteke I meant switching between native and RN views. I just figured out the root cause and made a fix already. I have been procrastinating to fix this bug for so long 😛

Here is what is happening - when I switch between RNN and Native - RNN creates a new UIWindow and set it to UIApplication. Then we I try to come back to native - I created the window again by thinking ARC will handle the previously created window and deallocate it from memory. But its not. So I had to manually delete the windows being created and create new via RNN. So I don't have to change the RNN code.

regarding the Obj-C source, its not that hard to learn and Im sure you will learn it quickly. Let me know if need any help. Contacts are in my GitHub profile page. I might actually write a blog post of this pretty soon.

[byunlee]

I'm looking for a way to freely navigating between RN and native on a complex navigation stack. What is the latest information on this issue on supporting the brown field app? The issue is still open but some say it is currently working. If it is supported, what are some good resources around this?

[evanjmg]

@byunlee In doing some research (not part of WIX), it seems AppRegister.registerComponent() + react-navigation + react-native-modules and their callbacks are the only way to do this. The owners of this repo have stated multiple times in issues that they do not support this functionality. It 'works' but only as a modal - not on any exisiting RCT Views. It's pretty easy to use any JS based navigation and hook it up manually yourself with hooks from native modules.