From 597264182873354dc5215ca8267428ea5ca32136 Mon Sep 17 00:00:00 2001 From: ledutu Date: Thu, 5 Oct 2023 14:42:00 +0700 Subject: [PATCH] feat: upgrade react native to latest version --- template/.eslintrc.js | 2 +- template/.gitignore | 5 +- template/.node-version | 1 - template/Gemfile | 6 +- template/README.md | 79 + .../__tests__/{App-test.js => App.test.js} | 3 + template/android/app/build.gradle | 48 +- .../rnbaseproject/MainActivity.java | 4 +- .../res/drawable/rn_edit_text_material.xml | 2 +- template/android/build.gradle | 2 +- template/android/gradle.properties | 2 +- .../android/gradle/wrapper/gradle-wrapper.jar | Bin 59821 -> 61574 bytes .../gradle/wrapper/gradle-wrapper.properties | 3 +- template/android/gradlew | 18 +- template/android/gradlew.bat | 15 +- template/android/settings.gradle | 2 +- template/ios/Podfile | 12 +- template/ios/Podfile.lock | 634 ++++--- .../RNBaseProject.xcodeproj/project.pbxproj | 24 + template/ios/RNBaseProject/AppDelegate.mm | 10 - template/jest.config.js | 3 + template/metro.config.js | 20 +- template/package.json | 19 +- template/yarn.lock | 1546 +++++------------ yarn.lock | 297 ++++ 25 files changed, 1299 insertions(+), 1458 deletions(-) delete mode 100644 template/.node-version create mode 100644 template/README.md rename template/__tests__/{App-test.js => App.test.js} (73%) create mode 100644 template/jest.config.js diff --git a/template/.eslintrc.js b/template/.eslintrc.js index f5e0c9a6..d7e74fd4 100644 --- a/template/.eslintrc.js +++ b/template/.eslintrc.js @@ -1,6 +1,6 @@ module.exports = { root: true, - extends: ['@react-native-community', 'plugin:react-hooks/recommended'], + extends: ['@react-native', 'plugin:react-hooks/recommended'], plugins: ['unused-imports', 'import'], rules: { semi: 'off', diff --git a/template/.gitignore b/template/.gitignore index abab531c..071e7c6f 100644 --- a/template/.gitignore +++ b/template/.gitignore @@ -60,4 +60,7 @@ yarn-error.log /vendor/bundle/ # Temporary files created by Metro to check the health of the file watcher -.metro-health-check* \ No newline at end of file +.metro-health-check* + +# testing +/coverage \ No newline at end of file diff --git a/template/.node-version b/template/.node-version deleted file mode 100644 index 3c032078..00000000 --- a/template/.node-version +++ /dev/null @@ -1 +0,0 @@ -18 diff --git a/template/Gemfile b/template/Gemfile index 1142b1b2..710695e1 100644 --- a/template/Gemfile +++ b/template/Gemfile @@ -1,6 +1,4 @@ source 'https://rubygems.org' - # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version -ruby '>= 2.6.10' - -gem 'cocoapods', '>= 1.11.3' +ruby ">= 2.6.10" +gem 'cocoapods', '~> 1.12' \ No newline at end of file diff --git a/template/README.md b/template/README.md new file mode 100644 index 00000000..12470c30 --- /dev/null +++ b/template/README.md @@ -0,0 +1,79 @@ +This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli). + +# Getting Started + +>**Note**: Make sure you have completed the [React Native - Environment Setup](https://reactnative.dev/docs/environment-setup) instructions till "Creating a new application" step, before proceeding. + +## Step 1: Start the Metro Server + +First, you will need to start **Metro**, the JavaScript _bundler_ that ships _with_ React Native. + +To start Metro, run the following command from the _root_ of your React Native project: + +```bash +# using npm +npm start + +# OR using Yarn +yarn start +``` + +## Step 2: Start your Application + +Let Metro Bundler run in its _own_ terminal. Open a _new_ terminal from the _root_ of your React Native project. Run the following command to start your _Android_ or _iOS_ app: + +### For Android + +```bash +# using npm +npm run android + +# OR using Yarn +yarn android +``` + +### For iOS + +```bash +# using npm +npm run ios + +# OR using Yarn +yarn ios +``` + +If everything is set up _correctly_, you should see your new app running in your _Android Emulator_ or _iOS Simulator_ shortly provided you have set up your emulator/simulator correctly. + +This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively. + +## Step 3: Modifying your App + +Now that you have successfully run the app, let's modify it. + +1. Open `App.tsx` in your text editor of choice and edit some lines. +2. For **Android**: Press the R key twice or select **"Reload"** from the **Developer Menu** (Ctrl + M (on Window and Linux) or Cmd ⌘ + M (on macOS)) to see your changes! + + For **iOS**: Hit Cmd ⌘ + R in your iOS Simulator to reload the app and see your changes! + +## Congratulations! :tada: + +You've successfully run and modified your React Native App. :partying_face: + +### Now what? + +- If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps). +- If you're curious to learn more about React Native, check out the [Introduction to React Native](https://reactnative.dev/docs/getting-started). + +# Troubleshooting + +If you can't get this to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page. + +# Learn More + +To learn more about React Native, take a look at the following resources: + +- [React Native Website](https://reactnative.dev) - learn more about React Native. +- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment. +- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**. +- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts. +- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native. diff --git a/template/__tests__/App-test.js b/template/__tests__/App.test.js similarity index 73% rename from template/__tests__/App-test.js rename to template/__tests__/App.test.js index 351e7706..d8545401 100644 --- a/template/__tests__/App-test.js +++ b/template/__tests__/App.test.js @@ -6,6 +6,9 @@ import 'react-native' import React from 'react' import App from '../App' +// Note: import explicitly to use the types shiped with jest. +import {it} from '@jest/globals' + // Note: test renderer must be required after react-native. import renderer from 'react-test-renderer' diff --git a/template/android/app/build.gradle b/template/android/app/build.gradle index aedc931d..fe0b43e1 100644 --- a/template/android/app/build.gradle +++ b/template/android/app/build.gradle @@ -9,7 +9,6 @@ project.ext.envConfigFiles = [ apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle" -import com.android.build.OutputFile import org.apache.tools.ant.taskdefs.condition.Os /** @@ -23,8 +22,8 @@ react { // root = file("../") // The folder where the react-native NPM package is. Default is ../node_modules/react-native // reactNativeDir = file("../node_modules/react-native") - // The folder where the react-native Codegen package is. Default is ../node_modules/react-native-codegen - // codegenDir = file("../node_modules/react-native-codegen") + // The folder where the react-native Codegen package is. Default is ../node_modules/@react-native/codegen + // codegenDir = file("../node_modules/@react-native/codegen") // The cli.js file which is the React Native CLI entrypoint. Default is ../node_modules/react-native/cli.js // cliFile = file("../node_modules/react-native/cli.js") /* Variants */ @@ -61,14 +60,6 @@ react { apply from: "../../node_modules/react-native-code-push/android/codepush.gradle" -/** - * Set this to true to create four separate APKs instead of one, - * one for each native architecture. This is useful if you don't - * use App Bundles (https://developer.android.com/guide/app-bundle/) - * and want to have separate APKs to upload to the Play Store. - */ -def enableSeparateBuildPerCPUArchitecture = false - /** * Set this to true to Run Proguard on Release builds to minify the Java bytecode. */ @@ -87,16 +78,6 @@ def enableProguardInReleaseBuilds = false */ def jscFlavor = 'org.webkit:android-jsc:+' -/** - * Private function to get the list of Native Architectures you want to build. - * This reads the value from reactNativeArchitectures in your gradle.properties - * file and works together with the --active-arch-only flag of react-native run-android. - */ -def reactNativeArchitectures() { - def value = project.getProperties().get("reactNativeArchitectures") - return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"] -} - android { ndkVersion rootProject.ext.ndkVersion compileSdkVersion rootProject.ext.compileSdkVersion @@ -119,14 +100,6 @@ android { resValue "string", "build_config_package", "com.saigontechnolgy.rnbaseproject" } - splits { - abi { - reset() - enable enableSeparateBuildPerCPUArchitecture - universalApk false // If true, also generate a universal APK - include (*reactNativeArchitectures()) - } - } signingConfigs { debug { storeFile file('debug.keystore') @@ -148,28 +121,11 @@ android { proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" } } - - // applicationVariants are e.g. debug, release - applicationVariants.all { variant -> - variant.outputs.each { output -> - // For each separate APK per architecture, set a unique version code as described here: - // https://developer.android.com/studio/build/configure-apk-splits.html - // Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc. - def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4] - def abi = output.getFilter(OutputFile.ABI) - if (abi != null) { // null for the universal-debug, universal-release variants - output.versionCodeOverride = - defaultConfig.versionCode * 1000 + versionCodes.get(abi) - } - - } - } } dependencies { // The version of react-native is set by the React Native Gradle Plugin implementation("com.facebook.react:react-android") - implementation("androidx.swiperefreshlayout:swiperefreshlayout:1.0.0") debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") diff --git a/template/android/app/src/main/java/com/saigontechnolgy/rnbaseproject/MainActivity.java b/template/android/app/src/main/java/com/saigontechnolgy/rnbaseproject/MainActivity.java index 0d200a93..f52251c1 100644 --- a/template/android/app/src/main/java/com/saigontechnolgy/rnbaseproject/MainActivity.java +++ b/template/android/app/src/main/java/com/saigontechnolgy/rnbaseproject/MainActivity.java @@ -27,9 +27,7 @@ protected ReactActivityDelegate createReactActivityDelegate() { this, getMainComponentName(), // If you opted-in for the New Architecture, we enable the Fabric Renderer. - DefaultNewArchitectureEntryPoint.getFabricEnabled(), // fabricEnabled - // If you opted-in for the New Architecture, we enable Concurrent React (i.e. React 18). - DefaultNewArchitectureEntryPoint.getConcurrentReactEnabled() // concurrentRootEnabled + DefaultNewArchitectureEntryPoint.getFabricEnabled() ); } } diff --git a/template/android/app/src/main/res/drawable/rn_edit_text_material.xml b/template/android/app/src/main/res/drawable/rn_edit_text_material.xml index f35d9962..73b37e4d 100644 --- a/template/android/app/src/main/res/drawable/rn_edit_text_material.xml +++ b/template/android/app/src/main/res/drawable/rn_edit_text_material.xml @@ -20,7 +20,7 @@ android:insetBottom="@dimen/abc_edit_text_inset_bottom_material"> -