更新 React native 到 v0.72.3

.gitignore

@@ -63,3 +63,6 @@ buck-out/
 # Ruby / CocoaPods
 /ios/Pods/
 /vendor/bundle/
+
+# testing
+/coverage

.ruby-version

@@ -1 +0,0 @@
-2.7.6

Gemfile

@@ -1,6 +1,6 @@
 source 'https://rubygems.org'
 
 # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
-ruby '>= 2.6.10'
+ruby ">= 2.6.10"
 
-gem 'cocoapods', '>= 1.11.3'
+gem 'cocoapods', '~> 1.12'

_node-version

@@ -1 +0,0 @@
-18

android/app/build.gradle

@@ -15,8 +15,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")
 
@@ -189,8 +189,6 @@ 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'

android/app/src/main/java/cn/toside/music/mobile/MainActivity.java

@@ -1,47 +1,13 @@
 package cn.toside.music.mobile;
 
-import com.facebook.react.ReactRootView;
 import com.reactnativenavigation.NavigationActivity;
 import com.facebook.react.ReactActivityDelegate;
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
 import com.facebook.react.defaults.DefaultReactActivityDelegate;
 
 public class MainActivity extends NavigationActivity {
 
-  public static class MainActivityDelegate extends ReactActivityDelegate {
-    public MainActivityDelegate(NavigationActivity activity, String mainComponentName) {
-      super(activity, mainComponentName);
-    }
 
-    @Override
-    protected ReactRootView createRootView() {
-      ReactRootView reactRootView = new ReactRootView(getContext());
-      // If you opted-in for the New Architecture, we enable the Fabric Renderer.
-      reactRootView.setIsFabric(BuildConfig.IS_NEW_ARCHITECTURE_ENABLED);
-      return reactRootView;
-    }
 
-    @Override
-    protected boolean isConcurrentRootEnabled() {
-      // If you opted-in for the New Architecture, we enable Concurrent Root (i.e. React 18).
-      // More on this on https://reactjs.org/blog/2022/03/29/react-v18.html
-      return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED;
-    }
-  }
 
-  /**
-   * 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
-  //       );
-  // }
 }

android/app/src/main/java/cn/toside/music/mobile/MainApplication.java

@@ -7,6 +7,7 @@ import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
 import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
 import com.facebook.react.defaults.DefaultReactNativeHost;
+import com.reactnativenavigation.react.NavigationReactNativeHost;
 import com.facebook.soloader.SoLoader;
 import java.util.List;
 
@@ -19,7 +20,7 @@ import cn.toside.music.mobile.utils.UtilsPackage;
 public class MainApplication extends NavigationApplication {
 
   private final ReactNativeHost mReactNativeHost =
-      new DefaultReactNativeHost(this) {
+      new NavigationReactNativeHost(this) {
         @Override
         public boolean getUseDeveloperSupport() {
           return BuildConfig.DEBUG;

android/build.gradle

@@ -7,7 +7,7 @@ buildscript {
         compileSdkVersion = 33
         targetSdkVersion = 29
 
-        kotlinVersion = "1.6.10" // Or any version above 1.3.x
+        kotlinVersion = "1.8.10" // Or any version above 1.3.x
         RNNKotlinVersion = kotlinVersion
 
         // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP.
@@ -18,7 +18,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")
         classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion")
     }

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
@@ -51,9 +51,9 @@ hermesEnabled=true
 # AsyncStorage_dedicatedExecutor = true
 # https://react-native-async-storage.github.io/async-storage/docs/advanced/next
 AsyncStorage_useNextStorage=true
-AsyncStorage_kotlinVersion=1.6.10
+AsyncStorage_kotlinVersion=1.8.10
 # https://developer.android.com/jetpack/androidx/releases/room
-AsyncStorage_next_roomVersion=2.4.2
+AsyncStorage_next_roomVersion=2.4.3
 
 # https://github.com/wix/react-native-navigation/issues/7403
 # android.jetifier.blacklist = bcprov-jdk15on

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

android/gradlew

@@ -55,7 +55,7 @@
 #       Darwin, MinGW, and NonStop.
 #
 #   (3) This script is generated from the Groovy template
-#       https://github.com/gradle/gradle/blob/master/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
+#       https://github.com/gradle/gradle/blob/HEAD/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
 #       within the Gradle project.
 #
 #       You can find Gradle at https://github.com/gradle/gradle/.
@@ -80,10 +80,10 @@ do
     esac
 done
 
-APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit
-
-APP_NAME="Gradle"
+# This is normally unused
+# shellcheck disable=SC2034
 APP_BASE_NAME=${0##*/}
+APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit
 
 # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
 DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
@@ -143,12 +143,16 @@ fi
 if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
     case $MAX_FD in #(
       max*)
+        # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC3045
         MAX_FD=$( ulimit -H -n ) ||
             warn "Could not query maximum file descriptor limit"
     esac
     case $MAX_FD in  #(
       '' | soft) :;; #(
       *)
+        # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC3045
         ulimit -n "$MAX_FD" ||
             warn "Could not set maximum file descriptor limit to $MAX_FD"
     esac
@@ -205,6 +209,12 @@ set -- \
         org.gradle.wrapper.GradleWrapperMain \
         "$@"
 
+# Stop when "xargs" is not available.
+if ! command -v xargs >/dev/null 2>&1
+then
+    die "xargs is not available"
+fi
+
 # Use "xargs" to parse quoted args.
 #
 # With -n1 it outputs one arg per line, with the quotes and backslashes removed.

android/gradlew.bat

@@ -14,7 +14,7 @@
 @rem limitations under the License.
 @rem
 
-@if "%DEBUG%" == "" @echo off
+@if "%DEBUG%"=="" @echo off
 @rem ##########################################################################
 @rem
 @rem  Gradle startup script for Windows
@@ -25,7 +25,8 @@
 if "%OS%"=="Windows_NT" setlocal
 
 set DIRNAME=%~dp0
-if "%DIRNAME%" == "" set DIRNAME=.
+if "%DIRNAME%"=="" set DIRNAME=.
+@rem This is normally unused
 set APP_BASE_NAME=%~n0
 set APP_HOME=%DIRNAME%
 
@@ -40,7 +41,7 @@ if defined JAVA_HOME goto findJavaFromJavaHome
 
 set JAVA_EXE=java.exe
 %JAVA_EXE% -version >NUL 2>&1
-if "%ERRORLEVEL%" == "0" goto execute
+if %ERRORLEVEL% equ 0 goto execute
 
 echo.
 echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
@@ -75,13 +76,15 @@ set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
 
 :end
 @rem End local scope for the variables with windows NT shell
-if "%ERRORLEVEL%"=="0" goto mainEnd
+if %ERRORLEVEL% equ 0 goto mainEnd
 
 :fail
 rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
 rem the _cmd.exe /c_ return code!
-if  not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
-exit /b 1
+set EXIT_CODE=%ERRORLEVEL%
+if %EXIT_CODE% equ 0 set EXIT_CODE=1
+if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
+exit /b %EXIT_CODE%
 
 :mainEnd
 if "%OS%"=="Windows_NT" endlocal

android/settings.gradle

@@ -1,4 +1,4 @@
 rootProject.name = 'cn.toside.music.mobile'
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
 include ':app'
-includeBuild('../node_modules/react-native-gradle-plugin')
+includeBuild('../node_modules/@react-native/gradle-plugin')

ios/LxMusicMobile/AppDelegate.mm

@@ -7,12 +7,13 @@
 
 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 {
-  self.moduleName = @"LxMusicMobile";
+  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
+  [ReactNativeNavigation bootstrapWithBridge:bridge];
   // You can add your custom initial props in the dictionary below.
   // They will be passed down to the ViewController used by React Native.
   self.initialProps = @{};
 
-  return [super application:application didFinishLaunchingWithOptions:launchOptions];
+  return YES;
 }
 
 - (NSArray<id<RCTBridgeModule>> *)extraModulesForBridge:(RCTBridge *)bridge {
@@ -28,14 +29,4 @@
 #endif
 }
 
-/// This method controls whether the `concurrentRoot`feature of React18 is turned on or off.
-///
-/// @see: https://reactjs.org/blog/2022/03/29/react-v18.html
-/// @note: This requires to be rendering on Fabric (i.e. on the New Architecture).
-/// @return: `true` if the `concurrentRoot` feature is enabled. Otherwise, it returns `false`.
-- (BOOL)concurrentRootEnabled
-{
-  return true;
-}
-
 @end

ios/Podfile

