feat: upgrade react native 0.70.6

Author: handidev

README.md

@@ -6,29 +6,28 @@
 
 It is a template that you can clone and reuse for every project. It is starting point for React Native application.
 
-## React Native Typescript Boilerplate ( 0.69.1 )
+## React Native Typescript Boilerplate ( 0.70.6 )
 
 consist of:
 
-- react-native": "0.69.1"
-- "@react-native-masked-view/masked-view": "^0.2.7",
-- "@react-navigation/bottom-tabs": "^6.3.2",
-- "@react-navigation/material-top-tabs": "^6.2.2",
-- "@react-navigation/native": "^6.0.11",
-- "@react-navigation/native-stack": "^6.7.0",
-- "@react-navigation/stack": "^6.2.2",
-- "@reduxjs/toolkit": "^1.8.3",
-- "react": "18.0.0",
-- "react-native-gesture-handler": "^2.5.0",
-- "react-native-pager-view": "^5.4.25",
-- "react-native-safe-area-context": "^4.3.1",
-- "react-native-screens": "^3.15.0",
-- "react-native-tab-view": "^3.1.1",
+- "@react-native-masked-view/masked-view": "^0.2.8",
+- "@react-navigation/bottom-tabs": "^6.4.0",
+- "@react-navigation/material-top-tabs": "^6.3.0",
+- "@react-navigation/native": "^6.0.13",
+- "@react-navigation/native-stack": "^6.9.1",
+- "@reduxjs/toolkit": "^1.9.0",
+- "react": "18.1.0",
+- "react-native": "0.70.6",
+- "react-native-gesture-handler": "^2.8.0",
+- "react-native-pager-view": "^6.1.0",
+- "react-native-safe-area-context": "^4.4.1",
+- "react-native-screens": "^3.18.2",
+- "react-native-tab-view": "^3.3.0",
 - "react-native-vector-icons": "^9.2.0",
-- "react-redux": "^8.0.2"
+- "react-redux": "^8.0.5"
 ## Requirements
 
