Merge pull request #97 from kanzitelli/rnuilib-6.20-dark-mode

RN UI Lib v6.20 :: Dark mode issue

README.md

@@ -202,7 +202,7 @@ Feel free to open an issue for suggestions.
 
 - _Large title is not shown on 2nd+ tab_. This [issue](https://github.com/software-mansion/react-native-screens/issues/649) exists. So you can find the patch file for fixing that in `patches/react-native+0.69.5.patch`. It will be autorun when you do `yarn add/remove/etc`.
 - _Issue after renaming on Android_. This happens when you [rename](#rename) the app using `yarn rename` script. Check [Rename](#rename) section for possible solution.
-- _Broken Dark mode_. This happens if `appearance` is system and the app's appearance is toggled. This is connected to RNUILib's View component and this [issue](https://github.com/wix/react-native-ui-lib/issues/2127) particularly.
+- _Broken Dark mode_. This happens if `appearance` is system and the app's appearance is toggled. This is connected to RNUILib's View component and this [issue](https://github.com/wix/react-native-ui-lib/issues/2127) particularly. `UPD`: Possible solution is to use the patch file (under `patches` folder) that will be automatically applied in this starter. More detailed info will be posted soon.
 
 ## Worth checking
 

package.json

@@ -43,7 +43,7 @@
     "react-native-navigation-hooks": "^6.3.0",
     "react-native-reanimated": "^2.10.0",
     "react-native-restart": "^0.0.24",
-    "react-native-ui-lib": "^6.20.2",
+    "react-native-ui-lib": "^6.20.3",
     "react-native-vector-icons": "^9.2.0",
     "rn-bounceable": "^1.2.0",
     "rnn-screens": "^0.3.1"

patches/react-native-ui-lib+6.20.3.patch

@@ -0,0 +1,16 @@
+diff --git a/node_modules/react-native-ui-lib/src/hooks/useThemeProps/index.js b/node_modules/react-native-ui-lib/src/hooks/useThemeProps/index.js
+index fdcba11..0b28fdf 100644
+--- a/node_modules/react-native-ui-lib/src/hooks/useThemeProps/index.js
++++ b/node_modules/react-native-ui-lib/src/hooks/useThemeProps/index.js
+@@ -1,9 +1,11 @@
+ import { useContext, createContext } from 'react';
++import { useColorScheme } from 'react-native';
+ import * as Modifiers from "../../commons/modifiers";
+ import { ThemeManager } from "../../style";
+ const EmptyContext = createContext({});
+
+ const useThemeProps = (props, componentName) => {
++  useColorScheme();
+   const themeContext = ThemeManager.getThemeContext();
+   const context = useContext(themeContext ?? EmptyContext);
+   return Modifiers.getThemeProps(props, context, componentName);

yarn.lock

@@ -8852,10 +8852,10 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/react-native-text-size/-/react-native-text-size-4.0.0-rc.1.tgz#1e048d345dd6a5a8e1269e0585c1a5948c478da5"
   integrity sha512-CysqjU2jK6Yc+a+kEI222pUyTY2ywcU2HqbFqf1KHymW6OPTdvBBHqbEJKL0QiLhQaFYDbqicM+h990s9TP00g==
 
-react-native-ui-lib@^6.20.2:
-  version "6.20.2"
-  resolved "https://registry.yarnpkg.com/react-native-ui-lib/-/react-native-ui-lib-6.20.2.tgz#c5204b8420b1ee021cfc2d7bc024a6283de4308f"
-  integrity sha512-fw6gYdGNhm8vKI1E6NDtp6zlkJAYyLc6euVb+EKJrlXuoIidxzo/Mko88RAbGVP1nCUbw3dewA3H4ssML1wpdw==
+react-native-ui-lib@^6.20.3:
+  version "6.20.3"
+  resolved "https://registry.yarnpkg.com/react-native-ui-lib/-/react-native-ui-lib-6.20.3.tgz#71f139cc5d308775e58fd578e311b9d1887cc3f4"
+  integrity sha512-5C4SCCvnrktkjMr0uolhoR9gZjfVBwSlPUFR5tVUVwGitV6wRUURFyhpU6/SG4Wt+Mw07zcxkSkpOqOofZ6P7w==
   dependencies:
     babel-plugin-transform-inline-environment-variables "^0.0.2"
     color "^3.1.0"