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

Add React Navigation with React Native Gradle Plugin #27

Merged
merged 12 commits into from
Jun 19, 2023
Merged

Add React Navigation with React Native Gradle Plugin #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
94b46a4
build: install React Navigation
wzieba Jun 15, 2023
e76d204
build: install React Native Screens and Safe Area Context
wzieba Jun 15, 2023
812774d
build: temporary apply Android Library plugin via buildscript
wzieba Jun 15, 2023
5e05f1d
Adds React Native Gradle Plugin
oguzkocer Jun 15, 2023
0366369
Merge branch 'add/react-native-gradle-plugin' into build/add_navigati…
oguzkocer Jun 15, 2023
145233e
Use plugins block instead of buildscript
oguzkocer Jun 16, 2023
eb94777
Set compile, target and min sdk versions in root build.gradle
oguzkocer Jun 16, 2023
6085b79
Set reactNativeDir & codegenDir for React Native Gradle Plugin
oguzkocer Jun 16, 2023
3012948
Update AGP to 7.4.2
oguzkocer Jun 16, 2023
d200fce
build: replace Compose with android.view.* layouts
wzieba Jun 16, 2023
73c373a
build: update Podfile.lock
wzieba Jun 16, 2023
7c5c493
Merge remote-tracking branch 'origin' into build/add_navigation-with-…
wzieba Jun 16, 2023
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
12 changes: 9 additions & 3 deletions libraries/android/build.gradle
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,15 @@
plugins {
id 'com.android.library' apply false
id 'com.android.application' apply false
}

