First Wiki draft on code generation tool

react-native-integration-tool.md

React Native Bridge Generator

This is a Visual Code Extension that allows you to generate native code (swift and java) to initialize and interact with React Native views.

Background

The Problem

The React Native framework comes with a set of APIs that allows us to load and interact with views. For the React Native SDK to be able to retrieve our view we need to specify our bundle containing the Javascript sources, and pass along the props we wanna initialize this view with. For every view we initialize we might also need to send messages back and forth between both ends of our application (native side and react native side). To accomplish this we need to conform to a protocol (iOS) and implement an interface (Java).

It can be tedious and time consuming to write all the code needed to properly integrate React Native views in existing mobile apps, this might defeat the purpose of using react native to boost developer productivity and make mobile development simpler.

Another problem is that when using the React Native SDK we need to use JSON compatible types like NSDictionary or ReadableMap, which means we need to work with weakly-typed objects which is inconvenient and error prone.

The Solution

This VSCode extension takes care of generating all boiloerplate code needed to integrate a React Native view into a native app. To generate all the needed code we use Typescript interfaces along with some extra information to define the way our views will be initialized and the events emited from the react native side that we wanna listen to from the native side.

Example:

The following interface defines the props we'll use to initialize our view

interface ActionButtonProps extends React.Props<ActionButton> {
  text?: string // swift: String java: string
  disabled?: boolean // swift: Bool java: Boolean
}

From this definition we can generate strongly-typed code to initialize our native view

Swift model to initialize view

From the previously showned interface we can generate the following structure

We generate

import Foundation;

public struct ActionButtonProps: Codable { 
	public let text: String
	public let disabled: Bool
}

Then we can also use an interface to define the behavior or our component like

interface ActionButton { 
  didTapAt(time: string): void
}

Which generates a class with protocols definition so that we can subscribe to events

import UIKit
import ReactNative

public class ActionButtonView: RNBView {
	weak var viewDelegate: ActionButtonViewDelegate?

	public init(model: ActionButtonModel, delegate: ActionButtonViewDelegate) { 
		viewDelegate = delegate
		let bundleUrl = Bundle(for: ActionButtonViewDelegateProxy.self).url(forResource: "main", withExtension: "jsbundle")!
		super.init(moduleName: "RCMA", jsBundleUrl: bundleUrl, initialProps: model.toJSON(), delegate: self)	}
}


extension ActionButtonView: RNBViewDelegate {
	public func rnbView(_ view: RNBView, didPostEvent event: [String: Any]) {
		guard let rawEvent = event["event"] as? Int,let actionbuttonviewEvent = ActionButtonViewEvent(rawValue: rawEvent) else {
			return
		}

		DispatchQueue.main.async {
			switch actionbuttonviewEvent {
			case 0:
			let time = event["time"] as! Date
			didTapAt(time: time)

			}
		}
	}
}

This tool generates both Java and Swift code, making it possible to integrate React Native views with less effort.