From e447688dffeb74f40b396089728e069a4eef6c76 Mon Sep 17 00:00:00 2001 From: David Vacca <515103+mdvacca@users.noreply.github.com> Date: Thu, 24 Feb 2022 17:05:04 -0800 Subject: [PATCH 01/20] Add Kotlin examples in Integration with an Android Fragment --- website/core/TabsConstants.js | 7 + .../integration-with-android-fragment.md | 152 ++++++++++++++++++ 2 files changed, 159 insertions(+) diff --git a/website/core/TabsConstants.js b/website/core/TabsConstants.js index 88ee63a2e0a..0e4ec7348ac 100644 --- a/website/core/TabsConstants.js +++ b/website/core/TabsConstants.js @@ -19,6 +19,13 @@ const packageManagers = [ ]; const defaultPackageManager = 'npm'; +const androidLanguages = [ + {label: 'Java', value: 'java'}, + {label: 'Kotlin', value: 'kotlin'}, +]; + +const defaultAndroidLanguage = 'kotlin'; + const guides = [ {label: 'Expo CLI Quickstart', value: 'quickstart'}, {label: 'React Native CLI Quickstart', value: 'native'}, diff --git a/website/versioned_docs/version-0.67/integration-with-android-fragment.md b/website/versioned_docs/version-0.67/integration-with-android-fragment.md index 2421e46635e..e35dc66ce12 100644 --- a/website/versioned_docs/version-0.67/integration-with-android-fragment.md +++ b/website/versioned_docs/version-0.67/integration-with-android-fragment.md @@ -3,6 +3,8 @@ id: integration-with-android-fragment title: Integration with an Android Fragment --- +import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; + The guide for [Integration with Existing Apps](https://reactnative.dev/docs/integration-with-existing-apps) details how to integrate a full-screen React Native app into an existing Android app as an Activity. To use React Native components within Fragments in an existing app requires some additional setup. The benefit of this is that it allows for a native app to integrate React Native components alongside native fragments in an Activity. ### 1. Add React Native to your app @@ -17,12 +19,58 @@ You will need to implement the ReactApplication interface in your main Applicati Ensure your main Application Java class implements ReactApplication: + + + +```kotlin +class MyReactApplication: Application(), ReactApplication {...} +``` + + + + ```java public class MyReactApplication extends Application implements ReactApplication {...} ``` + + + Override the required methods `getUseDeveloperSupport`, `getPackages` and `getReactNativeHost`: + + + +```kotlin +class MyReactApplication: Application(), ReactApplication { + + override fun onCreate(): Unit { + super.onCreate() + SoLoader.init(this, false) + } + + private val reactNativeHost = object: ReactNativeHost(this) { + + override fun getUseDeveloperSupport(): Boolean { + return BuildConfig.DEBUG + } + + override fun getPackages(): List { + val packages = PackageList(this).getPackages() + // Packages that cannot be autolinked yet can be added manually here + return packages + } + } + + override fun getReactNativeHost(): ReactNativeHost { + return reactNativeHost + } +} +``` + + + + ```java public class MyReactApplication extends Application implements ReactApplication { @Override @@ -51,8 +99,29 @@ public class MyReactApplication extends Application implements ReactApplication } ``` + + + If you are using Android Studio, use Alt + Enter to add all missing imports in your class. Alternatively these are the required imports to include manually: + + + +```kotlin +import android.app.Application + +import com.facebook.react.PackageList +import com.facebook.react.ReactApplication +import com.facebook.react.ReactNativeHost +import com.facebook.react.ReactPackage +import com.facebook.soloader.SoLoader + +import java.util.List +``` + + + + ```java import android.app.Application; @@ -65,6 +134,9 @@ import com.facebook.soloader.SoLoader; import java.util.List; ``` + + + Perform a "Sync Project files with Gradle" operation. ### Step 3. Add a FrameLayout for the React Native Fragment @@ -101,12 +173,51 @@ Now in your Activity class e.g. `MainActivity.java` you need to add an OnClickLi Add the button field to the top of your Activity: + + + +```kotlin +private lateinit var button: Button +``` + + + + ```java private Button mButton; ``` + + + Update your Activity's onCreate method as follows: + + + +```kotlin +override fun onCreate(savedInstanceState: Bundle): Unit { + super.onCreate(savedInstanceState) + setContentView(R.layout.main_activity) + + button = findViewById(R.id.button) as Button + button.setOnClickListener { + val reactNativeFragment = ReactFragment.Builder() + .setComponentName("HelloWorld") + .setLaunchOptions(getLaunchOptions("test message")) + .build() + + getSupportFragmentManager() + .beginTransaction() + .add(R.id.reactNativeFragment, reactNativeFragment) + .commit() + } +} +``` + + + + ```java @Override protected void onCreate(Bundle savedInstanceState) { @@ -131,12 +242,30 @@ protected void onCreate(Bundle savedInstanceState) { } ``` + + + In the code above `Fragment reactNativeFragment = new ReactFragment.Builder()` creates the ReactFragment and `getSupportFragmentManager().beginTransaction().add()` adds the Fragment to the Frame Layout. If you are using a starter kit for React Native, replace the "HelloWorld" string with the one in your `index.js` or `index.android.js` file (it’s the first argument to the AppRegistry.registerComponent() method). Add the `getLaunchOptions` method which will allow you to pass props through to your component. This is optional and you can remove `setLaunchOptions` if you don't need to pass any props. + + + +```kotlin +private fun getLaunchOptions(String message): Bundle { + val initialProperties = Bundle() + initialProperties.putString("message", message) + return initialProperties +} + +``` + + + + ```java private Bundle getLaunchOptions(String message) { Bundle initialProperties = new Bundle(); @@ -145,8 +274,28 @@ private Bundle getLaunchOptions(String message) { } ``` + + + Add all missing imports in your Activity class. Be careful to use your package’s BuildConfig and not the one from the facebook package! Alternatively these are the required imports to include manually: + + + +```kotlin +import android.app.Application + +import com.facebook.react.ReactApplication +import com.facebook.react.ReactNativeHost +import com.facebook.react.ReactPackage +import com.facebook.react.shell.MainReactPackage +import com.facebook.soloader.SoLoader + +``` + + + + ```java import android.app.Application; @@ -157,6 +306,9 @@ import com.facebook.react.shell.MainReactPackage; import com.facebook.soloader.SoLoader; ``` + + + Perform a "Sync Project files with Gradle" operation. ### Step 5. Test your integration From 54c1f3b9e00162d6aeb5cbaa4a4f735c84ce1dad Mon Sep 17 00:00:00 2001 From: David Vacca <515103+mdvacca@users.noreply.github.com> Date: Fri, 25 Feb 2022 10:45:59 -0800 Subject: [PATCH 02/20] Revert "Add Kotlin examples in Integration with an Android Fragment" This reverts commit e447688dffeb74f40b396089728e069a4eef6c76. --- website/core/TabsConstants.js | 7 - .../integration-with-android-fragment.md | 152 ------------------ 2 files changed, 159 deletions(-) diff --git a/website/core/TabsConstants.js b/website/core/TabsConstants.js index 0e4ec7348ac..88ee63a2e0a 100644 --- a/website/core/TabsConstants.js +++ b/website/core/TabsConstants.js @@ -19,13 +19,6 @@ const packageManagers = [ ]; const defaultPackageManager = 'npm'; -const androidLanguages = [ - {label: 'Java', value: 'java'}, - {label: 'Kotlin', value: 'kotlin'}, -]; - -const defaultAndroidLanguage = 'kotlin'; - const guides = [ {label: 'Expo CLI Quickstart', value: 'quickstart'}, {label: 'React Native CLI Quickstart', value: 'native'}, diff --git a/website/versioned_docs/version-0.67/integration-with-android-fragment.md b/website/versioned_docs/version-0.67/integration-with-android-fragment.md index e35dc66ce12..2421e46635e 100644 --- a/website/versioned_docs/version-0.67/integration-with-android-fragment.md +++ b/website/versioned_docs/version-0.67/integration-with-android-fragment.md @@ -3,8 +3,6 @@ id: integration-with-android-fragment title: Integration with an Android Fragment --- -import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; - The guide for [Integration with Existing Apps](https://reactnative.dev/docs/integration-with-existing-apps) details how to integrate a full-screen React Native app into an existing Android app as an Activity. To use React Native components within Fragments in an existing app requires some additional setup. The benefit of this is that it allows for a native app to integrate React Native components alongside native fragments in an Activity. ### 1. Add React Native to your app @@ -19,58 +17,12 @@ You will need to implement the ReactApplication interface in your main Applicati Ensure your main Application Java class implements ReactApplication: - - - -```kotlin -class MyReactApplication: Application(), ReactApplication {...} -``` - - - - ```java public class MyReactApplication extends Application implements ReactApplication {...} ``` - - - Override the required methods `getUseDeveloperSupport`, `getPackages` and `getReactNativeHost`: - - - -```kotlin -class MyReactApplication: Application(), ReactApplication { - - override fun onCreate(): Unit { - super.onCreate() - SoLoader.init(this, false) - } - - private val reactNativeHost = object: ReactNativeHost(this) { - - override fun getUseDeveloperSupport(): Boolean { - return BuildConfig.DEBUG - } - - override fun getPackages(): List { - val packages = PackageList(this).getPackages() - // Packages that cannot be autolinked yet can be added manually here - return packages - } - } - - override fun getReactNativeHost(): ReactNativeHost { - return reactNativeHost - } -} -``` - - - - ```java public class MyReactApplication extends Application implements ReactApplication { @Override @@ -99,29 +51,8 @@ public class MyReactApplication extends Application implements ReactApplication } ``` - - - If you are using Android Studio, use Alt + Enter to add all missing imports in your class. Alternatively these are the required imports to include manually: - - - -```kotlin -import android.app.Application - -import com.facebook.react.PackageList -import com.facebook.react.ReactApplication -import com.facebook.react.ReactNativeHost -import com.facebook.react.ReactPackage -import com.facebook.soloader.SoLoader - -import java.util.List -``` - - - - ```java import android.app.Application; @@ -134,9 +65,6 @@ import com.facebook.soloader.SoLoader; import java.util.List; ``` - - - Perform a "Sync Project files with Gradle" operation. ### Step 3. Add a FrameLayout for the React Native Fragment @@ -173,51 +101,12 @@ Now in your Activity class e.g. `MainActivity.java` you need to add an OnClickLi Add the button field to the top of your Activity: - - - -```kotlin -private lateinit var button: Button -``` - - - - ```java private Button mButton; ``` - - - Update your Activity's onCreate method as follows: - - - -```kotlin -override fun onCreate(savedInstanceState: Bundle): Unit { - super.onCreate(savedInstanceState) - setContentView(R.layout.main_activity) - - button = findViewById(R.id.button) as Button - button.setOnClickListener { - val reactNativeFragment = ReactFragment.Builder() - .setComponentName("HelloWorld") - .setLaunchOptions(getLaunchOptions("test message")) - .build() - - getSupportFragmentManager() - .beginTransaction() - .add(R.id.reactNativeFragment, reactNativeFragment) - .commit() - } -} -``` - - - - ```java @Override protected void onCreate(Bundle savedInstanceState) { @@ -242,30 +131,12 @@ protected void onCreate(Bundle savedInstanceState) { } ``` - - - In the code above `Fragment reactNativeFragment = new ReactFragment.Builder()` creates the ReactFragment and `getSupportFragmentManager().beginTransaction().add()` adds the Fragment to the Frame Layout. If you are using a starter kit for React Native, replace the "HelloWorld" string with the one in your `index.js` or `index.android.js` file (it’s the first argument to the AppRegistry.registerComponent() method). Add the `getLaunchOptions` method which will allow you to pass props through to your component. This is optional and you can remove `setLaunchOptions` if you don't need to pass any props. - - - -```kotlin -private fun getLaunchOptions(String message): Bundle { - val initialProperties = Bundle() - initialProperties.putString("message", message) - return initialProperties -} - -``` - - - - ```java private Bundle getLaunchOptions(String message) { Bundle initialProperties = new Bundle(); @@ -274,28 +145,8 @@ private Bundle getLaunchOptions(String message) { } ``` - - - Add all missing imports in your Activity class. Be careful to use your package’s BuildConfig and not the one from the facebook package! Alternatively these are the required imports to include manually: - - - -```kotlin -import android.app.Application - -import com.facebook.react.ReactApplication -import com.facebook.react.ReactNativeHost -import com.facebook.react.ReactPackage -import com.facebook.react.shell.MainReactPackage -import com.facebook.soloader.SoLoader - -``` - - - - ```java import android.app.Application; @@ -306,9 +157,6 @@ import com.facebook.react.shell.MainReactPackage; import com.facebook.soloader.SoLoader; ``` - - - Perform a "Sync Project files with Gradle" operation. ### Step 5. Test your integration From 97a18c2db3bd5c248065e055bf9a52ab8d461b57 Mon Sep 17 00:00:00 2001 From: David Vacca <515103+mdvacca@users.noreply.github.com> Date: Fri, 25 Feb 2022 10:52:59 -0800 Subject: [PATCH 03/20] Add Kotlin examples in Integration with an Android Fragment --- website/core/TabsConstants.js | 7 + .../integration-with-android-fragment.md | 152 ++++++++++++++++++ 2 files changed, 159 insertions(+) diff --git a/website/core/TabsConstants.js b/website/core/TabsConstants.js index 88ee63a2e0a..0e4ec7348ac 100644 --- a/website/core/TabsConstants.js +++ b/website/core/TabsConstants.js @@ -19,6 +19,13 @@ const packageManagers = [ ]; const defaultPackageManager = 'npm'; +const androidLanguages = [ + {label: 'Java', value: 'java'}, + {label: 'Kotlin', value: 'kotlin'}, +]; + +const defaultAndroidLanguage = 'kotlin'; + const guides = [ {label: 'Expo CLI Quickstart', value: 'quickstart'}, {label: 'React Native CLI Quickstart', value: 'native'}, diff --git a/website/versioned_docs/version-0.67/integration-with-android-fragment.md b/website/versioned_docs/version-0.67/integration-with-android-fragment.md index 2421e46635e..e35dc66ce12 100644 --- a/website/versioned_docs/version-0.67/integration-with-android-fragment.md +++ b/website/versioned_docs/version-0.67/integration-with-android-fragment.md @@ -3,6 +3,8 @@ id: integration-with-android-fragment title: Integration with an Android Fragment --- +import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; + The guide for [Integration with Existing Apps](https://reactnative.dev/docs/integration-with-existing-apps) details how to integrate a full-screen React Native app into an existing Android app as an Activity. To use React Native components within Fragments in an existing app requires some additional setup. The benefit of this is that it allows for a native app to integrate React Native components alongside native fragments in an Activity. ### 1. Add React Native to your app @@ -17,12 +19,58 @@ You will need to implement the ReactApplication interface in your main Applicati Ensure your main Application Java class implements ReactApplication: + + + +```kotlin +class MyReactApplication: Application(), ReactApplication {...} +``` + + + + ```java public class MyReactApplication extends Application implements ReactApplication {...} ``` + + + Override the required methods `getUseDeveloperSupport`, `getPackages` and `getReactNativeHost`: + + + +```kotlin +class MyReactApplication: Application(), ReactApplication { + + override fun onCreate(): Unit { + super.onCreate() + SoLoader.init(this, false) + } + + private val reactNativeHost = object: ReactNativeHost(this) { + + override fun getUseDeveloperSupport(): Boolean { + return BuildConfig.DEBUG + } + + override fun getPackages(): List { + val packages = PackageList(this).getPackages() + // Packages that cannot be autolinked yet can be added manually here + return packages + } + } + + override fun getReactNativeHost(): ReactNativeHost { + return reactNativeHost + } +} +``` + + + + ```java public class MyReactApplication extends Application implements ReactApplication { @Override @@ -51,8 +99,29 @@ public class MyReactApplication extends Application implements ReactApplication } ``` + + + If you are using Android Studio, use Alt + Enter to add all missing imports in your class. Alternatively these are the required imports to include manually: + + + +```kotlin +import android.app.Application + +import com.facebook.react.PackageList +import com.facebook.react.ReactApplication +import com.facebook.react.ReactNativeHost +import com.facebook.react.ReactPackage +import com.facebook.soloader.SoLoader + +import java.util.List +``` + + + + ```java import android.app.Application; @@ -65,6 +134,9 @@ import com.facebook.soloader.SoLoader; import java.util.List; ``` + + + Perform a "Sync Project files with Gradle" operation. ### Step 3. Add a FrameLayout for the React Native Fragment @@ -101,12 +173,51 @@ Now in your Activity class e.g. `MainActivity.java` you need to add an OnClickLi Add the button field to the top of your Activity: + + + +```kotlin +private lateinit var button: Button +``` + + + + ```java private Button mButton; ``` + + + Update your Activity's onCreate method as follows: + + + +```kotlin +override fun onCreate(savedInstanceState: Bundle): Unit { + super.onCreate(savedInstanceState) + setContentView(R.layout.main_activity) + + button = findViewById(R.id.button) as Button + button.setOnClickListener { + val reactNativeFragment = ReactFragment.Builder() + .setComponentName("HelloWorld") + .setLaunchOptions(getLaunchOptions("test message")) + .build() + + getSupportFragmentManager() + .beginTransaction() + .add(R.id.reactNativeFragment, reactNativeFragment) + .commit() + } +} +``` + + + + ```java @Override protected void onCreate(Bundle savedInstanceState) { @@ -131,12 +242,30 @@ protected void onCreate(Bundle savedInstanceState) { } ``` + + + In the code above `Fragment reactNativeFragment = new ReactFragment.Builder()` creates the ReactFragment and `getSupportFragmentManager().beginTransaction().add()` adds the Fragment to the Frame Layout. If you are using a starter kit for React Native, replace the "HelloWorld" string with the one in your `index.js` or `index.android.js` file (it’s the first argument to the AppRegistry.registerComponent() method). Add the `getLaunchOptions` method which will allow you to pass props through to your component. This is optional and you can remove `setLaunchOptions` if you don't need to pass any props. + + + +```kotlin +private fun getLaunchOptions(String message): Bundle { + val initialProperties = Bundle() + initialProperties.putString("message", message) + return initialProperties +} + +``` + + + + ```java private Bundle getLaunchOptions(String message) { Bundle initialProperties = new Bundle(); @@ -145,8 +274,28 @@ private Bundle getLaunchOptions(String message) { } ``` + + + Add all missing imports in your Activity class. Be careful to use your package’s BuildConfig and not the one from the facebook package! Alternatively these are the required imports to include manually: + + + +```kotlin +import android.app.Application + +import com.facebook.react.ReactApplication +import com.facebook.react.ReactNativeHost +import com.facebook.react.ReactPackage +import com.facebook.react.shell.MainReactPackage +import com.facebook.soloader.SoLoader + +``` + + + + ```java import android.app.Application; @@ -157,6 +306,9 @@ import com.facebook.react.shell.MainReactPackage; import com.facebook.soloader.SoLoader; ``` + + + Perform a "Sync Project files with Gradle" operation. ### Step 5. Test your integration From b59153727e8cd42a285545e06583a979332af51f Mon Sep 17 00:00:00 2001 From: David Vacca <515103+mdvacca@users.noreply.github.com> Date: Fri, 25 Feb 2022 13:59:53 -0800 Subject: [PATCH 04/20] Update website/versioned_docs/version-0.67/integration-with-android-fragment.md Co-authored-by: Andrei Shikov --- .../version-0.67/integration-with-android-fragment.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/versioned_docs/version-0.67/integration-with-android-fragment.md b/website/versioned_docs/version-0.67/integration-with-android-fragment.md index e35dc66ce12..03d0f6df92a 100644 --- a/website/versioned_docs/version-0.67/integration-with-android-fragment.md +++ b/website/versioned_docs/version-0.67/integration-with-android-fragment.md @@ -49,7 +49,7 @@ class MyReactApplication: Application(), ReactApplication { SoLoader.init(this, false) } - private val reactNativeHost = object: ReactNativeHost(this) { + private val reactNativeHost = object : ReactNativeHost(this) { override fun getUseDeveloperSupport(): Boolean { return BuildConfig.DEBUG From 98329dc29f9d5cdfe133b77bcdf2072d6c889e89 Mon Sep 17 00:00:00 2001 From: David Vacca <515103+mdvacca@users.noreply.github.com> Date: Fri, 25 Feb 2022 14:00:10 -0800 Subject: [PATCH 05/20] Update website/versioned_docs/version-0.67/integration-with-android-fragment.md Co-authored-by: Andrei Shikov --- .../version-0.67/integration-with-android-fragment.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/versioned_docs/version-0.67/integration-with-android-fragment.md b/website/versioned_docs/version-0.67/integration-with-android-fragment.md index 03d0f6df92a..f2df37f9196 100644 --- a/website/versioned_docs/version-0.67/integration-with-android-fragment.md +++ b/website/versioned_docs/version-0.67/integration-with-android-fragment.md @@ -200,7 +200,7 @@ override fun onCreate(savedInstanceState: Bundle): Unit { super.onCreate(savedInstanceState) setContentView(R.layout.main_activity) - button = findViewById(R.id.button) as Button + button = findViewById