tsrntemp 1.1.5 → 1.2.0

package/README.md

@@ -1,48 +1,51 @@
-## :space_invader: React Native Template TypeScript
-
-## :arrow_forward: 用法
-```sh
-npx react-native init ProjectName --template tsrntemp
-```
-
-#### React Native <=> Template Version
-
-| React Native | Template |
-| ------------ | -------- |
-| 0.71         | 1.1.\*   |
-| 0.67         | 1.0.\*   |
-
-`本项目默认为TS搭建，集成路由，缓存，请求工具、icon工具`
-
-- 文件目录
- - src
-  - src/assets`静态资源文件夹`
-  - src/components`公用组件文件夹`
-  - src/config`配置文件夹`
-  - src/iconfont`图标字体文件夹`
-  - src/pages`所有页面文件夹`
-  - src/route`路由页面文件夹`
-  - src/types`类型申明文件夹`
-  - src/utils`工具类文件夹`
-
-### react-navigation
-- [具体使用参照](https://reactnavigation.org/docs/getting-started)
-
-##### icont使用
-- 根目录下有一个iconfont.json文件
-- [具体使用参照](https://www.npmjs.com/package/react-native-iconfont-cli)
-
-
-##### requset
-- 使用的请求库为umi-reuest
-- [具体使用参照](https://www.npmjs.com/package/umi-request)
-
-##### 缓存
-- 使用utils/storage
-- [具体使用参照](https://react-native-async-storage.github.io/async-storage/docs/usage)
-
-
-##### 适配
-- 使用的react-native-size-matters
-- [具体使用参照](https://www.npmjs.com/package/react-native-size-matters)
-
+## :space_invader: React Native Template TypeScript
+
+English | [简体中文](./README_zh-CN.md)
+
+## :arrow_forward: 用法
+```sh
+npx react-native init ProjectName --template tsrntemp
+```
+
+#### React Native <=> Template Version
+
+| React Native | Template |
+| ------------ | -------- |
+| 0.72         | 1.2.\*   |
+| 0.71         | 1.1.\*   |
+| 0.67         | 1.0.\*   |
+
+`The default of this project is TS building, integrated routing, caching, request tool and icon tool`
+
+- 文件目录
+ - src
+  - src/assets`Static resource folder`
+  - src/components`Public component folder`
+  - src/config`Configuration folder`
+  - src/iconfont`Icon font folder`
+  - src/pages`All of the page folders`
+  - src/route`Route the page folder`
+  - src/types`Type statement folder`
+  - src/utils`Tool Class Folders`
+
+### react-navigation
+- [Use reference](https://reactnavigation.org/docs/getting-started)
+
+##### icont
+- The configuration file for the icon is the iconfont.json file located in the root directory
+- [Use reference](https://www.npmjs.com/package/react-native-iconfont-cli)
+
+
+##### requset
+- The request library used is `umi-reuest`
+- [Use reference](https://www.npmjs.com/package/umi-request)
+
+##### storage
+- The cache library used is `react-native-mmkv` and is a library that returns data directly, unlike the promise that `async-storage` is returned
+- [Use reference](https://github.com/mrousavy/react-native-mmkv/blob/master/README.md)
+
+
+##### size-matters
+- Size adaptation
+- [Use reference](https://www.npmjs.com/package/react-native-size-matters)
+

package/package.json

@@ -1,34 +1,34 @@
-{
-  "name": "tsrntemp",
-  "version": "1.1.5",
-  "description": "Clean and minimalist React Native template for a quick start with TypeScript.",
-  "scripts": {
-    "test": "exit 0"
-  },
-  "files": [
-    "template",
-    "template.config.js"
-  ],
-  "keywords": [
-    "react-native",
-    "typescript",
-    "jest",
-    "template",
-    "boilerplate"
-  ],
-  "author": {
-    "name": "wangzelin",
-    "url": "https://juejin.cn/user/465848662767367?utm_source=gold_browser_extension"
-  },
-  "contributors": [
-    {
-      "name": "wangzelin",
-      "url": "https://juejin.cn/user/465848662767367?utm_source=gold_browser_extension"
-    }
-  ],
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/wanngzelin/RNTemplate/issues"
-  },
-  "homepage": "https://github.com/wanngzelin/RNTemplate#readme"
+{
+  "name": "tsrntemp",
+  "version": "1.2.0",
+  "description": "Clean and minimalist React Native template for a quick start with TypeScript.",
+  "scripts": {
+    "test": "exit 0"
+  },
+  "files": [
+    "template",
+    "template.config.js"
+  ],
+  "keywords": [
+    "react-native",
+    "typescript",
+    "jest",
+    "template",
+    "boilerplate"
+  ],
+  "author": {
+    "name": "wangzelin",
+    "url": "https://juejin.cn/user/465848662767367?utm_source=gold_browser_extension"
+  },
+  "contributors": [
+    {
+      "name": "wangzelin",
+      "url": "https://juejin.cn/user/465848662767367?utm_source=gold_browser_extension"
+    }
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/wanngzelin/RNTemplate/issues"
+  },
+  "homepage": "https://github.com/wanngzelin/RNTemplate#readme"
 }

package/template/.eslintrc.js

@@ -1,4 +1,4 @@
 module.exports = {
   root: true,
-  extends: '@react-native-community',
+  extends: '@react-native',
 };

package/template/.prettierrc.js

@@ -1,15 +1,7 @@
-
-module.exports = {
-  "tabWidth": 1,                   //一个tab代表几个空格数，默认为80
-  "useTabs": false,                //是否使用tab进行缩进，默认为false，表示用空格进行缩减
-  "singleQuote": true,             // //字符串是否使用单引号，默认为false，使用双引号
-  "printWidth": 120,               // 换行字符串阈值
-  "semi": true,                    // 句末加分号,默认为true
-  "trailingComma": 'none',         //是否使用尾逗号，有三个可选值"<none|es5|all>"
-  "bracketSpacing": true,          //对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
-  "jsxBracketSameLine": false,     // jsx > 是否另起一行
-  "arrowParens": 'avoid',          // (x) => {} 是否要有小括号
-  "requirePragma": false,          // 是否要注释来决定是否格式化代码
-  "proseWrap": 'preserve',         // 是否要换行
-  "parser": "babylon"              //代码的解析引擎，默认为babylon，与babel相同。
-}
+module.exports = {
+  arrowParens: 'avoid',
+  bracketSameLine: true,
+  bracketSpacing: false,
+  singleQuote: true,
+  trailingComma: 'all',
+};

package/template/.watchmanconfig

@@ -1 +1 @@
-{}
+{}

package/template/App.tsx

@@ -4,15 +4,12 @@
  *
  * @format
  */
-
+import 'react-native-gesture-handler';
 import React from 'react';
-import RouterContainer from 'route/RouteContainer';
-
+import RouterContainer from '@/route/RouterContainer';
 
-function App(): JSX.Element {
-  return (
-    <RouterContainer />
-  );
-}
+const App: React.FC = () => {
+  return <RouterContainer />;
+};
 
 export default App;

package/template/Gemfile

@@ -1,6 +1,9 @@
-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'
+source 'https://rubygems.org'
+
+# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
+ruby ">= 2.6.10"
+
+# Cocoapods 1.15 introduced a bug which break the build. We will remove the upper
+# bound in the template on Cocoapods with next React Native release.
+gem 'cocoapods', '>= 1.13', '< 1.15'
+gem 'activesupport', '>= 6.1.7.3', '< 7.1.0'

package/template/README.md

@@ -0,0 +1,51 @@
+## :space_invader: React Native Template TypeScript
+
+English | [简体中文](./README_zh-CN.md)
+
+## :arrow_forward: 用法
+```sh
+npx react-native init ProjectName --template tsrntemp
+```
+
+#### React Native <=> Template Version
+
+| React Native | Template |
+| ------------ | -------- |
+| 0.72         | 1.2.\*   |
+| 0.71         | 1.1.\*   |
+| 0.67         | 1.0.\*   |
+
+`The default of this project is TS building, integrated routing, caching, request tool and icon tool`
+
+- 文件目录
+ - src
+  - src/assets`Static resource folder`
+  - src/components`Public component folder`
+  - src/config`Configuration folder`
+  - src/iconfont`Icon font folder`
+  - src/pages`All of the page folders`
+  - src/route`Route the page folder`
+  - src/types`Type statement folder`
+  - src/utils`Tool Class Folders`
+
+### react-navigation
+- [Use reference](https://reactnavigation.org/docs/getting-started)
+
+##### icont
+- The configuration file for the icon is the iconfont.json file located in the root directory
+- [Use reference](https://www.npmjs.com/package/react-native-iconfont-cli)
+
+
+##### requset
+- The request library used is `umi-reuest`
+- [Use reference](https://www.npmjs.com/package/umi-request)
+
+##### storage
+- The cache library used is `react-native-mmkv` and is a library that returns data directly, unlike the promise that `async-storage` is returned
+- [Use reference](https://github.com/mrousavy/react-native-mmkv/blob/master/README.md)
+
+
+##### size-matters
+- Size adaptation
+- [Use reference](https://www.npmjs.com/package/react-native-size-matters)
+

package/template/README_zh-CN.md

@@ -0,0 +1,51 @@
+## :space_invader: React Native Template TypeScript
+
+[English](./README.md) | 简体中文
+
+## :arrow_forward: 用法
+```sh
+npx react-native init ProjectName --template tsrntemp
+```
+
+#### React Native <=> Template Version
+
+| React Native | Template |
+| ------------ | -------- |
+| 0.72         | 1.2.\*   |
+| 0.71         | 1.1.\*   |
+| 0.67         | 1.0.\*   |
+
+`本项目默认为TS搭建，集成路由，缓存，请求工具、icon工具`
+
+- 文件目录
+ - src
+  - src/assets`静态资源文件夹`
+  - src/components`公用组件文件夹`
+  - src/config`配置文件夹`
+  - src/iconfont`图标字体文件夹`
+  - src/pages`所有页面文件夹`
+  - src/route`路由页面文件夹`
+  - src/types`类型申明文件夹`
+  - src/utils`工具类文件夹`
+
+### react-navigation
+- [具体使用参照](https://reactnavigation.org/docs/getting-started)
+
+##### icont使用
+- icon的配置文件是`根目录下的 iconfont.json`
+- [具体使用参照](https://www.npmjs.com/package/react-native-iconfont-cli)
+
+
+##### requset
+- 使用的请求库为umi-reuest
+- [具体使用参照](https://www.npmjs.com/package/umi-request)
+
+##### 缓存
+- 使用的缓存为`react-native-mmkv`，直接返回数据，而不是`async-storage`库，返回的promise
+- [具体使用参照](https://github.com/mrousavy/react-native-mmkv/blob/master/README.md)
+
+
+##### 适配
+- 使用的react-native-size-matters
+- [具体使用参照](https://www.npmjs.com/package/react-native-size-matters)
+

package/template/__tests__/{App-test.tsx → App.test.tsx}

@@ -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';
 

package/template/android/app/build.gradle

@@ -1,8 +1,6 @@
 apply plugin: "com.android.application"
 apply plugin: "com.facebook.react"
 
-import com.android.build.OutputFile
-
 /**
  * This is the configuration block to customize your React Native Android app.
  * By default you don't need to apply any configuration, just uncomment the lines you need.
@@ -13,8 +11,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")
 
@@ -52,14 +50,6 @@ react {
     // hermesFlags = ["-O", "-output-source-map"]
 }
 
-/**
- * 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.
  */
@@ -78,16 +68,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
 
@@ -101,15 +81,6 @@ android {
         versionCode 1
         versionName "1.0"
     }
-
-    splits {
-        abi {
-            reset()
-            enable enableSeparateBuildPerCPUArchitecture
-            universalApk false  // If true, also generate a universal APK
-            include (*reactNativeArchitectures())
-        }
-    }
     signingConfigs {
         debug {
             storeFile file('debug.keystore')
@@ -130,30 +101,12 @@ 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}")
     debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
         exclude group:'com.squareup.okhttp3', module:'okhttp'

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

@@ -1,35 +1,39 @@
-package com.template;
-
-import com.facebook.react.ReactActivity;
-import com.facebook.react.ReactActivityDelegate;
-import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
-import com.facebook.react.defaults.DefaultReactActivityDelegate;
-
-public class MainActivity extends ReactActivity {
-
-  /**
-   * Returns the name of the main component registered from JavaScript. This is used to schedule
-   * rendering of the component.
-   */
-  @Override
-  protected String getMainComponentName() {
-    return "template";
-  }
-
-  /**
-   * Returns the instance of the {@link ReactActivityDelegate}. Here we use a util class {@link
-   * DefaultReactActivityDelegate} which allows you to easily enable Fabric and Concurrent React
-   * (aka React 18) with two boolean flags.
-   */
-  @Override
-  protected ReactActivityDelegate createReactActivityDelegate() {
-    return new DefaultReactActivityDelegate(
-        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
-        );
-  }
-}
+package com.template;
+
+import com.facebook.react.ReactActivity;
+import com.facebook.react.ReactActivityDelegate;
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
+import com.facebook.react.defaults.DefaultReactActivityDelegate;
+
+import android.os.Bundle;
+
+public class MainActivity extends ReactActivity {
+
+  /**
+   * Returns the name of the main component registered from JavaScript. This is used to schedule
+   * rendering of the component.
+   */
+  @Override
+  protected String getMainComponentName() {
+    return "template";
+  }
+
+  /**
+   * Returns the instance of the {@link ReactActivityDelegate}. Here we use a util class {@link
+   * DefaultReactActivityDelegate} which allows you to easily enable Fabric and Concurrent React
+   * (aka React 18) with two boolean flags.
+   */
+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new DefaultReactActivityDelegate(
+        this,
+        getMainComponentName(),
+        // If you opted-in for the New Architecture, we enable the Fabric Renderer.
+        DefaultNewArchitectureEntryPoint.getFabricEnabled());
+  }
+
+  @Override
+  protected void onCreate(Bundle savedInstanceState) {
+    super.onCreate(null);
+  }
+}

package/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">
 
     <selector>
-        <!-- 
+        <!--
           This file is a copy of abc_edit_text_material (https://bit.ly/3k8fX7I).
           The item below with state_pressed="false" and state_focused="false" causes a NullPointerException.
           NullPointerException:tempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)'

package/template/android/build.gradle

@@ -15,7 +15,7 @@ buildscript {
         mavenCentral()
     }
     dependencies {
-        classpath("com.android.tools.build:gradle:7.3.1")
+        classpath("com.android.tools.build:gradle")
         classpath("com.facebook.react:react-native-gradle-plugin")
     }
 }

package/template/android/gradle/wrapper/gradle-wrapper.properties

@@ -1,5 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-7.5.1-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.0.1-all.zip
+networkTimeout=10000
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

package/template/android/gradle.properties

@@ -25,7 +25,7 @@ android.useAndroidX=true
 android.enableJetifier=true
 
 # Version of flipper SDK to use with React Native
-FLIPPER_VERSION=0.125.0
+FLIPPER_VERSION=0.182.0
 
 # Use this property to specify which architecture you want to build.
 # You can also override it from the CLI using