How To Integrate Native iOS App With React Native?

Do you want to learn the integration process of Native iOS app with React Native? Take a look further to broaden your understanding!

When you start as a developer, the initial days are never easy. Most of us always carry a huge bundle of doubts! That is why today, we would be addressing one of the frequently asked questions about React Native Technology.

Steps To Integrate Native iOS App With React Native!

So without any further ado, let us take a look at the applicable steps for the complete process.

Check Out The Steps For iOS Integration

• Set up React Native dependencies and directory structure.
• Understand what React Native components you will use in your app.
• Add these components as dependencies using CocoaPods.
• Develop your React Native components in JavaScript.
• Add a RCTRootView to your iOS app. This view will serve as the container for your React Native component.
• Start the React Native server and run your native application.
• Verify that the React Native aspect of your application works as expected.

Here Is The Complete List Of Prerequisites

1. Set up directory structure# – create a new folder for your integrated React Native project, then copy your existing iOS project to a /ios subfolder

2. Install JavaScript dependencies – Go to the root directory for your project and create a new package.json file and add the following contents:

{

“name”: “MyReactNativeApp”,

“version”: “0.0.1”,

“private”: true,

“scripts”: {

“start”: “yarn react-native start”

}

}

3. Install the react and react-native packages with — yarn add react-native

4. Add node_modules/ to your .gitignore file.

5. Install CocoaPods with – brew install cocoapods (but make sure you have brew installed)

Here’s How You Can Add React Native To Your iOS App!

1.Install the Command Line Tools. Choose “Preferences…” in the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

2.Configuring CocoaPods dependencies – Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate.

3. Create a pod file by running this command in the iOS folder of your project directory – pod init

4. Install pod dependencies – pod install

Code integration:

1. Create a index.js file in root of your project, index.js is the starting point for React Native applications, and it is always required

2. Add your React Native code to index.js – import React from ‘react’;

import {

AppRegistry,

StyleSheet,

Text,

View

} from ‘react-native’;

class RNHighScores extends React.Component {

render() {

var contents = this.props[‘scores’].map((score) => (

<Text key={score.name}>

{score.name}:{score.value}

{‘\n’}

</Text>

));

return (

<View style={styles.container}>

<Text style={styles.highScoresTitle}>

2048 High Scores!

</Text>

<Text style={styles.scores}>{contents}</Text>

</View>

);

}

}

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: ‘center’,

alignItems: ‘center’,

backgroundColor: ‘#FFFFFF’

},

highScoresTitle: {

fontSize: 20,

textAlign: ‘center’,

margin: 10

},

scores: {

textAlign: ‘center’,

color: ‘#333333’,

marginBottom: 5

}

});

// Module name

AppRegistry.registerComponent(‘RNHighScores’, () => RNHighScores);

3. Now we can tie our React Native component with a new native view in the ViewController that will actually contain it called RCTRootView also we need to point our RCTRootView to the location of the index.bundle resource (via NSURL) and tie it to the module.
4. Apple has blocked implicit cleartext HTTP resource loading. So we need to add the following our project’s Info.plist (or equivalent) file Add App Transport Security exception to info.plist file – <key>NSAppTransportSecurity</key>

<dict>

<key>NSExceptionDomains</key>

<dict>

<key>localhost</key>

<dict>

<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>

<true/>

</dict>

</dict>

</dict>

5. Run the server in the root directory of your project by – npm start

6. Run the app From the root of your project – react-native run-ios

Five Perks Of React Native Technology Every Developer Must Know!

• Faster development
• Excellent performance
• Resources are easily available
• Code can be shared across cross platforms
• Native code can be used

In A Nutshell

This is the complete process to Integrate Native iOS App With React Native. Technology is indeed one of the most fascinating domains that attract many businesses worldwide and provides scope to expand. Learning about the different technologies, the programming languages, and the changing trends are equally intriguing. So if you have any more doubts related to mobile app development, then feel free to reach out to us. We would be delighted to help you guys out!