My first experiences with React Native: Integrating with existing iOS project

I was recently working on integrating react native with one of the existing iOS projects, where i was trying to use react native for business logic instead of UI. There were a few challenges while doing the same.

Firstly, I was able to successfully integrate react native with existing iOS application as per the integrating guide [Ref: https://facebook.github.io/react-native/docs/integration-with-existing-apps]. But, when i tried to log a statement without view being rendered, i was unable to do so. Below are the steps i followed to make it work.

Here is my index.js code snippet:

import React from ‘react’;
import { AppRegistry} from ‘react-native’;

console.log(‘RN Initialized!!!!!’);

class ReactNativeComponent extends React.Component {
}
AppRegistry.registerComponent(‘ReactNativeComponent’, () => ReactNativeComponent);

As per the above code, i have only a logging statement without any view being rendered.

And here is my AppDelegate.m

#import “AppDelegate.h”

#import <React/RCTBundleURLProvider.h>

#import <React/RCTBridge.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions

{

RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];

return YES;

}

-(NSURL *)sourceURLForBridge:(RCTBridge *)bridge

{

return [[NSBundle mainBundle] URLForResource:@”main” withExtension:@”jsbundle”];

}

@end

When [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions] is executed it should initialize the react native bridge and execute statements in index.js. But, i was seeing the log only when bridge is attached with a view.

To fix this i declared RCTBridge in AppDelegate.h as a public declaration and used the same in AppDelegate.m

In AppDelegate.h

#import <React/RCTRootView.h>

@property (nonatomic, strong) RCTBridge *bridge;

In AppDelegate.m

self.bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];