In the beginning, we have to answer the question: What is a brownfield app?
The term brownfield was originally used in construction and development to reference land that at some point was occupied by a permanent structure. In a brownfield project, the structure would need to be demolished or renovated. Today, the term brownfield project is used in many industries, including software development, to mean to start a project based on prior work or to rebuild (engineer) a product from an existing one.
~Vangie Beal
So in our case, it means that we want to run a react-native application as a part of a native one that is already developed with technologies like Java, Kotlin, Objective-C or Swift.
How does it work?
Let’s assume that we have a native iOS application where we want to create a new screen using react-native app that is already implemented. That screen will navigate to another screen inside the react-native application.
In order to make it works, we need to do a few things.
Add react-native to project:
- First of all, we need to add our react-native app to existing native project. We will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods for it. Let’s edit or create Podfile in the native project and add React and all needed subspecs with path pointed to
node_modulesand runpod installcommand
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
platform :ios, '9.0' require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules' target 'NativeExample' do pod 'React', :path => '../node_modules/react-native/' pod 'React-Core', :path => '../node_modules/react-native/React' pod 'React-DevSupport', :path => '../node_modules/react-native/React' pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS' pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation' pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob' pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image' pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS' pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network' pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings' pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text' pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration' pod 'React-RCTWebSocket', :path => '../node_modules/react-native/Libraries/WebSocket' pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec' pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec' pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec' pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact' pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi' pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor' pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector' pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga' use_native_modules!('../..') end |
Run react-native app:
- When the react-native app is properly linked to the native one, we need to create a class that implements
RCTBridgeDelegate– at least thesourceURLForBridgemethod that is needed to specify which JS bundle will be used.
|
1 2 3 |
- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge { return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; } |
- Then create a react-native bridge instance (
RCTBridge) with the previously implemented class as the delegate andlaunchingOptionsdictionary if needed.
|
1 |
bridge = [[RCTBridge alloc] initWithDelegate:delegate launchOptions:launchOptions]; |
- Create
ViewControllerwhere we will set therootViewof the react-native app as a view property.
|
1 2 3 |
RCTRootView *reactView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"MainComponent" initialProperties:nil] UIViewController *vc = [[UIViewController alloc] init]; vc.view = rootView; |
- Finally, we can push our react-native view controller to the stack
|
1 |
[self presentViewController:vc animated:YES completion:nil]; |
Additional steps:
Note: In debug mode, we need packager to serve JS bundle. However, Apple has blocked implicit cleartext HTTP resource loading. So we need to add the following our project’s Info.plist (or equivalent) file.
|
1 2 3 4 5 6 7 8 9 10 11 |
<key>NSAppTransportSecurity</key> <dict> <key>NSExceptionDomains</key> <dict> <key>localhost</key> <dict> <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key> <true/> </dict> </dict> </dict> |
In addition, we can add scripts to Build Phases which will build react-native bundle and images for us
export NODE_BINARY=node ../node_modules/react-native/scripts/react-native-xcode.sh
And the script that will run the packager
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
export RCT_METRO_PORT="${RCT_METRO_PORT:=8081}" echo "export RCT_METRO_PORT=${RCT_METRO_PORT}" > "${SRCROOT}/../node_modules/react-native/scripts/.packager.env" if [ -z "${RCT_NO_LAUNCH_PACKAGER+xxx}" ] ; then if nc -w 5 -z localhost ${RCT_METRO_PORT} ; then if ! curl -s "http://localhost:${RCT_METRO_PORT}/status" | grep -q "packager-status:running" ; then echo "Port ${RCT_METRO_PORT} already in use, packager is either not running or not running correctly" exit 2 fi else open "$SRCROOT/../node_modules/react-native/scripts/launchPackager.command" || echo "Can't start packager automatically" fi fi |
Navigation issues:
We have all set, however, there is an issue with swipe to back functionality. We are not able to back to our native screen via a swipe gesture nor by Go Back button. We need some mechanism that would make possible to say from react-native to the native part that we want back to our native screen or that we want to enable/disable native PopGestureRecognizer . It could be solved by a react-native native module which will send notification by NSNotificationCenter .
BUT wait… Can’t it be done in simpler way? Do we really need to take care of RCTBridgeDelegate, RCTBridge, RCTRootView?
Of course, it might be easier 🙂 We can use react-native-brownfield package which will help us with navigation’s issues and provide a nice API to run a react-native application.
How does it work with react-native-brownfield?
We want to achieve exactly the same effect as before but we will use react-native-brownfield library
Add react-native to project:
The theory is the same as I described in the previous part of this article but with some facilities. In order to run our react-native app in native one using react-native-brownfield we need to add that package as a dependency to package.json using:
|
1 |
npm install @callstack/react-native-brownfield |
or
|
1 |
yarn add @callstack/react-native-brownfield |
Next, we need to add react-native app as we did in Add react-native to project point using CocoaPods.
Run react-native app:
And now the fun begins 🙂 Instead of creating a bridge by ourselves we can simply use ReactNativeBrownfield package.
Import ReactNativeBrownfield package and create the instance of it with the entry file name.
|
1 2 |
ReactNativeBrownfield *reactNativeBrownfieldManager = [ReactNativeBrownfield shared]; reactNativeBrownfieldManager.entryFile = @"index" |
We are ready to run react-native app using startReactNative method of our reactNativeBrownfieldManager
|
1 2 3 |
[reactNativeBrownfieldManager startReactNative:^(void){ NSLog(@"React Native started"); }]; |
And that’s it. We can push react-native app view controller to the navigation stack with user-friendly API.
|
1 |
[[self navigationController] pushViewController:[[ReactNativeViewController alloc] initWithModuleName:@"MainComponent"] animated:YES]; |
Additional steps:
All additional steps are needed to be added here as well
- Edit
Info.plistfile to allow connection to the packager - Add script to
Build Phasesto run packager - Add script to
BuildPhasesto bundle JS code and assets
Navigation issues:
react-native-brownfield comes with a solution for issues mentioned above. It exposes two methods that can be used in JS code to toggle back gesture and pop to a native screen.
ReactNativeBrownfield.setNativeBackGestureAndButtonEnabled– to toggle iOS native back gestureReactNativeBrownfield.popToNative– to pop to the native screen
And voilà! We are ready to go 🙂
Conclusion:
Lastly, it is a popular thing to use react-native within existing native apps especially by larger organizations that have multiple teams working on the same app for multiple platforms. Thanks to react-native-brownfield the integration is easier, enjoyable and some issues that exist in every react-native brownfield app are solved 🙂
Working examples of using react-native-brownfield are inside example directory
