Show List
Tutorials > React Native > Integrating with native code

Integrating with native code

React Native allows developers to write native code that can interact with the app's JavaScript code, giving them access to the platform-specific APIs and features. This integration with native code is useful in cases where the app needs to perform a task that is not possible with React Native alone.

Here are some examples of how you can integrate with native code in React Native:

  1. Native Modules: React Native provides a way to create native modules that can be imported into JavaScript and used in the React Native app. Native modules are written in the platform-specific language (e.g., Swift or Java) and provide a JavaScript API for interacting with them.

Here is an example of a simple native module in Swift that exposes a method to add two numbers:

// MyModule.swift
@objc(MyModule)
class MyModule: NSObject {
  @objc
  func add(a: NSNumber, b: NSNumber, callback: RCTResponseSenderBlock) -> Void {
    let result = a.intValue + b.intValue
    callback([result])
  }
}
And here is an example of how you would use the module in JavaScript:
// index.js
import { NativeModules } from 'react-native';
const { MyModule } = NativeModules;

MyModule.add(2, 3, (result) => {
  console.log(result); // 5
});
  1. Native Components: React Native also provides a way to create custom native components that can be used in the React Native app. These components are written in the platform-specific language and can be styled and laid out using React Native.

Here is an example of a simple native component in Swift that implements a custom button:

// MyButton.swift
import UIKit

@objc(MyButton)
class MyButton: UIView {
  let button = UIButton(type: .system)

  override init(frame: CGRect) {
    super.init(frame: frame)
    addSubview(button)
    button.translatesAutoresizingMaskIntoConstraints = false
    NSLayoutConstraint.activate([
      button.centerXAnchor.constraint(equalTo: centerXAnchor),
      button.centerYAnchor.constraint(equalTo: centerYAnchor),
    ])
  }

  required init?(coder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
  }
}
And here is an example of how you would use the component in JavaScript:
// index.js
import React from 'react';
import { View, Text, NativeModules } from 'react-native';
const { MyButton } = NativeModules;

function App() {
  return (
    <View>
      <MyButton />
    </View>
  );
}

export default App;
By integrating with native code in React Native, you can take advantage of the full power of the platform and create a high-performing, feature-rich app.


Next: Handling user inputs and events

    Leave a Comment

  • captcha text