add react-native-dark-mode back (#5528)

ios/Podfile.lock

@@ -696,6 +696,8 @@ PODS:
     - React-jsi (= 0.72.3)
     - React-logger (= 0.72.3)
     - React-perflogger (= 0.72.3)
+  - ReactNativeDarkMode (0.2.2):
+    - React
   - rn-fetch-blob (0.12.0):
     - React-Core
   - RNBootSplash (4.3.2):
@@ -909,6 +911,7 @@ DEPENDENCIES:
   - React-runtimescheduler (from `../node_modules/react-native/ReactCommon/react/renderer/runtimescheduler`)
   - React-utils (from `../node_modules/react-native/ReactCommon/react/utils`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - ReactNativeDarkMode (from `../node_modules/react-native-dark-mode`)
   - rn-fetch-blob (from `../node_modules/rn-fetch-blob`)
   - RNBootSplash (from `../node_modules/react-native-bootsplash`)
   - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)"
@@ -1151,6 +1154,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/react/utils"
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
+  ReactNativeDarkMode:
+    :path: "../node_modules/react-native-dark-mode"
   rn-fetch-blob:
     :path: "../node_modules/rn-fetch-blob"
   RNBootSplash:
@@ -1338,6 +1343,7 @@ SPEC CHECKSUMS:
   React-runtimescheduler: 837c1bebd2f84572db17698cd702ceaf585b0d9a
   React-utils: bcb57da67eec2711f8b353f6e3d33bd8e4b2efa3
   ReactCommon: 3ccb8fb14e6b3277e38c73b0ff5e4a1b8db017a9
+  ReactNativeDarkMode: 0178ffca3b10f6a7c9f49d6f9810232b328fa949
   rn-fetch-blob: f065bb7ab7fb48dd002629f8bdcb0336602d3cba
   RNBootSplash: 5f346163977573d6b2aeba1b25df9d2245c0d73c
   RNCAsyncStorage: ddc4ee162bfd41b0d2c68bf2d95acd81dd7f1f93

package.json

@@ -219,6 +219,7 @@
     "react-native-cloud-fs": "rainbow-me/react-native-cloud-fs#c4ed2d78a7c401f628248a4e45eaf5bf9319a31a",
     "react-native-code-push": "8.0.2",
     "react-native-crypto": "2.2.0",
+    "react-native-dark-mode": "0.2.2",
     "react-native-device-info": "5.3.1",
     "react-native-dotenv": "2.4.2",
     "react-native-exit-app": "1.1.0",

patches/react-native-dark-mode+0.2.2.patch

@@ -0,0 +1,13 @@
+diff --git a/node_modules/react-native-dark-mode/android/build.gradle b/node_modules/react-native-dark-mode/android/build.gradle
+index 11c2a43..7b13d85 100644
+--- a/node_modules/react-native-dark-mode/android/build.gradle
++++ b/node_modules/react-native-dark-mode/android/build.gradle
+@@ -20,7 +20,7 @@ buildscript {
+ }
+
+ apply plugin: 'com.android.library'
+-apply plugin: 'maven'
++// apply plugin: 'maven'
+
+ // Matches values in recent template from React Native 0.59 / 0.60
+ // https://github.com/facebook/react-native/blob/0.59-stable/template/android/build.gradle#L5-L9

src/theme/ThemeContext.tsx

@@ -1,5 +1,6 @@
 import React, { createContext, PropsWithChildren, useContext, useEffect, useMemo, useState } from 'react';
-import { Appearance, LayoutAnimation, NativeModules, useColorScheme } from 'react-native';
+import { LayoutAnimation, NativeModules, useColorScheme } from 'react-native';
+import { useDarkMode } from 'react-native-dark-mode';
 import { ThemeProvider } from 'styled-components';
 import { Colors, darkModeThemeColors, lightModeThemeColors } from '../styles/colors';
 import currentColors from './currentColors';
@@ -39,7 +40,7 @@ const { RNThemeModule } = NativeModules;
 export const MainThemeProvider = (props: PropsWithChildren<Record<string, never>>) => {
   const [colorScheme, setColorScheme] = useState<ThemesType | null>(null);
   // looks like one works on Android and another one on iOS. good.
-  const isSystemDarkModeIOS = Appearance.getColorScheme() === 'dark';
+  const isSystemDarkModeIOS = useDarkMode();
   const isSystemDarkModeAndroid = useColorScheme() === 'dark';
   const isSystemDarkMode = ios ? isSystemDarkModeIOS : isSystemDarkModeAndroid;
 
@@ -78,6 +79,7 @@ export const MainThemeProvider = (props: PropsWithChildren<Record<string, never>
       lightScheme: lightModeThemeColors,
       // Overrides the isDarkMode value will cause re-render inside the context.
       setTheme: (scheme: ThemesType) => {
+        // eslint-disable-next-line no-nested-ternary
         const schemeSystemAdjusted = scheme === Themes.SYSTEM ? (isSystemDarkMode ? 'dark' : 'light') : scheme;
         currentColors.theme = schemeSystemAdjusted;