CODEWITHSUNDEEP
iosobjective-cswiftreactjsreact-native
Sudhanshu Gupta
Sudhanshu Gupta

Reputation: 2315

Integrations of an iOS component in React Native

I am new to the development of React Native, I know iOS. Just want to know about few points:

  1. Can we add iOS (swift or objective C) code in a React Native App?
  2. Can we add React Native Views into the existing iOS app?

I have googled and got the examples which point to that 2nd one is quite possible and Instagram did it in edit profile screen.

But I cannot find examples where it's a React Native app and we introduces swift or Objective-C code in between.

Please if anyone knows of any links or examples available for Case 1, please do let me know about it.

2nd question:

Upvotes: 2

Views: 1261

Answers (4)

Ian
Ian

Reputation: 2610

To bridge an iOS native module into React Native, you can follow along the official instructions: iOS Native Modules.

To paraphrase the important parts:

  1. Open your .xcworkspace file in your ios folder to open XCode
  2. Select File > New > File
  3. Select header file
  4. Name the header and select your project and its tests as the targets
//  RCTCalendarModule.h
#import <React/RCTBridgeModule.h>
@interface RCTCalendarModule : NSObject <RCTBridgeModule>
@end
  1. Select File > New > File
  2. Select Objective-C file. Name it the same as the header but with .m instead of .h. Select your project and its tests and targets
// RCTCalendarModule.m
#import "RCTCalendarModule.h"

@implementation RCTCalendarModule

// To export a module named RCTCalendarModule
RCT_EXPORT_MODULE();

@end
  1. In your React Native App or component, import NativeModules and use your new method
import {NativeModules, Button} from 'react-native';

const {CalendarModule} = NativeModules;

const onPress = () => {
  CalendarModule.createCalendarEvent('testName', 'testLocation');
};

Note: You will need to keep rebuilding your ios app as you iterate (eg. run yarn ios after making a change to the .m or .h files)

For your second question, you can also add React Native into existing iOS apps. Follow these official instructions: Integration with Existing Apps.

Upvotes: 0

SHUBHAM TYAGI
SHUBHAM TYAGI

Reputation: 1

yes we can do

import {Platform} from 'react-native';

const majorVersionIOS = parseInt(Platform.Version, 10);
if (majorVersionIOS <= 9) {
  console.log('Work around a change in behavior');
}

Upvotes: 0

Sudhanshu Gupta
Sudhanshu Gupta

Reputation: 2315

Can we add iOS (swift or objective C) code in a React Native App

Yes, I was able to do so:-

  1. I created a React Native project, compiled it and run it in the simulator.
  2. Go to the iOS folder in directory structure in the project and open the .xcodeproj in xcode.
  3. Create an objective c file (MyObjcClass) and make functions which you want to use in React.

MyObjcClass.h

#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>

@interface MyObjcClass : NSObject <RCTBridgeModule>

@end

MyObjcClass.m

#import "MyObjcClass.h"

@implementation MyObjcClass

// tells react bridge to bridge our created class
RCT_EXPORT_MODULE()

- (NSDictionary *)constantsToExport {
  return @{@"CreatedBy": @"Type any number and get Square"};
}

RCT_EXPORT_METHOD(squareNumber:(int)number getCallback:(RCTResponseSenderBlock)callback) {
  callback(@[[NSNull null], [NSNumber numberWithInt:(number*number)]]);
}

Now we can call these methods in JS. Below I will show how to call objective c in React.

App.js

import React from 'react';
import { StyleSheet, Text, View, TextInput, Button } from 'react-native';

// to import native code
import {NativeModules} from 'react-native';

var MyObjcClass = NativeModules.MyObjcClass;

export default class App extends React.Component {

  state = {
    number:0
  };

  squareMe(num) {
    if (num == '') {
      return;
    }

    MyObjcClass.squareNumber(parseInt(num), (error, number) => {
      if (error) {
        console.error(error);
      } else {
        this.setState({number: number});
      }
    })
  }

  render() {

    return (
      <View style={styles.container}>
        <Text style={styles.spaceBetween}>Objective C inclusion</Text>
        <TextInput placeholder="type a number ...." style={styles.input} onChangeText={(text) => this.squareMe(text)}/>
        <ListItem placeName={this.state.number}></ListItem>
      </View>
      );
  }
}

Upvotes: 1

tuledev
tuledev

Reputation: 10317

Yes. You can do both of them

1.

https://facebook.github.io/react-native/docs/platform-specific-code.html

2.

https://codeburst.io/integrate-react-native-into-an-existing-app-ios-87c947a16044 https://facebook.github.io/react-native/docs/integration-with-existing-apps.html

Upvotes: 2

Related Questions