@@ -1,5 +1,9 @@
-require_relative '../node_modules/react-native/scripts/react_native_pods'
-require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
+# Resolve react_native_pods.rb with node to allow for hoisting
+require Pod::Executable.execute_command('node', ['-p',
+  'require.resolve(
+    "react-native/scripts/react_native_pods.rb",
+    {paths: [process.argv[1]]},
+  )', __dir__]).strip
 
 platform :ios, min_ios_version_supported
 prepare_react_native_project!
@@ -30,8 +34,6 @@ target 'LxMusicMobile' do
   use_react_native!(
     :path => config[:reactNativePath],
     # Hermes is now enabled by default. Disable by setting this flag to false.
-    # Upcoming versions of React Native may rely on get_default_flags(), but
-    # we make it explicit here to aid in the React Native upgrade process.
     :hermes_enabled => flags[:hermes_enabled],
     :fabric_enabled => flags[:fabric_enabled],
     # Enables Flipper.
@@ -49,10 +51,10 @@ target 'LxMusicMobile' do
   end
 
   post_install do |installer|
+    # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202
     react_native_post_install(
       installer,
-      # Set `mac_catalyst_enabled` to `true` in order to apply patches
-      # necessary for Mac Catalyst builds
+      config[:reactNativePath],
       :mac_catalyst_enabled => false
     )
     __apply_Xcode_12_5_M1_post_install_workaround(installer)

metro.config.js

@@ -1,19 +1,12 @@
-/**
- * Metro configuration for React Native
- * https://github.com/facebook/react-native
- *
- * @format
- */
+const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config')
 
-module.exports = {
-  transformer: {
-    getTransformOptions: async() => ({
-      transform: {
-        experimentalImportSupport: false,
-        inlineRequires: true,
-      },
-    }),
-  },
+/**
+ * Metro configuration
+ * https://facebook.github.io/metro/docs/configuration
+ *
+ * @type {import('metro-config').MetroConfig}
+ */
+const config = {
   resolver: {
     extraNodeModules: {
       // crypto: require.resolve('react-native-quick-crypto'),
@@ -22,3 +15,5 @@ module.exports = {
     },
   },
 }
+
+module.exports = mergeConfig(getDefaultConfig(__dirname), config)

package.json

@@ -45,17 +45,16 @@
     "@craftzdog/react-native-buffer": "^6.0.5",
     "@react-native-async-storage/async-storage": "^1.19.1",
     "@react-native-clipboard/clipboard": "^1.11.2",
-    "@react-native-community/checkbox": "^0.5.16",
     "@react-native-community/slider": "^4.4.2",
     "iconv-lite": "^0.6.3",
     "lrc-file-parser": "^2.4.1",
     "pako": "^2.1.0",
     "react": "18.2.0",
-    "react-native": "0.71.12",
+    "react-native": "0.72.3",
     "react-native-background-timer": "github:lyswhut/react-native-background-timer#88b1d05b2dcdc5af72bf365bf7ff00eec114d428",
     "react-native-exception-handler": "^2.10.10",
     "react-native-fs": "^2.20.0",
-    "react-native-navigation": "^7.35.0",
+    "react-native-navigation": "^7.36.0-rc.1",
     "react-native-pager-view": "^6.2.0",
     "react-native-quick-base64": "^2.0.7",
     "react-native-quick-md5": "^3.0.5",
@@ -67,8 +66,9 @@
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
     "@babel/preset-env": "^7.22.9",
     "@babel/runtime": "^7.22.6",
+    "@react-native/metro-config": "^0.72.9",
     "@tsconfig/react-native": "^3.0.2",
-    "@types/react": "^18.2.17",
+    "@types/react": "^18.2.18",
     "@types/react-native": "^0.70.14",
     "@types/react-native-background-timer": "^2.0.0",
     "@types/react-native-vector-icons": "^6.4.13",
@@ -77,7 +77,7 @@
     "eslint-config-standard-with-typescript": "^37.0.0",
     "eslint-plugin-react": "^7.33.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "metro-react-native-babel-preset": "0.73.10",
+    "metro-react-native-babel-preset": "0.76.7",
     "typescript": "^5.1.6"
   }
 }

publish/changeLog.md

@@ -22,4 +22,4 @@
 
 ### 其他
 
-- 更新 React native 到 v0.71.11
+- 更新 React native 到 v0.72.3

src/components/common/CheckBox/Checkbox.tsx

@@ -0,0 +1,127 @@
+import * as React from 'react'
+import {
+  Animated,
+  type GestureResponderEvent,
+  StyleSheet,
+  View,
+  Pressable,
+} from 'react-native'
+
+import { Icon } from '../Icon'
+import { scaleSizeW } from '@/utils/pixelRatio'
+
+export interface Props {
+  /**
+   * Status of checkbox.
+   */
+  status: 'checked' | 'unchecked' | 'indeterminate'
+  /**
+   * Whether checkbox is disabled.
+   */
+  disabled?: boolean
+  /**
+   * Function to execute on press.
+   */
+  onPress?: (e: GestureResponderEvent) => void
+
+  /**
+   * Custom color for checkbox.
+   */
+  tintColors: {
+    true: string
+    false: string
+  }
+}
+
+const ANIMATION_DURATION = 200
+const WIDTH = scaleSizeW(36)
+
+/**
+ * Checkboxes allow the selection of multiple options from a set.
+ * This component follows platform guidelines for Android, but can be used
+ * on any platform.
+ */
+const Checkbox = ({
+  status,
+  disabled,
+  onPress,
+  tintColors,
+  ...rest
+}: Props) => {
+  const checked = status === 'checked'
+  const indeterminate = status === 'indeterminate'
+
+  const icon = indeterminate
+    ? 'minus-box'
+    : 'checkbox-marked'
+
+  const { current: scaleAnim } = React.useRef<Animated.Value>(
+    new Animated.Value(checked ? 1 : 0),
+  )
+
+  const isFirstRendering = React.useRef<boolean>(true)
+
+
+  React.useEffect(() => {
+    // Do not run animation on very first rendering
+    if (isFirstRendering.current) {
+      isFirstRendering.current = false
+      return
+    }
+
+    Animated.timing(scaleAnim, {
+      toValue: checked ? 1 : 0,
+      duration: ANIMATION_DURATION,
+      useNativeDriver: true,
+    }).start()
+  }, [checked, scaleAnim])
+
+
+  return (
+    <Pressable
+      {...rest}
+      onPress={onPress}
+      disabled={disabled}
+      accessibilityRole="checkbox"
+      accessibilityState={{ disabled, checked }}
+      accessibilityLiveRegion="polite"
+      style={styles.container}
+    >
+      <Icon
+        allowFontScaling={false}
+        name="checkbox-blank-outline"
+        size={24}
+        color={tintColors.false}
+      />
+      <View style={[StyleSheet.absoluteFill, styles.fillContainer]}>
+        <Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
+          <Icon
+            allowFontScaling={false}
+            name={icon}
+            size={24}
+            color={tintColors.true}
+          />
+        </Animated.View>
+      </View>
+    </Pressable>
+  )
+}
+
+Checkbox.displayName = 'Checkbox'
+
+const styles = StyleSheet.create({
+  container: {
+    width: WIDTH,
+    height: WIDTH,
+    alignItems: 'center',
+    justifyContent: 'center',
+    // backgroundColor: 'rgba(0, 0, 0, 0.2)',
+  },
+  fillContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+})
+
+export default Checkbox
+

src/components/common/CheckBox/index.tsx

@@ -1,11 +1,11 @@
 import React, { useCallback, useEffect, useState } from 'react'
 import { View, TouchableOpacity } from 'react-native'
-import CheckBox from '@react-native-community/checkbox'
+import CheckBox from './Checkbox'
 
 import { createStyle } from '@/utils/tools'
 import { scaleSizeH, scaleSizeW } from '@/utils/pixelRatio'
 import { useTheme } from '@/store/theme/hook'
-import Text from './Text'
+import Text from '../Text'
 
 export interface CheckBoxProps {
   check: boolean
@@ -55,13 +55,13 @@ export default ({ check, label, children, onChange, disabled = false, need = fal
     disabled
       ? (
           <View style={contentStyle}>
-            <CheckBox style={styles.checkbox} value={check} disabled={true} tintColors={disabledTintColors} />
+            <CheckBox status={check ? 'checked' : 'unchecked'} disabled={true} tintColors={disabledTintColors} />
             <View style={labelStyle}>{label ? <Text style={styles.name} color={theme['c-500']}>{label}</Text> : children}</View>
           </View>
         )
       : (
           <View style={contentStyle}>
-            <CheckBox value={check} disabled={isDisabled} onValueChange={onChange} tintColors={tintColors} scale={1} />
+            <CheckBox status={check ? 'checked' : 'unchecked'} disabled={isDisabled} onPress={handleLabelPress} tintColors={tintColors} />
             <TouchableOpacity style={labelStyle} activeOpacity={0.3} onPress={handleLabelPress}>
               {label ? <Text style={styles.name}>{label}</Text> : children}
             </TouchableOpacity>