-Node 12 or greater is required. Development for iOS requires a Mac and Xcode 10 or up, and will target iOS 11 and up.
+Node 14 or greater is required. Development for iOS requires a Mac and Xcode 10 or up, and will target iOS 11 and up.
 
 You also need to install the dependencies required by React Native.  
 Go to the [React Native environment setup](https://reactnative.dev/docs/environment-setup), then select `React Native CLI Quickstart` tab.  
@@ -68,6 +67,12 @@ Run this command `chmod 755 android/gradlew` from your root project directory
 
 - Replace `USERNAME` with your PC username
 
+
+#### Error Your Ruby version is 2.6.10, but your Gemfile specified 2.7.5
+- install `rbenv`
+- run `rbenv local 2.7.5`
+- `export PATH="$HOME/.rbenv/bin:$PATH"`
+
 ### React Native Build Failed on M1 Macbook Pro / Air
 
 try this solution: [How to Run and Build React Native on Macbook Pro M1 Apple Silicon](https://handi.dev/blog/how-run-react-native-on-macbook-m1-apple-silicon)

script.js

@@ -1,3 +1,3 @@
 #!/usr/bin/env node
 
-console.log("Welcome to handi.dev boilerplate");
+console.log("Welcome to handi.dev react native TypeScript boilerplate");

template.config.js

@@ -3,7 +3,7 @@ module.exports = {
   // package.json, index.json, android/, ios/
   placeholderName: "reactNativeBoilerplate",
 
-  titlePlaceholder: 'Handi.dev react native boilerplate',
+  titlePlaceholder: 'Handi.dev react native typescript boilerplate',
 
   // Directory with template
   templateDir: "./template",

template/.bundle/config

@@ -0,0 +1,2 @@
+BUNDLE_PATH: "vendor/bundle"
+BUNDLE_FORCE_RUBY_PLATFORM: 1

template/.gitignore

@@ -30,6 +30,7 @@ build/
 local.properties
 *.iml
 *.hprof
+.cxx/
 
 # node.js
 #

template/.node-version

@@ -0,0 +1 @@
+16

template/.prettierrc.js

@@ -4,4 +4,4 @@ module.exports = {
   bracketSpacing: true,
   singleQuote: true,
   trailingComma: 'all',
-};
+};

template/Gemfile.lock

@@ -0,0 +1,100 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    CFPropertyList (3.0.5)
+      rexml
+    activesupport (6.1.7)
+      concurrent-ruby (~> 1.0, >= 1.0.2)
+      i18n (>= 1.6, < 2)
+      minitest (>= 5.1)
+      tzinfo (~> 2.0)
+      zeitwerk (~> 2.3)
+    addressable (2.8.1)
+      public_suffix (>= 2.0.2, < 6.0)
+    algoliasearch (1.27.5)
+      httpclient (~> 2.8, >= 2.8.3)
+      json (>= 1.5.1)
+    atomos (0.1.3)
+    claide (1.1.0)
+    cocoapods (1.11.3)
+      addressable (~> 2.8)
+      claide (>= 1.0.2, < 2.0)
+      cocoapods-core (= 1.11.3)
+      cocoapods-deintegrate (>= 1.0.3, < 2.0)
+      cocoapods-downloader (>= 1.4.0, < 2.0)
+      cocoapods-plugins (>= 1.0.0, < 2.0)
+      cocoapods-search (>= 1.0.0, < 2.0)
+      cocoapods-trunk (>= 1.4.0, < 2.0)
+      cocoapods-try (>= 1.1.0, < 2.0)
+      colored2 (~> 3.1)
+      escape (~> 0.0.4)
+      fourflusher (>= 2.3.0, < 3.0)
+      gh_inspector (~> 1.0)
+      molinillo (~> 0.8.0)
+      nap (~> 1.0)
+      ruby-macho (>= 1.0, < 3.0)
+      xcodeproj (>= 1.21.0, < 2.0)
+    cocoapods-core (1.11.3)
+      activesupport (>= 5.0, < 7)
+      addressable (~> 2.8)
+      algoliasearch (~> 1.0)
+      concurrent-ruby (~> 1.1)
+      fuzzy_match (~> 2.0.4)
+      nap (~> 1.0)
+      netrc (~> 0.11)
+      public_suffix (~> 4.0)
+      typhoeus (~> 1.0)
+    cocoapods-deintegrate (1.0.5)
+    cocoapods-downloader (1.6.3)
+    cocoapods-plugins (1.0.0)
+      nap
+    cocoapods-search (1.0.1)
+    cocoapods-trunk (1.6.0)
+      nap (>= 0.8, < 2.0)
+      netrc (~> 0.11)
+    cocoapods-try (1.2.0)
+    colored2 (3.1.2)
+    concurrent-ruby (1.1.10)
+    escape (0.0.4)
+    ethon (0.16.0)
+      ffi (>= 1.15.0)
+    ffi (1.15.5)
+    fourflusher (2.3.1)
+    fuzzy_match (2.0.4)
+    gh_inspector (1.1.3)
+    httpclient (2.8.3)
+    i18n (1.12.0)
+      concurrent-ruby (~> 1.0)
+    json (2.6.2)
+    minitest (5.16.3)
+    molinillo (0.8.0)
+    nanaimo (0.3.0)
+    nap (1.1.0)
+    netrc (0.11.0)
+    public_suffix (4.0.7)
+    rexml (3.2.5)
+    ruby-macho (2.5.1)
+    typhoeus (1.4.0)
+      ethon (>= 0.9.0)
+    tzinfo (2.0.5)
+      concurrent-ruby (~> 1.0)
+    xcodeproj (1.22.0)
+      CFPropertyList (>= 2.3.3, < 4.0)
+      atomos (~> 0.1.3)
+      claide (>= 1.0.2, < 2.0)
+      colored2 (~> 3.1)
+      nanaimo (~> 0.3.0)
+      rexml (~> 3.2.4)
+    zeitwerk (2.6.6)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  cocoapods (~> 1.11, >= 1.11.2)
+
+RUBY VERSION
+   ruby 2.7.5p203
+
+BUNDLED WITH
+   2.1.4

template/android/app/build.gradle

@@ -1,6 +1,7 @@
 apply plugin: "com.android.application"
 
 import com.android.build.OutputFile
+import org.apache.tools.ant.taskdefs.condition.Os
 
 /**
  * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
@@ -78,7 +79,7 @@ import com.android.build.OutputFile
  */
 
 project.ext.react = [
-    enableHermes: false,  // clean and rebuild if changing
+    enableHermes: true,  // clean and rebuild if changing
 ]
 
 apply from: "../../node_modules/react-native/react.gradle"
@@ -142,22 +143,14 @@ android {
         buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
 
         if (isNewArchitectureEnabled()) {
-            // We configure the NDK build only if you decide to opt-in for the New Architecture.
+            // We configure the CMake build only if you decide to opt-in for the New Architecture.
             externalNativeBuild {
-                ndkBuild {
-                    arguments "APP_PLATFORM=android-21",
-                        "APP_STL=c++_shared",
-                        "NDK_TOOLCHAIN_VERSION=clang",
-                        "GENERATED_SRC_DIR=$buildDir/generated/source",
-                        "PROJECT_BUILD_DIR=$buildDir",
-                        "REACT_ANDROID_DIR=$rootDir/../node_modules/react-native/ReactAndroid",
-                        "REACT_ANDROID_BUILD_DIR=$rootDir/../node_modules/react-native/ReactAndroid/build",
-                        "NODE_MODULES_DIR=$rootDir/../node_modules"
-                    cFlags "-Wall", "-Werror", "-fexceptions", "-frtti", "-DWITH_INSPECTOR=1"
-                    cppFlags "-std=c++17"
-                    // Make sure this target name is the same you specify inside the
-                    // src/main/jni/Android.mk file for the `LOCAL_MODULE` variable.
-                    targets "reactnativetypescriptboilerplate_appmodules"
+                cmake {
+                    arguments "-DPROJECT_BUILD_DIR=$buildDir",
+                        "-DREACT_ANDROID_DIR=$rootDir/../node_modules/react-native/ReactAndroid",
+                        "-DREACT_ANDROID_BUILD_DIR=$rootDir/../node_modules/react-native/ReactAndroid/build",
+                        "-DNODE_MODULES_DIR=$rootDir/../node_modules",
+                        "-DANDROID_STL=c++_shared"
                 }
             }
             if (!enableSeparateBuildPerCPUArchitecture) {
@@ -171,8 +164,8 @@ android {
     if (isNewArchitectureEnabled()) {
         // We configure the NDK build only if you decide to opt-in for the New Architecture.
         externalNativeBuild {
-            ndkBuild {
-                path "$projectDir/src/main/jni/Android.mk"
+            cmake {
+                path "$projectDir/src/main/jni/CMakeLists.txt"
             }
         }
         def reactAndroidProjectDir = project(':ReactAndroid').projectDir
@@ -194,15 +187,15 @@ android {
             preReleaseBuild.dependsOn(packageReactNdkReleaseLibs)
 
             // Due to a bug inside AGP, we have to explicitly set a dependency
-            // between configureNdkBuild* tasks and the preBuild tasks.
+            // between configureCMakeDebug* tasks and the preBuild tasks.
             // This can be removed once this is solved: https://issuetracker.google.com/issues/207403732
-            configureNdkBuildRelease.dependsOn(preReleaseBuild)
-            configureNdkBuildDebug.dependsOn(preDebugBuild)
+            configureCMakeRelWithDebInfo.dependsOn(preReleaseBuild)
+            configureCMakeDebug.dependsOn(preDebugBuild)
             reactNativeArchitectures().each { architecture ->
-                tasks.findByName("configureNdkBuildDebug[${architecture}]")?.configure {
+                tasks.findByName("configureCMakeDebug[${architecture}]")?.configure {
                     dependsOn("preDebugBuild")
                 }
-                tasks.findByName("configureNdkBuildRelease[${architecture}]")?.configure {
+                tasks.findByName("configureCMakeRelWithDebInfo[${architecture}]")?.configure {
                     dependsOn("preReleaseBuild")
                 }
             }

template/android/app/src/main/java/com/reactnativetypescriptboilerplate/MainActivity.java

@@ -16,7 +16,6 @@ protected String getMainComponentName() {
     return "reactNativeTypescriptBoilerplate";
   }
 
-    // for react-native-screens
   @Override
   protected void onCreate(Bundle savedInstanceState) {
     super.onCreate(null);

template/android/app/src/main/jni/Android.mk

@@ -0,0 +1,7 @@
+cmake_minimum_required(VERSION 3.13)
+
+# Define the library name here.
+project(reactnativetypescriptboilerplate_appmodules)
+
+# This file includes all the necessary to let you build your application with the New Architecture.
+include(${REACT_ANDROID_DIR}/cmake-utils/ReactNative-application.cmake)

template/android/app/src/main/jni/CMakeLists.txt

@@ -1,12 +1,13 @@
 #include "MainApplicationModuleProvider.h"
 
+#include <rncli.h>
 #include <rncore.h>
 
 namespace facebook {
 namespace react {
 
 std::shared_ptr<TurboModule> MainApplicationModuleProvider(
-    const std::string moduleName,
+    const std::string &moduleName,
     const JavaTurboModule::InitParams &params) {
   // Here you can provide your own module provider for TurboModules coming from
   // either your application or from external libraries. The approach to follow
@@ -17,6 +18,13 @@ std::shared_ptr<TurboModule> MainApplicationModuleProvider(
   //    return module;
   // }
   // return rncore_ModuleProvider(moduleName, params);
+
+  // Module providers autolinked by RN CLI
+  auto rncli_module = rncli_ModuleProvider(moduleName, params);
+  if (rncli_module != nullptr) {
+    return rncli_module;
+  }
+
   return rncore_ModuleProvider(moduleName, params);
 }
 

template/android/app/src/main/jni/MainApplicationModuleProvider.cpp

@@ -9,7 +9,7 @@ namespace facebook {
 namespace react {
 
 std::shared_ptr<TurboModule> MainApplicationModuleProvider(
-    const std::string moduleName,
+    const std::string &moduleName,
     const JavaTurboModule::InitParams &params);
 
 } // namespace react