#Quick Start

#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

#iOS Setup

Run pod install in your iOS directory.

#Android Setup

The library will be automatically linked via autolinking.

#Packaging React Native App as a Framework

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

#With Rock

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

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

#With Custom Scripts

Instead of using Rock, 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

class RNAppFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?,
    ): View? = ReactNativeBrownfield.shared.createView(activity, "BrownFieldTest")
}

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) {
          println("JS bundle loaded")
        }

        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

#Next Steps

• Check out the API Reference for detailed documentation
• Read the Guidelines for best practices