ext {
compileSdkVersion = 33
targetSdkVersion = 33
minSdkVersion = 24

appCompatVersion = '1.4.2'
activityComposeVersion = '1.7.2'
androidxCoreVersion = '1.10.1'
androidxComposeBomVersion = '2022.12.00'
androidxComposeCompilerVersion = '1.4.4'
reactNativeVersion = '0.71.8'

// Testing
Expand Down
28 changes: 11 additions & 17 deletions libraries/android/demo/build.gradle
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,37 @@
plugins {
id 'com.android.application'
id 'org.jetbrains.kotlin.android'
id 'com.facebook.react'
}

repositories {
mavenCentral()
google()
}

react {
root = file("../../../")
entryFile = file("../../../index.tsx")
reactNativeDir = file("../../../node_modules/react-native")
codegenDir = file("../../../node_modules/react-native-codegen")
}
Comment on lines +4 to +17
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If I'm not mistaken, this means that we'll also need to apply com.facebook.react to WCAndroid and introduce react { extension to configure it.

I'm worried if applying com.facebook.react is safe for WCAndroid - it feels fragile, but I don't have arguments to support it.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since we'll package the library module into an artifact, this shouldn't be the case. However, I have doubts that it'll work out of the box and we'll likely need to do some of what the React Native Gradle Plugin is doing ourselves. For example, I am hoping that the plugin substitutes the react-native-* library dependencies with the artifacts from mavenCentral, as it suggests in its document. However, if it doesn't do that, since we won't have access to the node_modules folder from WCAndroid, we'll have to make sure we point to an artifact for these dependencies.

In short, I don't know if this setup will work for WCAndroid when we use binary dependencies. However, I don't think we'll ever want to apply com.facebook.react plugin to WCAndroid. Whatever issues come up, we'll have to deal with them some other way.

We should consider this PR just a step for you to be able to work on the project. Hope that makes sense.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

However, I don't think we'll ever want to apply com.facebook.react plugin to WCAndroid. Whatever issues come up, we'll have to deal with them some other way.

Gotcha, I think it's a good approach 👍 .

We should consider this PR just a step for you to be able to work on the project. Hope that makes sense.

My biggest concern about this PR was that it'll break the included builds configuration with WCAndroid and, therefore, block our further progress. But, I managed to make it work by:

  • Updating Gradle Wrapper to 7.5.1 722e761
  • Updating AGP to 7.4.2 1d1f720
  • Updating Aztec to v1.6.4 (previous version caused some DEX merging failing) 8fb35c0
  • Substituting React Native invalid dependencies with correct ones in dependencySubstitiution block d976f25

So, as after those changes we can still include WooCommerce-Shared to WCAndroid, I have no concerns with merging this PR 👍 .


android {
ndkVersion rootProject.ext.ndkVersion

namespace 'com.woocommerce.shared.demo'
compileSdk 33
compileSdk project.compileSdkVersion

defaultConfig {
applicationId "com.woocommerce.shared.demo"
minSdk 24
targetSdk 33
minSdk project.minSdkVersion
targetSdk project.targetSdkVersion
versionCode 1
versionName "1.0"

testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}

buildFeatures {
compose true
}

composeOptions {
kotlinCompilerExtensionVersion = androidxComposeCompilerVersion
}

buildTypes {
release {
minifyEnabled false
Expand All @@ -52,11 +52,5 @@ dependencies {
implementation "androidx.appcompat:appcompat:$appCompatVersion"
implementation "androidx.core:core-ktx:$androidxCoreVersion"

// Jetpack Compose
implementation "androidx.activity:activity-compose:$activityComposeVersion"
implementation platform("androidx.compose:compose-bom:$androidxComposeBomVersion")
// Dependencies managed by BOM
implementation 'androidx.compose.material3:material3'

testImplementation "junit:junit:$jUnitVersion"
}
41 changes: 18 additions & 23 deletions libraries/android/demo/src/main/kotlin/MainActivity.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,37 +2,32 @@ package com.woocommerce.shared.demo

import android.content.Intent
import android.os.Bundle
import android.view.Gravity
import android.widget.Button
import android.widget.FrameLayout
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import com.woocommerce.shared.library.ReactActivity

class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MaterialTheme {
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
)
{
Button(onClick = {
startReactActivity()
}) {
Text(text = "React Activity")
setContentView(
FrameLayout(this).apply {
addView(
Button(this@MainActivity).apply {
text = "React Activity"
layoutParams = FrameLayout.LayoutParams(
FrameLayout.LayoutParams.WRAP_CONTENT,
FrameLayout.LayoutParams.WRAP_CONTENT,
Gravity.CENTER
)
setOnClickListener {
startReactActivity()
}
}
}
)
}
}
)
}

private fun startReactActivity() {
Expand Down
11 changes: 6 additions & 5 deletions libraries/android/library/build.gradle
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
plugins {
id 'com.android.library'
id 'org.jetbrains.kotlin.android'
id 'com.facebook.react'
}

repositories {
Expand All @@ -14,11 +15,11 @@ android {
ndkVersion rootProject.ext.ndkVersion

namespace 'com.woocommerce.shared.library'
compileSdk 33
compileSdk project.compileSdkVersion

defaultConfig {
minSdk 24
targetSdk 33
minSdk project.minSdkVersion
targetSdk project.targetSdkVersion

testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
consumerProguardFiles "consumer-rules.pro"
Expand All @@ -42,8 +43,8 @@ android {
}

dependencies {
implementation "com.facebook.react:react-android:$reactNativeVersion"
implementation "com.facebook.react:hermes-android:$reactNativeVersion"
implementation "com.facebook.react:react-android"
implementation "com.facebook.react:hermes-android"
implementation "androidx.core:core-ktx:$androidxCoreVersion"

testImplementation "junit:junit:$jUnitVersion"
Expand Down
2 changes: 1 addition & 1 deletion libraries/android/library/src/main/kotlin/ReactActivity.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ class ReactActivity : Activity(), DefaultHardwareBackBtnHandler {
.setApplication(application)
.setCurrentActivity(this)
.setBundleAssetName("index.android.bundle")
.setJSMainModulePath("index")
.setJSMainModulePath("index.tsx")
.addPackages(packages)
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
Expand Down
4 changes: 3 additions & 1 deletion libraries/android/settings.gradle
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
pluginManagement {
gradle.ext.agpVersion = '7.2.1'
gradle.ext.agpVersion = '7.4.2'
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we use includeBuild with WCAndroid, it means that we'll also have to bump AGP in WCAndroid to 7.4.2. Then, we'll have to bump FluxC to 7.4.2 (if we want to keep included builds), then WPAndroid 😞 . It creates chain of work dependent from the authors of React Native Gradle Plugin - I feel it might be dangerous in a long run. WDYT?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am working on updating JDK and AGP for all projects, so hopefully it won't become a big issue. Unfortunately, if we don't update AGP, the project did not build for me. So, I felt it was a must at the time. However, we can certainly try again to see if we can get 7.2.1 to work.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gotcha. At the time of writing my first comment, I don't know why, but I assumed that React Native Gradle Plugin has not fixed version, but it's always somehow the newest one (like "+" dependency). That's of course incorrect - the React Native Gradle Plugin is bundled with the React Native version we define in ext.

That's where my concerns with AGP synchronization raised.

For now, at this stage of experiment, I think it's completely fine to use AGP 7.4.2 here. I've updated AGP to 7.4.2 as well on woocommerce/woocommerce-android#9225 PR so we can still include WooCommerce-Shared to WCAndroid.

gradle.ext.kotlinVersion = '1.8.10'

repositories {
Expand All @@ -18,3 +18,5 @@ apply from: file("../../node_modules/@react-native-community/cli-platform-androi

include(":library")
include(":demo")

includeBuild('../../node_modules/react-native-gradle-plugin')
17 changes: 17 additions & 0 deletions libraries/ios/Podfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -233,6 +233,12 @@ PODS:
- React-jsinspector (0.71.10)
- React-logger (0.71.10):
- glog
- react-native-safe-area-context (4.5.3):
- RCT-Folly
- RCTRequired
- RCTTypeSafety
- React-Core
- ReactCommon/turbomodule/core
- React-perflogger (0.71.10)
- React-RCTActionSheet (0.71.10):
- React-Core/RCTActionSheetHeaders (= 0.71.10)
Expand Down Expand Up @@ -314,6 +320,9 @@ PODS:
- React-jsi (= 0.71.10)
- React-logger (= 0.71.10)
- React-perflogger (= 0.71.10)
- RNScreens (3.21.0):
- React-Core
- React-RCTImage
- Yoga (1.14.0)

DEPENDENCIES:
Expand All @@ -337,6 +346,7 @@ DEPENDENCIES:
- React-jsiexecutor (from `../../node_modules/react-native/ReactCommon/jsiexecutor`)
- React-jsinspector (from `../../node_modules/react-native/ReactCommon/jsinspector`)
- React-logger (from `../../node_modules/react-native/ReactCommon/logger`)
- react-native-safe-area-context (from `../../node_modules/react-native-safe-area-context`)
- React-perflogger (from `../../node_modules/react-native/ReactCommon/reactperflogger`)
- React-RCTActionSheet (from `../../node_modules/react-native/Libraries/ActionSheetIOS`)
- React-RCTAnimation (from `../../node_modules/react-native/Libraries/NativeAnimation`)
Expand All @@ -350,6 +360,7 @@ DEPENDENCIES:
- React-RCTVibration (from `../../node_modules/react-native/Libraries/Vibration`)
- React-runtimeexecutor (from `../../node_modules/react-native/ReactCommon/runtimeexecutor`)
- ReactCommon/turbomodule/core (from `../../node_modules/react-native/ReactCommon`)
- RNScreens (from `../../node_modules/react-native-screens`)
- Yoga (from `../../node_modules/react-native/ReactCommon/yoga`)

SPEC REPOS:
Expand Down Expand Up @@ -395,6 +406,8 @@ EXTERNAL SOURCES:
:path: "../../node_modules/react-native/ReactCommon/jsinspector"
React-logger:
:path: "../../node_modules/react-native/ReactCommon/logger"
react-native-safe-area-context:
:path: "../../node_modules/react-native-safe-area-context"
React-perflogger:
:path: "../../node_modules/react-native/ReactCommon/reactperflogger"
React-RCTActionSheet:
Expand All @@ -421,6 +434,8 @@ EXTERNAL SOURCES:
:path: "../../node_modules/react-native/ReactCommon/runtimeexecutor"
ReactCommon:
:path: "../../node_modules/react-native/ReactCommon"
RNScreens:
:path: "../../node_modules/react-native-screens"
Yoga:
:path: "../../node_modules/react-native/ReactCommon/yoga"

Expand All @@ -445,6 +460,7 @@ SPEC CHECKSUMS:
React-jsiexecutor: 634df557a683cab436e4b3bc46512a6e519d19e8
React-jsinspector: cdc854f8b13abd202afa54bc12578e5afb9cfae1
React-logger: ef2269b3afa6ba868da90496c3e17a4ec4f4cee0
react-native-safe-area-context: b8979f5eda6ed5903d4dbc885be3846ea3daa753
React-perflogger: 217095464d5c4bb70df0742fa86bf2a363693468
React-RCTActionSheet: 8deae9b85a4cbc6a2243618ea62a374880a2c614
React-RCTAnimation: 59c62353a8b59ce206044786c5d30e4754bffa64
Expand All @@ -458,6 +474,7 @@ SPEC CHECKSUMS:
React-RCTVibration: d13cc2d63286c633393d3a7f6f607cc2a09ec011
React-runtimeexecutor: a9a1cd79996c9a0846e3232ecb25c64e1cc0172e
ReactCommon: bf28ee5aa027ee426a0610ff5eaaec41e171f1c7
RNScreens: d037903436160a4b039d32606668350d2a808806
Yoga: e7ea9e590e27460d28911403b894722354d73479

PODFILE CHECKSUM: a5aaae04645b4bc402e00d472a6809482d3ae8ae
Expand Down
6 changes: 5 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,12 @@
"version": "0.0.1",
"private": true,
"dependencies": {
"@react-navigation/native": "^6.1.6",
"@react-navigation/native-stack": "^6.9.12",
"react": "18.2.0",
"react-native": "0.71.10"
"react-native": "0.71.10",
"react-native-safe-area-context": "^4.5.3",
"react-native-screens": "^3.21.0"
},
"devDependencies": {
"prettier": "2.8.8"
Expand Down
Loading