Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add kotlin sample code in "Integration with an Android Fragment" documentation #2977

Merged
merged 20 commits into from
Mar 24, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
e447688
Add Kotlin examples in Integration with an Android Fragment
mdvacca Feb 25, 2022
54c1f3b
Revert "Add Kotlin examples in Integration with an Android Fragment"
mdvacca Feb 25, 2022
97a18c2
Add Kotlin examples in Integration with an Android Fragment
mdvacca Feb 25, 2022
b591537
Update website/versioned_docs/version-0.67/integration-with-android-f…
mdvacca Feb 25, 2022
98329dc
Update website/versioned_docs/version-0.67/integration-with-android-f…
mdvacca Feb 25, 2022
96e70dd
making java default
mdvacca Feb 28, 2022
32f6cb8
Update website/versioned_docs/version-0.67/integration-with-android-f…
mdvacca Mar 17, 2022
87603f4
Update website/versioned_docs/version-0.67/integration-with-android-f…
mdvacca Mar 17, 2022
52032a2
Update website/versioned_docs/version-0.67/integration-with-android-f…
mdvacca Mar 17, 2022
b4919a6
Update website/versioned_docs/version-0.67/integration-with-android-f…
mdvacca Mar 17, 2022
0d515d3
Update website/versioned_docs/version-0.67/integration-with-android-f…
mdvacca Mar 17, 2022
00f5a46
Update integration-with-android-fragment.md
mdvacca Mar 17, 2022
076359f
port changes to the current docs, fix tabs issue
Simek Mar 18, 2022
76b46cd
Update integration-with-android-fragment.md
mdvacca Mar 21, 2022
d54f23c
Update integration-with-android-fragment.md
mdvacca Mar 21, 2022
01c4ce4
Update docs/integration-with-android-fragment.md
mdvacca Mar 22, 2022
15abb83
Update docs/integration-with-android-fragment.md
mdvacca Mar 22, 2022
013dd8f
Update website/versioned_docs/version-0.67/integration-with-android-f…
mdvacca Mar 22, 2022
a4eca57
Update website/versioned_docs/version-0.67/integration-with-android-f…
mdvacca Mar 22, 2022
9feedb8
Remote whitespace
cortinico Mar 24, 2022
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
138 changes: 138 additions & 0 deletions docs/integration-with-android-fragment.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -17,12 +19,50 @@ You will need to implement the ReactApplication interface in your main Applicati

Ensure your main Application Java class implements ReactApplication:

<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
<TabItem value="kotlin">

```kotlin
class MyReactApplication: Application(), ReactApplication {...}
```

</TabItem>
<TabItem value="java">

```java
public class MyReactApplication extends Application implements ReactApplication {...}
```

</TabItem>
</Tabs>

Override the required methods `getUseDeveloperSupport`, `getPackages` and `getReactNativeHost`:

<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
<TabItem value="kotlin">

```kotlin
class MyReactApplication : Application(), ReactApplication {
override fun onCreate() {
super.onCreate()
SoLoader.init(this, false)
}
private val reactNativeHost =
object : ReactNativeHost(this) {
override fun getUseDeveloperSupport() = BuildConfig.DEBUG
override fun getPackages(): List<ReactPackage> {
val packages = PackageList(this).getPackages().toMutableList()
// Packages that cannot be autolinked yet can be added manually here
return packages
}
}
override fun getReactNativeHost(): ReactNativeHost = reactNativeHost
}
```

</TabItem>
<TabItem value="java">

```java
public class MyReactApplication extends Application implements ReactApplication {
@Override
Expand Down Expand Up @@ -51,8 +91,27 @@ public class MyReactApplication extends Application implements ReactApplication
}
```

</TabItem>
</Tabs>

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:

<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
<TabItem value="kotlin">

```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
```

</TabItem>
<TabItem value="java">

```java
import android.app.Application;

Expand All @@ -65,6 +124,9 @@ import com.facebook.soloader.SoLoader;
import java.util.List;
```

</TabItem>
</Tabs>

Perform a "Sync Project files with Gradle" operation.

### Step 3. Add a FrameLayout for the React Native Fragment
Expand Down Expand Up @@ -101,12 +163,49 @@ 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:

<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
<TabItem value="kotlin">

```kotlin
private lateinit var button: Button
```

</TabItem>
<TabItem value="java">

```java
private Button mButton;
```

</TabItem>
</Tabs>

Update your Activity's onCreate method as follows:

<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
<TabItem value="kotlin">

```kotlin
override fun onCreate(savedInstanceState: Bundle) {
super.onCreate(savedInstanceState)
setContentView(R.layout.main_activity)
button = findViewById<Button>(R.id.button)
button.setOnClickListener {
val reactNativeFragment = ReactFragment.Builder()
.setComponentName("HelloWorld")
.setLaunchOptions(getLaunchOptions("test message"))
.build()
getSupportFragmentManager()
.beginTransaction()
.add(R.id.reactNativeFragment, reactNativeFragment)
.commit()
}
}
```

</TabItem>
<TabItem value="java">

```java
@Override
protected void onCreate(Bundle savedInstanceState) {
Expand All @@ -131,12 +230,28 @@ protected void onCreate(Bundle savedInstanceState) {
}
```

</TabItem>
</Tabs>

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.

<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
<TabItem value="kotlin">

```kotlin
private fun getLaunchOptions(message: String) = Bundle().apply {
putString("message", message)
}

```

</TabItem>
<TabItem value="java">

```java
private Bundle getLaunchOptions(String message) {
Bundle initialProperties = new Bundle();
Expand All @@ -145,8 +260,28 @@ private Bundle getLaunchOptions(String message) {
}
```

</TabItem>
</Tabs>

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:

<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
<TabItem value="kotlin">

```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

```

</TabItem>
<TabItem value="java">

```java
import android.app.Application;

Expand All @@ -157,6 +292,9 @@ import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
```

</TabItem>
</Tabs>

Perform a "Sync Project files with Gradle" operation.

### Step 5. Test your integration
Expand Down
9 changes: 9 additions & 0 deletions website/core/TabsConstants.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,13 @@ const packageManagers = [
];
const defaultPackageManager = 'npm';

const androidLanguages = [
{label: 'Java', value: 'java'},
{label: 'Kotlin', value: 'kotlin'},
];

const defaultAndroidLanguage = 'java';

const guides = [
{label: 'Expo CLI Quickstart', value: 'quickstart'},
{label: 'React Native CLI Quickstart', value: 'native'},
Expand Down Expand Up @@ -52,10 +59,12 @@ export default {
defaultPackageManager,
defaultPlatform,
defaultSyntax,
defaultAndroidLanguage,
getDevNotesTabs,
guides,
oses,
packageManagers,
platforms,
syntax,
androidLanguages,
};
Loading