From 2d0e3a197150a49bac9bd43ab29520944b20c0aa Mon Sep 17 00:00:00 2001 From: junaidn Date: Mon, 11 Apr 2022 15:52:47 +0500 Subject: [PATCH 1/4] kotlin code for communication android --- docs/communication-android.md | 46 ++++++++++++++++++++++++++++++++++- 1 file changed, 45 insertions(+), 1 deletion(-) diff --git a/docs/communication-android.md b/docs/communication-android.md index 2add1ad1590..bd48f8c36ec 100644 --- a/docs/communication-android.md +++ b/docs/communication-android.md @@ -3,6 +3,8 @@ id: communication-android title: Communication between native and React Native --- +import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; + In [Integrating with Existing Apps guide](integration-with-existing-apps) and [Native UI Components guide](native-components-android) we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques. ## Introduction @@ -19,6 +21,10 @@ Properties are the most straightforward way of cross-component communication. So You can pass properties down to the React Native app by providing a custom implementation of `ReactActivityDelegate` in your main activity. This implementation should override `getLaunchOptions` to return a `Bundle` with the desired properties. + + + + ```java public class MainActivity extends ReactActivity { @Override @@ -39,6 +45,28 @@ public class MainActivity extends ReactActivity { } ``` + + + + +```kotlin +class MainActivity : ReactActivity() { + override fun createReactActivityDelegate(): ReactActivityDelegate { + return object : ReactActivityDelegate(this, mainComponentName) { + override fun getLaunchOptions(): Bundle { + val initialProperties = Bundle() + val imageList = + ArrayList(listOf("http://foo.com/bar1.png", "http://foo.com/bar2.png")) + initialProperties.putStringArrayList("images", imageList) + return initialProperties + } + } + } +} +``` + + + ```jsx import React from 'react'; import { View, Image } from 'react-native'; @@ -55,6 +83,10 @@ export default class ImageBrowserApp extends React.Component { `ReactRootView` provides a read-write property `appProperties`. After `appProperties` is set, the React Native app is re-rendered with new properties. The update is only performed when the new updated properties differ from the previous ones. + + + + ```java Bundle updatedProps = mReactRootView.getAppProperties(); ArrayList imageList = new ArrayList(Arrays.asList( @@ -65,6 +97,18 @@ updatedProps.putStringArrayList("images", imageList); mReactRootView.setAppProperties(updatedProps); ``` + + + + +```kotlin +var updatedProps: Bundle = mReactRootView.getAppProperties() +var imageList: ArrayList = + ArrayList(listOf("http://foo.com/bar3.png", "http://foo.com/bar4.png")) +``` + + + It is fine to update properties anytime. However, updates have to be performed on the main thread. You use the getter on any thread. @@ -100,6 +144,6 @@ Events are powerful, because they allow us to change React Native components wit ### Calling native functions from React Native (native modules) -Native modules are Java classes that are available in JS. Typically one instance of each module is created per JS bridge. They can export arbitrary functions and constants to React Native. They have been covered in detail in [this article](native-modules-android). +Native modules are Java/Kotlin classes that are available in JS. Typically one instance of each module is created per JS bridge. They can export arbitrary functions and constants to React Native. They have been covered in detail in [this article](native-modules-android). > **_Warning_**: All native modules share the same namespace. Watch out for name collisions when creating new ones. From f1d3896400c37446ae29bb5bfd5d87938cfba4f1 Mon Sep 17 00:00:00 2001 From: junaidn Date: Mon, 11 Apr 2022 16:06:03 +0500 Subject: [PATCH 2/4] Fix format issues --- docs/communication-android.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/docs/communication-android.md b/docs/communication-android.md index bd48f8c36ec..c049e54356c 100644 --- a/docs/communication-android.md +++ b/docs/communication-android.md @@ -64,6 +64,7 @@ class MainActivity : ReactActivity() { } } ``` + @@ -97,6 +98,7 @@ updatedProps.putStringArrayList("images", imageList); mReactRootView.setAppProperties(updatedProps); ``` + @@ -106,6 +108,7 @@ var updatedProps: Bundle = mReactRootView.getAppProperties() var imageList: ArrayList = ArrayList(listOf("http://foo.com/bar3.png", "http://foo.com/bar4.png")) ``` + From 4062013fcf6eeae7524fe703079f9a0a65acbada Mon Sep 17 00:00:00 2001 From: junaidn Date: Tue, 12 Apr 2022 11:09:21 +0500 Subject: [PATCH 3/4] Code refactor --- docs/communication-android.md | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/docs/communication-android.md b/docs/communication-android.md index c049e54356c..c083d1660bc 100644 --- a/docs/communication-android.md +++ b/docs/communication-android.md @@ -54,10 +54,8 @@ class MainActivity : ReactActivity() { override fun createReactActivityDelegate(): ReactActivityDelegate { return object : ReactActivityDelegate(this, mainComponentName) { override fun getLaunchOptions(): Bundle { - val initialProperties = Bundle() - val imageList = - ArrayList(listOf("http://foo.com/bar1.png", "http://foo.com/bar2.png")) - initialProperties.putStringArrayList("images", imageList) + val imageList = arrayListOf("http://foo.com/bar1.png", "http://foo.com/bar2.png") + val initialProperties = Bundle().apply { putStringArrayList("images", imageList) } return initialProperties } } @@ -105,8 +103,7 @@ mReactRootView.setAppProperties(updatedProps); ```kotlin var updatedProps: Bundle = mReactRootView.getAppProperties() -var imageList: ArrayList = - ArrayList(listOf("http://foo.com/bar3.png", "http://foo.com/bar4.png")) +var imageList = arrayListOf("http://foo.com/bar3.png", "http://foo.com/bar4.png") ``` From 6be76054d11fe52320ef9c59929dcd3a529fdf78 Mon Sep 17 00:00:00 2001 From: junaidn <74290559+junaidn@users.noreply.github.com> Date: Wed, 13 Apr 2022 10:46:21 +0500 Subject: [PATCH 4/4] Update docs/communication-android.md Co-authored-by: Nicola Corti --- docs/communication-android.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/communication-android.md b/docs/communication-android.md index c083d1660bc..bcf2dec3037 100644 --- a/docs/communication-android.md +++ b/docs/communication-android.md @@ -102,7 +102,7 @@ mReactRootView.setAppProperties(updatedProps); ```kotlin -var updatedProps: Bundle = mReactRootView.getAppProperties() +var updatedProps: Bundle = reactRootView.getAppProperties() var imageList = arrayListOf("http://foo.com/bar3.png", "http://foo.com/bar4.png") ```