From 2393432e0091acf8547513018d0720309273cf89 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Pierzcha=C5=82a?= Date: Tue, 22 Jul 2025 18:10:21 +0200 Subject: [PATCH 1/6] docs: rework README --- README.md | 172 ++++++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 141 insertions(+), 31 deletions(-) diff --git a/README.md b/README.md index 27e2359a..04d2c809 100644 --- a/README.md +++ b/README.md @@ -23,7 +23,7 @@ - **Easily integrate** React Native with existing native app - Start React Native with **one method** and invoke code as soon as it's loaded -- Compatible with **both old and new React Native architecture**! +- 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 @@ -31,82 +31,191 @@ - 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 +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: + ```sh npm install @callstack/react-native-brownfield ``` -or +## Usage -```sh -yarn add @callstack/react-native-brownfield +### Packaging React Native app as a framework + +First we need to package our React Native app to XCFramework or Fat-AAR. + +#### With RNEF + +Follow [Integrating with Native Apps](https://www.rnef.dev/docs/brownfield/intro) 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](https://github.com/callstackincubator/modern-brownfield-ref/blob/main/scripts/build-xcframework.sh) +- [Example Android script](https://github.com/callstackincubator/modern-brownfield-ref/blob/main/scripts/build-aar.sh) + +### Native iOS app + +In your native iOS app, initialize React Native thread and separately display it where you like. For example, to display React Native views in SwiftUI, use the provided `ReactNativeView` component: + +```swift +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) + } + } + } + } +} ``` -## Enabling New Architecture +For more detailed instructions and API for iOS, see docs for: + +- [Objective C](docs/OBJECTIVE_C.md) +- [Swift](docs/SWIFT.md) + +### Native Android app + +In your native Android app, create a new `RNAppFragment.kt`: -### Android -Add the following to your `android/gradle.properties`: +```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) + } +} ``` -# Enable new architecture -newArchEnabled=true + +Add a button to your `activity_main.xml`: + +```xml +