You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Set of helpers to make your brownfield integration smooth and easy.
6
+
A set of helpers to make your brownfield integration smooth and easy.
7
7
</p>
8
8
9
9
---
@@ -21,86 +21,199 @@
21
21
22
22
## Features
23
23
24
-
-**Easily integrate** React Native with existing native app
24
+
-**Easily integrate** React Native with an existing native app
25
25
- Start React Native with **one method** and invoke code as soon as it's loaded
26
-
- Compatible with **both old and new React Native architecture**!
26
+
- Compatible with **both legacy and new React Native architecture**!
27
27
- Reuse the same instance of React Native between different components
28
28
- Use predefined **native building blocks** - crafted for React Native
29
29
- Disable and enable **native gestures and hardware buttons** from JavaScript
30
-
- Works well with **any native navigation** pattern, as well as every React Native JavaScriptbased navigation
30
+
- Works well with **any native navigation** pattern, as well as any React Native JavaScript-based navigation
31
31
- Compatible with all native languages **Objective-C**, **Swift**, **Java** and **Kotlin**
32
32
- Supports UIKit and SwiftUI on iOS and Fragments and Jetpack Compose on Android
33
33
34
-
35
34
## Installation
36
35
36
+
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.
<imgalt="Download a free copy of Incremental React Native adoption in native apps ebook"src="https://github.com/user-attachments/assets/ba42bb29-1e7a-4683-80c5-2602afb1a7e6">
48
+
</a>
49
+
50
+
### Packaging React Native app as a framework
51
+
52
+
First, we need to package our React Native app as an XCFramework or Fat-AAR.
53
+
54
+
#### With RNEF
55
+
56
+
Follow [Integrating with Native Apps](https://www.rnef.dev/docs/brownfield/intro) steps in RNEF docs and run:
57
+
58
+
-`rnef package:ios` for iOS
59
+
-`rnef package:aar` for Android
60
+
61
+
#### With custom scripts
62
+
63
+
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:
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:
71
+
72
+
```swift
73
+
importSwiftUI
74
+
importReactBrownfield # exposed by RN app framework
75
+
76
+
@main
77
+
structMyApp: App {
78
+
init() {
79
+
ReactNativeBrownfield.shared.startReactNative {
80
+
print("React Native bundle loaded")
81
+
}
82
+
}
83
+
84
+
var body: some Scene {
85
+
WindowGroup {
86
+
ContentView()
87
+
}
88
+
}
89
+
}
90
+
91
+
structContentView: View {
92
+
var body: some View {
93
+
NavigationView {
94
+
VStack {
95
+
Text("Welcome to the Native App")
96
+
.padding()
97
+
98
+
NavigationLink("Push React Native Screen") {
99
+
ReactNativeView(moduleName: "ReactNative")
100
+
.navigationBarHidden(true)
101
+
}
102
+
}
103
+
}
104
+
}
105
+
}
45
106
```
46
107
47
-
## Enabling New Architecture
108
+
For more detailed instructions and API for iOS, see docs for:
109
+
110
+
-[Objective C](docs/OBJECTIVE_C.md)
111
+
-[Swift](docs/SWIFT.md)
112
+
113
+
### Native Android app
48
114
49
-
### Android
50
-
Add the following to your `android/gradle.properties`:
115
+
In your native Android app, create a new `RNAppFragment.kt`:
51
116
117
+
```kt
118
+
119
+
importandroid.os.Bundle
120
+
importandroid.view.LayoutInflater
121
+
importandroid.view.View
122
+
importandroid.view.ViewGroup
123
+
importandroidx.fragment.app.Fragment
124
+
importcom.callstack.rnbrownfield.RNViewFactory # exposed by RN app framework
125
+
126
+
classRNAppFragment : Fragment() {
127
+
overridefunonCreateView(
128
+
inflater:LayoutInflater,
129
+
container:ViewGroup?,
130
+
savedInstanceState:Bundle?,
131
+
): View?=
132
+
this.context?.let {
133
+
RNViewFactory.createFrameLayout(it)
134
+
}
135
+
}
52
136
```
53
-
# Enable new architecture
54
-
newArchEnabled=true
137
+
138
+
Add a button to your `activity_main.xml`:
139
+
140
+
```xml
141
+
<Button
142
+
android:id="@+id/show_rn_app_btn"
143
+
android:layout_width="wrap_content"
144
+
android:layout_height="wrap_content"
145
+
android:text="Show RN App"
146
+
app:layout_constraintBottom_toBottomOf="parent"
147
+
app:layout_constraintEnd_toEndOf="parent"
148
+
app:layout_constraintStart_toStartOf="parent"
149
+
app:layout_constraintTop_toTopOf="parent" />
55
150
```
56
151
57
-
### iOS
58
-
Install cocoapods with the flag:
152
+
Add a fragment container:
59
153
60
-
```
61
-
RCT_NEW_ARCH_ENABLED=1 pod install
154
+
```xml
155
+
<FrameLayout
156
+
android:id="@+id/fragmentContainer"
157
+
android:layout_width="match_parent"
158
+
android:layout_height="match_parent" />
62
159
```
63
160
64
-
> [!NOTE]
65
-
> New Architecture is enabled by default from React Native 0.76
161
+
Update your `MainActivity` to initialize React Native and show the fragment:
React Native Brownfield library works with all major native programming languages. Majority of its API is exposed on the native side. Click on the logo to choose the one that interests you:
183
+
For more detailed instructions and API for Android, see docs for:
0 commit comments