@callstack/react-native-brownfield

A set of helpers to make your brownfield integration smooth and easy.

Features

• Easily integrate React Native with an existing native app
• Start React Native with one method and invoke code as soon as it's loaded
• Compatible with both legacy and new React Native architecture!
• Reuse the same instance of React Native between different components
• Use predefined native building blocks - crafted for React Native
• Disable and enable native gestures and hardware buttons from JavaScript
• Works well with any native navigation pattern, as well as any React Native JavaScript-based navigation
• Compatible with all native languages Objective-C, Swift, Java and Kotlin
• Supports UIKit and SwiftUI on iOS and Fragments and Jetpack Compose on Android

Installation

The React Native Brownfield library is intended to be installed in a React Native app that is later consumed as a framework artifact by your native iOS or Android app.

In your React Native project run:

npm install @callstack/react-native-brownfield

Usage

Packaging React Native app as a framework

First, we need to package our React Native app as an XCFramework or Fat-AAR.

With RNEF

Follow Integrating with Native Apps steps in RNEF docs and run:

• rnef package:ios for iOS
• rnef package:aar for Android

With custom scripts

Instead of using RNEF, you can create your own custom packaging scripts. Here are base versions for iOS and Android that you'll need to adjust for your project-specific setup:

• Example iOS script
• Example Android script

Native iOS app

In your native iOS app, initialize React Native and display it where you like. For example, to display React Native views in SwiftUI, use the provided ReactNativeView component:

import SwiftUI
import ReactBrownfield # exposed by RN app framework

@main
struct MyApp: App {
  init() {
    ReactNativeBrownfield.shared.startReactNative {
      print("React Native bundle loaded")
    }
  }

  var body: some Scene {
    WindowGroup {
      ContentView()
    }
  }
}

struct ContentView: View {
  var body: some View {
    NavigationView {
      VStack {
        Text("Welcome to the Native App")
          .padding()

        NavigationLink("Push React Native Screen") {
          ReactNativeView(moduleName: "ReactNative")
            .navigationBarHidden(true)
        }
      }
    }
  }
}

For more detailed instructions and API for iOS, see docs for:

• Objective C
• Swift

Native Android app

In your native Android app, create a new RNAppFragment.kt:

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import com.callstack.rnbrownfield.RNViewFactory # exposed by RN app framework

class RNAppFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?,
    ): View? =
        this.context?.let {
            RNViewFactory.createFrameLayout(it)
        }
}

Add a button to your activity_main.xml:

<Button
    android:id="@+id/show_rn_app_btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Show RN App"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

Add a fragment container:

<FrameLayout
    android:id="@+id/fragmentContainer"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Update your MainActivity to initialize React Native and show the fragment:

class MainActivity : AppCompatActivity() {
    private lateinit var showRNAppBtn: Button

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        ReactNativeHostManager.shared.initialize(this.application)

        showRNAppBtn = findViewById(R.id.show_rn_app_btn)
        showRNAppBtn.setOnClickListener {
            supportFragmentManager
                .beginTransaction()
                .replace(R.id.fragmentContainer, RNAppFragment())
                .commit()
        }
    }

}

For more detailed instructions and API for Android, see docs for:

• Java
• Kotlin

JavaScript Module

Besides native components, we are exposing JavaScript functions to control the behavior of those components from React Native app.

To use the module, import it:

import ReactNativeBrownfield from '@callstack/react-native-brownfield';

and use the available methods:

setNativeBackGestureAndButtonEnabled(enabled: boolean)

A method used to toggle iOS native back gesture and Android hardware back button.

ReactNativeBrownfield.setNativeBackGestureAndButtonEnabled(true);

popToNative(animated[iOS only]: boolean)

A method to pop to native screen used to push React Native experience.

ReactNativeBrownfield.popToNative(true);

Note: These methods work only with native components provided by this library.

Made with ❤️ at Callstack

React Native Brownfield is an open source project and will always remain free to use. If you think it's cool, please star it 🌟. Callstack is a group of React and React Native geeks, contact us at [e-mail] if you need any help with these or just want to say hi!

Like the project? ⚛️ Join the team who does amazing stuff for clients and drives React Native Open Source! 🔥

Contributors

Thanks goes to these wonderful people (emoji key):

Michał Chudziak 💻 📖 🤔	Piotr Drapich 💻 🤔

This project follows the all-contributors specification. Contributions of any kind welcome!