Skip to content
This repository was archived by the owner on Jan 19, 2025. It is now read-only.

Commit 6c967c5

Browse files
chiciochicio
committed
Other captions 🚀
1 parent 3f2e2e5 commit 6c967c5

6 files changed

+78
-153
lines changed

‎_posts/2018-12-02-react-native-modules-bridge-communication-activitiy-fragment-android.md‎

Lines changed: 10 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -13,30 +13,17 @@ seo:
1313
authors: [felice_giovinazzo, fabrizio_duroni]
1414
---
1515

16-
*In this post I will talk about a simple architecture for communication between React Native Native
17-
modules (aka bridges) and your native code on Android.*
16+
*In this post I will talk about a simple architecture for communication between React Native Native modules (aka bridges) and your native code on Android.*
1817

1918
---
2019

21-
Sometimes a React Native app needs to access to the native API or needs/want to call some existing native code you already have in place. This is why Native Modules have been created for both [iOS](https://facebook.github.io/react-native/docs/native-modules-ios) and [Android](https://facebook.github.io/react-native/docs/native-modules-android). Sometimes when you integrated React Native in an existing app, you will want to be able let your Native
22-
Modules bridges communicate with your activities and fragment, especially the ones that contain the React Native View
23-
. In this post I will show you an architecture to put in place this communication on Android, that will be compatible
24-
with all the features of React Native (for example it will work also with the live reload functionality).
25-
This is an architecture I put in place with my colleague [Felice Giovinazzo](https://www.linkedin.com/in/felice-giovinazzo-17277b55/)
26-
in our apps at [lastminute.com group](https://lmgroup.lastminute.com/ "lastminute.com").
27-
Felice is a senior fullstack developer with many years of experiences (he is the "lastminute" veteran of our team)
28-
and a computer graphics enthusiast like me :revolving_hearts::sparkling_heart:.
29-
To show you this architecture I will create a simple app that show a React Native screen as a modal. I will then
30-
implement the close button functionality by calling a native module from the `onPress` on a React Native button.
20+
Sometimes a React Native app needs to access to the native API or needs/want to call some existing native code you already have in place. This is why Native Modules have been created for both [iOS](https://facebook.github.io/react-native/docs/native-modules-ios) and [Android](https://facebook.github.io/react-native/docs/native-modules-android). Sometimes when you integrated React Native in an existing app, you will want to be able let your Native Modules bridges communicate with your activities and fragment, especially the ones that contain the React Native View. In this post I will show you an architecture to put in place this communication on Android, that will be compatible with all the features of React Native (for example it will work also with the live reload functionality). This is an architecture I put in place with my colleague [Felice Giovinazzo](https://www.linkedin.com/in/felice-giovinazzo-17277b55/) in our apps at [lastminute.com group](https://lmgroup.lastminute.com/ "lastminute.com"). Felice is a senior fullstack developer with many years of experiences (he is the "lastminute" veteran of our team) and a computer graphics enthusiast like me :revolving_hearts::sparkling_heart:.
21+
To show you this architecture I will create a simple app that show a React Native screen as a modal. I will then implement the close button functionality by calling a native module from the `onPress` on a React Native button.
3122
Below you can see the final result.
3223

3324
{% include youtube.html videoId="MdNqDQHNjRc" %}
3425

35-
The architecture we put in place is based on a **Event Bus** in which the Native Modules bridges notify the subscribed
36-
Activities/Fragments of the actions to be executed. So each one of them is subscribed to specific events to which they
37-
are able to respond.
38-
We choose [Otto](https://square.github.io/otto/) as event bus library (we don't want to reinvent the wheel :bomb:).
39-
Let's start from the `MainActivity`. In it there's only a button with an action to start the React Native modal activity
26+
The architecture we put in place is based on a **Event Bus** in which the Native Modules bridges notify the subscribed Activities/Fragments of the actions to be executed. So each one of them is subscribed to specific events to which they are able to respond. We choose [Otto](https://square.github.io/otto/) as event bus library (we don't want to reinvent the wheel :bomb:). Let's start from the `MainActivity`. In it there's only a button with an action to start the React Native modal activity.
4027

4128
```java
4229
public class MainActivity extends AppCompatActivity {
@@ -53,10 +40,7 @@ public class MainActivity extends AppCompatActivity {
5340
}
5441
```
5542

56-
The `ReactNativeModalActivity` is an `Activity` with the setup needed to launch a React Native context. This activity
57-
is registered to the event bus to be able to listen to events from the Native Modules bridges. In this case
58-
the activity is subscribed to just one event with the method `@Subscribe public void close(ReactNativeModalBridge
59-
.CloseModalEvent event)`.
43+
The `ReactNativeModalActivity` is an `Activity` with the setup needed to launch a React Native context. This activity is registered to the event bus to be able to listen to events from the Native Modules bridges. In this case the activity is subscribed to just one event with the method `@Subscribe public void close(ReactNativeModalBridge.CloseModalEvent event)`.
6044

6145
```java
6246
public class ReactNativeModalActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler {
@@ -124,13 +108,7 @@ public class ReactNativeModalActivity extends AppCompatActivity implements Defau
124108

125109
```
126110

127-
Now let's have a look at Native Module created for the app, the `ReactNativeModalBridge`. In this bridge there just
128-
one react method, `closeModal`. This is the one called from the React Native JS side. In this method we are sending
129-
an event of type `CloseModalEvent`. The `ReactNativeModalActivity` is subscribed to this type of event (as we saw
130-
above). This basically means that when the `closeModal` bridge method will be called from the React Native Javascript
131-
code a new event `CloseModalEvent` is generated and the `ReactNativeModalActivity` will execute the subscribed method defined in
132-
it. We have all setup to have our Native Modules communication with our activities (and eventually fragment with the
133-
same approach if we need them :neckbeard:).
111+
Now let's have a look at Native Module created for the app, the `ReactNativeModalBridge`. In this bridge there just one react method, `closeModal`. This is the one called from the React Native JS side. In this method we are sending an event of type `CloseModalEvent`. The `ReactNativeModalActivity` is subscribed to this type of event (as we saw above). This basically means that when the `closeModal` bridge method will be called from the React Native Javascript code a new event `CloseModalEvent` is generated and the `ReactNativeModalActivity` will execute the subscribed method defined in it. We have all setup to have our Native Modules communication with our activities (and eventually fragment with the same approach if we need them :neckbeard:).
134112

135113
```java
136114
public class ReactNativeModalBridge extends ReactContextBaseJavaModule {
@@ -159,11 +137,9 @@ public class ReactNativeModalBridge extends ReactContextBaseJavaModule {
159137

160138
public class CloseModalEvent { }
161139
}
162-
```
140+
```
163141

164-
Now it's time to see the javascript code. Below you can see the `ReactNativeModal` component. Inside this component there is a call
165-
to the native module `NativeModules.ReactNativeModalBridge.closeModal()` described above. In this way the modal will
166-
be closed directly from the native side.
142+
Now it's time to see the javascript code. Below you can see the `ReactNativeModal` component. Inside this component there is a call to the native module `NativeModules.ReactNativeModalBridge.closeModal()` described above. In this way the modal will be closed directly from the native side.
167143

168144
```jsx
169145
class ReactNativeModal extends React.Component {
@@ -182,6 +158,6 @@ class ReactNativeModal extends React.Component {
182158
);
183159
}
184160
}
185-
```
186-
161+
```
162+
187163
That's all for our native modules communication architecture on Android. You can find the complete example in [this github repository](https://github.com/chicio/React-Native-Native-Modules-Communication). If you want to know how we managed the same problem on the iOS platform :apple::iphone::heartbeat: you can read [my other post about the same topic](/2018/12/03/react-native-modules-bridge-communication-uiviewcontroller-ios.html).

‎_posts/2018-12-03-react-native-modules-bridge-communication-uiviewcontroller-ios.md‎

Lines changed: 19 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -13,60 +13,43 @@ seo:
1313
authors: [fabrizio_duroni]
1414
---
1515

16-
*In this post I will talk about a simple architecture for communication between React Native Native
17-
modules (aka bridges) and your native code on iOS.*
16+
*In this post I will talk about a simple architecture for communication between React Native Native modules (aka bridges) and your native code on iOS.*
1817

1918
---
2019

21-
[As we saw in a previous post for fragments/Activities Android](/2018/12/02/react-native-modules-bridge-communication-activitiy-fragment-android.html), sometimes when you
22-
integrated React Native in an existing app, you will want to be able let your Native Modules bridges communicate with
23-
your UIVIewController, especially the ones that contain the React Native View. In this post I will show you an
24-
architecture to put in place this communication on iOS, that will be compatible with all the features of React
25-
Native (for example it will work also with the live reload functionality). This is an architecture I put in place
26-
for our apps at [lastminute.com group](https://lmgroup.lastminute.com/ "lastminute.com").
27-
To show this architecture I will create a simple app that show a React Native screen as a modal. I will then
28-
implement the close button functionality by calling a native module from the `onPress` on a React Native button.
29-
Below you can see the final result.
20+
[As we saw in a previous post for fragments/Activities Android](/2018/12/02/react-native-modules-bridge-communication-activitiy-fragment-android.html), sometimes when you integrated React Native in an existing app, you will want to be able let your Native Modules bridges communicate with your `UIVIewController`, especially the ones that contain the React Native View. In this post I will show you an architecture to put in place this communication on iOS, that will be compatible with all the features of React Native (for example it will work also with the live reload functionality). This is an architecture I put in place for our apps at [lastminute.com group](https://lmgroup.lastminute.com/ "lastminute.com").
21+
To show this architecture I will create a simple app that show a React Native screen as a modal. I will then implement the close button functionality by calling a native module from the `onPress` on a React Native button. Below you can see the final result.
3022

3123
{% include youtube.html videoId="rJLX27nancs" %}
3224

33-
The architecture I put in place is based on the `NSNotificationCenter`. The description of this component of the iOS
34-
SDK is the following one:
25+
The architecture I put in place is based on the `NSNotificationCenter`. The description of this component of the iOS SDK is the following one:
3526

36-
> A notification dispatch mechanism that enables the broadcast of information to registered observers. Objects
37-
register with a notification center to receive notifications (NSNotification objects) using the addObserver
38-
(_:selector:name:object:) or addObserver(forName:object:queue:using:) methods. When an object adds itself as an
39-
observer, it specifies which notifications it should receive. An object may therefore call this method several times
40-
in order to register itself as an observer for several different notifications.
27+
> A notification dispatch mechanism that enables the broadcast of information to registered observers. Objects register with a notification center to receive notifications (NSNotification objects) using the addObserver(_:selector:name:object:) or addObserver(forName:object:queue:using:) methods. When an object adds itself as an observer, it specifies which notifications it should receive. An object may therefore call this method several times in order to register itself as an observer for several different notifications.
28+
29+
This definition basically means that with this api we are able to register class to events send by another one. This is exactly what we need to put in place the communication between our Native Modules bridges and our `UIViewController`.
30+
Let's start from the `MainViewController`. In it there's only a button with an action to start the React Native modal UIViewController called `ReactNativeModalViewController`.
4131

42-
This definition basically means that with this api we are able to register class to events send by another one. This
43-
is exactly what we need to put in place the communication between our Native Modules bridges and our `UIViewController`.
44-
Let's start from the `MainViewController`. In it there's only a button with an action to start the React Native modal
45-
UIViewController called `ReactNativeModalViewController`.
46-
4732
```swift
4833
class MainViewController: UIViewController {
4934
override func viewDidLoad() {
5035
super.viewDidLoad()
5136
}
52-
37+
5338
@IBAction func showReactNativeModal(_ sender: Any) {
5439
present(ReactNativeModalViewController(), animated: true, completion: nil)
5540
}
5641
}
5742
```
5843

59-
The `ReactNativeModalViewController` is a `UIViewController` with the setup needed to launch a React Native context. This
60-
`UIViewController` is an observer of the `ReactEventCloseModal` event in the `NSNotificationCenter`. This event is
61-
generated in the Native Modules bridge. The action executed for this event is contained in the `closeModal` event.
44+
The `ReactNativeModalViewController` is a `UIViewController` with the setup needed to launch a React Native context. This `UIViewController` is an observer of the `ReactEventCloseModal` event in the `NSNotificationCenter`. This event is generated in the Native Modules bridge. The action executed for this event is contained in the `closeModal` event.
6245

6346
```swift
6447
class ReactNativeModalViewController: UIViewController {
6548
override func viewDidLoad() {
6649
setupReactNative()
6750
registerToReactNativeEvents()
6851
}
69-
52+
7053
private func setupReactNative() {
7154
let rootView = RCTRootView(
7255
bundleURL: URL(string: "http://localhost:8081/index.bundle?platform=ios"),
@@ -76,14 +59,14 @@ class ReactNativeModalViewController: UIViewController {
7659
)
7760
self.view = rootView
7861
}
79-
62+
8063
private func registerToReactNativeEvents() {
8164
NotificationCenter.default.addObserver(self,
8265
selector: #selector(closeModal),
8366
name: NSNotification.Name(rawValue: ReactEventCloseModal),
8467
object: nil)
8568
}
86-
69+
8770
@objc private func closeModal() {
8871
DispatchQueue.main.async { [unowned self] in
8972
self.dismiss(animated: true, completion: nil)
@@ -92,16 +75,7 @@ class ReactNativeModalViewController: UIViewController {
9275
}
9376
```
9477

95-
Now let's have a look at Native Module created for the app, the `ReactNativeModalBridge`. In this bridge there just
96-
one react method, `closeModal`. This is the one called from the React Native JS side. In this method we are sending
97-
an event with the identifier `ReactEventCloseModal`. This identifier is defined inside the files `ReactNativeEvents
98-
.h/ReactNativeEvents.m` as a constant with string value `closeModal`.
99-
The `ReactNativeModalViewController` is subscribed to this type of event (as we saw above). This basically means that
100-
when the `closeModal` bridge method is called from the React Native Javascript
101-
code a new event `ReactEventCloseModal` is generated and the `ReactNativeModalViewController` will execute the subscribed
102-
method defined in it. We have all setup to have our Native Modules communication with our controllers :open_mouth:.
103-
Below you can find the header and implementations of the `ReactNativeModalBridge` bridge (written in Objective-C
104-
:sparkling_heart:).
78+
Now let's have a look at Native Module created for the app, the `ReactNativeModalBridge`. In this bridge there just one react method, `closeModal`. This is the one called from the React Native JS side. In this method we are sending an event with the identifier `ReactEventCloseModal`. This identifier is defined inside the files `ReactNativeEvents.h/ReactNativeEvents.m` as a constant with string value `closeModal`. The `ReactNativeModalViewController` is subscribed to this type of event (as we saw above). This basically means that when the `closeModal` bridge method is called from the React Native Javascript code a new event `ReactEventCloseModal` is generated and the `ReactNativeModalViewController` will execute the subscribed method defined in it. We have all setup to have our Native Modules communication with our controllers :open_mouth:. Below you can find the header and implementations of the `ReactNativeModalBridge` bridge (written in Objective-C :sparkling_heart:).
10579

10680
```objective_c
10781
#import <Foundation/Foundation.h>
@@ -112,7 +86,6 @@ Below you can find the header and implementations of the `ReactNativeModalBridge
11286
@end
11387
11488
115-
11689
#import "ReactNativeModalBridge.h"
11790
#import "ReactNativeEvents.h"
11891
@@ -124,11 +97,9 @@ RCT_EXPORT_METHOD(closeModal) {
12497
}
12598
12699
@end
127-
```
100+
```
128101

129-
Now it's time to see the javascript code. Below you can see the `ReactNativeModal` component. Inside this component
130-
there is a call to the native module `NativeModules.ReactNativeModalBridge.closeModal()` described above. In this way the modal will
131-
be closed directly from the native side.
102+
Now it's time to see the javascript code. Below you can see the `ReactNativeModal` component. Inside this component there is a call to the native module `NativeModules.ReactNativeModalBridge.closeModal()` described above. In this way the modal will be closed directly from the native side.
132103

133104
```jsx
134105
class ReactNativeModal extends React.Component {
@@ -147,7 +118,6 @@ class ReactNativeModal extends React.Component {
147118
);
148119
}
149120
}
150-
```
151-
152-
That's all for our native modules communication architecture iOS. You can find the complete example in [this github repository](https://github.com/chicio/React-Native-Native-Modules-Communication). If you want to know how we managed the same problem on
153-
the Android platform :rocket: you can read [my other post about the same topic](/2018/12/02/react-native-modules-bridge-communication-activitiy-fragment-android.html).
121+
```
122+
123+
That's all for our native modules communication architecture iOS. You can find the complete example in [this github repository](https://github.com/chicio/React-Native-Native-Modules-Communication). If you want to know how we managed the same problem on the Android platform :rocket: you can read [my other post about the same topic](/2018/12/02/react-native-modules-bridge-communication-activitiy-fragment-android.html).

0 commit comments

Comments
 (0)