update packages, themeing

.eslintrc.js

@@ -219,6 +219,9 @@ module.exports = {
     }],
     '@typescript-eslint/no-unnecessary-type-arguments': 0,
     '@typescript-eslint/no-namespace': 0,
+     '@typescript-eslint/no-misused-promises': [2, {
+      'checksVoidReturn': false
+    }],
     '@typescript-eslint/no-confusing-void-expression': 2,
     '@typescript-eslint/no-unsafe-assignment': 0,
     'no-restricted-imports': [

App.tsx

@@ -4,7 +4,7 @@ import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 import { NavigationProvider } from '@app/navigation/NavigationProvider';
 import { StoreProvider } from '@app/core/store/StoreProvider';
-import { ToastInstance } from '@app/components';
+import { ToastInstance } from '@app/components/ToastInstance/ToastInstance';
 
 
 export const App: VFC = () => {

package.json

@@ -64,23 +64,25 @@
     "postinstall-postinstall": "^2.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-hook-form": "^7.28.0",
+    "react-hook-form": "^7.45.4",
     "react-native": "0.72.4",
     "react-native-dotenv": "^3.3.1",
-    "react-native-paper": "^4.11.2",
+    "react-native-paper": "^5.10.3",
     "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "~3.22.0",
     "react-native-toast-message": "^2.1.5",
     "react-native-web": "~0.19.6",
     "react-query": "^3.39.3",
     "react-redux": "^7.2.6",
     "redux": "^4.2.1",
-    "redux-persist": "^6.0.0"
+    "redux-persist": "^6.0.0",
+    "zod": "^3.22.2"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@react-native-community/eslint-config": "^3.2.0",
     "@testing-library/jest-native": "^4.0.5",
+    "@testing-library/react-native": "^12.2.2",
     "@types/jest": "^27.4.0",
     "@types/lodash": "^4.14.178",
     "@types/luxon": "^2.3.2",

src/components/SafeScreen/SafeScreen.tsx

@@ -1,22 +1,29 @@
-import { FC } from 'react';
+import { FC, useMemo } from 'react';
 import {
   StyleProp, StyleSheet, ViewStyle, Platform
 } from 'react-native';
 import {
   Edge, SafeAreaView
 } from 'react-native-safe-area-context';
+import { useTheme } from '@react-navigation/native';
 
 import { styles } from './styles';
 
 
 type Props = {
   style?: StyleProp<ViewStyle>
-  edges?: readonly Edge[]
+  omittedEdges?: readonly Edge[]
 }
 
-export const SafeScreen: FC<Props> = ({ style, children, edges = undefined }) => {
+const defaultEdges: readonly Edge[] = ['top', 'right', 'bottom', 'left'];
+
+export const SafeScreen: FC<Props> = ({ style, children, omittedEdges = undefined }) => {
+  const { colors } = useTheme();
   const composed = StyleSheet.compose(
-    styles.container,
+    {
+      ...styles.container,
+      backgroundColor: colors.background,
+    },
     style
   );
 
@@ -26,6 +33,12 @@ export const SafeScreen: FC<Props> = ({ style, children, edges = undefined }) =>
     },
   });
 
+  const edges = useMemo(() => (
+    omittedEdges ?
+      defaultEdges.filter((edge) => !omittedEdges.includes(edge)) :
+      defaultEdges
+  ), [omittedEdges]);
+
   return (
     <SafeAreaView
       style={ [composed, osStyles] }

src/components/SafeScreen/styles.ts

@@ -2,15 +2,11 @@ import {
   StyleSheet, ViewStyle
 } from 'react-native';
 
-import { Colors } from '@styles/index';
-
-
 export const styles = StyleSheet.create<{
   container: ViewStyle
 }>({
   container: {
     flex: 1,
-    backgroundColor: Colors.WHITE,
     paddingHorizontal: 24,
   },
 });

src/components/ThemedText/ThemedText.tsx

@@ -0,0 +1,20 @@
+import { FC } from 'react';
+import { Text, TextProps } from 'react-native';
+import { useTheme } from '@react-navigation/native';
+
+
+export const ThemedText: FC<TextProps> = ({ children, ...rest }) => {
+  const { colors } = useTheme();
+
+  return (
+    <Text
+      { ...rest }
+      style={{
+        color: colors.text,
+      }}
+    >
+      {children}
+    </Text>
+  );
+};
+

src/components/ToastInstance/ToastInstance.tsx

@@ -1,13 +1,14 @@
 import { VFC } from 'react';
 import {
-  useWindowDimensions, View, Text
+  useWindowDimensions, View
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Toast, {
   ToastConfig, ToastConfigParams
 } from 'react-native-toast-message';
 import { Feather } from '@expo/vector-icons';
 
+import { ThemedText } from '@components/index';
 import { Colors } from '@app/styles';
 
 
@@ -52,13 +53,13 @@ const StyledToast: VFC<{
           marginRight: 5,
         }}
       />
-      <Text
+      <ThemedText
         style={{
           color,
         }}
       >
         {text}
-      </Text>
+      </ThemedText>
     </View>
   );
 };

src/components/ToastInstance/index.ts

@@ -1,3 +1 @@
-export { ToastInstance } from './ToastInstance';
 export type { ToastEnum } from './ToastInstance';
-export { ToastProvider } from './ToastProvider';

src/components/index.ts

@@ -1,2 +1,3 @@
+export * from './ThemedText/ThemedText';
 export * from './ToastInstance';
 export * from './SafeScreen/SafeScreen';

src/containers/HomeScreen/HomeScreen.tsx

@@ -1,15 +1,14 @@
 import { VFC } from 'react';
-import { Text } from 'react-native';
 
 import { TabStackScreenProp, TabRoutes } from '@navigation/index';
-import { SafeScreen } from '@app/components';
+import { SafeScreen, ThemedText } from '@app/components';
 
 
 export const HomeScreen: VFC<TabStackScreenProp<TabRoutes.HOME>> = () => {
 
   return (
-    <SafeScreen>
-      <Text>Home</Text>
+    <SafeScreen omittedEdges={ ['bottom'] }>
+      <ThemedText>Home</ThemedText>
     </SafeScreen>
   );
 };

src/containers/ProfileScreen/ProfileScreen.tsx

@@ -6,7 +6,7 @@ import { SafeScreen } from '@app/components';
 
 export const ProfileScreen: VFC<TabStackScreenProp<TabRoutes.PROFILE>> = () => {
   return (
-    <SafeScreen>
+    <SafeScreen omittedEdges={['bottom']}>
       { null }
     </SafeScreen>
   );

src/core/types/meta.ts

@@ -1,3 +1,6 @@
+import { ListRenderItem } from 'react-native';
+
+
 export enum ThunkStatus {
   IDLE = 'IDLE',
   PENDING = 'PENDING',
@@ -16,3 +19,8 @@ export type RejectWith<T> = {
   rejectValue: T
 }
 
+export type KeyExtractorOf<
+  T extends unknown[]
+> = <I extends T[number]>(item: I, i: number) => string;
+
+export type RenderItemOf<T extends unknown[]> = ListRenderItem<T[number]>;

src/navigation/NavigationProvider.tsx

@@ -1,21 +1,34 @@
 import { VFC } from 'react';
-import { NavigationContainer, useNavigationContainerRef } from '@react-navigation/native';
+import { useColorScheme } from 'react-native';
+import {
+  NavigationContainer,
+  useNavigationContainerRef,
+  DarkTheme,
+  DefaultTheme
+} from '@react-navigation/native';
+import {
+  PaperProvider, MD3LightTheme, MD3DarkTheme
+} from 'react-native-paper';
 
 import { useNavigationDevTools } from '@hooks/index';
 
 import { RootStackNavigator } from './stacks/RootStackNavigator';
 
 
 export const NavigationProvider: VFC = () => {
+  const colorScheme = useColorScheme();
 
   const navigationRef = useNavigationContainerRef();
   useNavigationDevTools()(navigationRef);
 
   return (
-    <NavigationContainer
-      ref={ navigationRef }
-    >
-      <RootStackNavigator />
-    </NavigationContainer>
+    <PaperProvider theme={ colorScheme === 'dark' ? MD3DarkTheme : MD3LightTheme }>
+      <NavigationContainer
+        theme={ colorScheme === 'dark' ? DarkTheme : DefaultTheme }
+        ref={ navigationRef }
+      >
+        <RootStackNavigator />
+      </NavigationContainer>
+    </PaperProvider>
   );
 };

yarn.lock

@@ -1982,10 +1982,10 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@callstack/react-theme-provider@^3.0.7":
-  version "3.0.7"
-  resolved "https://registry.yarnpkg.com/@callstack/react-theme-provider/-/react-theme-provider-3.0.7.tgz#b7ce1a53d63ad5e83574b831ae0af6b7c6cc40e7"
-  integrity sha512-Ab6rbD2w4u9W3yf7LQQ8evx9m8fZNsoWxt+MFm3AyZnyKQNCJf4K7ip9tHHZgSs+HTdoj38lEqPehvFOVQKvAg==
+"@callstack/react-theme-provider@^3.0.9":
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/@callstack/react-theme-provider/-/react-theme-provider-3.0.9.tgz#01035fa1231f1fffc1a806be1b55eb82716e80c1"
+  integrity sha512-tTQ0uDSCL0ypeMa8T/E9wAZRGKWj8kXP7+6RYgPTfOPs9N07C9xM8P02GJ3feETap4Ux5S69D9nteq9mEj86NA==
   dependencies:
     deepmerge "^3.2.0"
     hoist-non-react-statics "^3.3.0"
@@ -3625,6 +3625,13 @@
     ramda "^0.26.1"
     redent "^2.0.0"
 
+"@testing-library/react-native@^12.2.2":
+  version "12.2.2"
+  resolved "https://registry.yarnpkg.com/@testing-library/react-native/-/react-native-12.2.2.tgz#4b2275d5d1feb689c9b1e5cd9cb03ffe32a43228"
+  integrity sha512-aLr7YQ6pyn8PbLmdbtADG2aKcmarTLI7VhgWNVzJLxQHOtsDxLpJGKMSw10j406BE/GyGHbB0Gln3Of8/2TjnA==
+  dependencies:
+    pretty-format "^29.0.0"
+
 "@tootallnate/once@2":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf"
@@ -9850,7 +9857,7 @@ pretty-format@^27.0.0, pretty-format@^27.3.1, pretty-format@^27.5.1:
     ansi-styles "^5.0.0"
     react-is "^17.0.1"
 
-pretty-format@^29.6.3:
+pretty-format@^29.0.0, pretty-format@^29.6.3:
   version "29.6.3"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-29.6.3.tgz#d432bb4f1ca6f9463410c3fb25a0ba88e594ace7"
   integrity sha512-ZsBgjVhFAj5KeK+nHfF1305/By3lechHQSMWCTl8iHSbfOm2TN5nHEtFc/+W7fAyUeCs2n5iow72gld4gW0xDw==
@@ -10063,10 +10070,10 @@ react-freeze@^1.0.0:
   resolved "https://registry.yarnpkg.com/react-freeze/-/react-freeze-1.0.0.tgz#b21c65fe1783743007c8c9a2952b1c8879a77354"
   integrity sha512-yQaiOqDmoKqks56LN9MTgY06O0qQHgV4FUrikH357DydArSZHQhl0BJFqGKIZoTqi8JizF9Dxhuk1FIZD6qCaw==
 
-react-hook-form@^7.28.0:
-  version "7.32.0"
-  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.32.0.tgz#bfe36000e3a9fa605a4e3e9a029282feb094ef6a"
-  integrity sha512-AFUwl9MwVVnZZsFZW7Egc8PVyWem6c6/9FBq29Acsikm+8ecJCkqOn2Tl48GApFnXBgoBBEHC3zosjYvPfsGNg==
+react-hook-form@^7.45.4:
+  version "7.45.4"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.45.4.tgz#73d228b704026ae95d7e5f7b207a681b173ec62a"
+  integrity sha512-HGDV1JOOBPZj10LB3+OZgfDBTn+IeEsNOKiq/cxbQAIbKaiJUe/KV8DBUzsx0Gx/7IG/orWqRRm736JwOfUSWQ==
 
 "react-is@^16.12.0 || ^17.0.0 || ^18.0.0":
   version "18.1.0"
@@ -10095,19 +10102,14 @@ react-native-dotenv@^3.3.1:
   dependencies:
     dotenv "^10.0.0"
 
-react-native-iphone-x-helper@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz#20c603e9a0e765fd6f97396638bdeb0e5a60b010"
-  integrity sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg==
-
-react-native-paper@^4.11.2:
-  version "4.12.1"
-  resolved "https://registry.yarnpkg.com/react-native-paper/-/react-native-paper-4.12.1.tgz#9c0c6236f40ab0bf02dd2d42e0264125d2f9d48a"
-  integrity sha512-xvAkwtRatsDcB/eSBUwoThBAT5Yy32SgKwrfHRUXi/9s5lR2SEuPZwmsZyAaq+bsxtAH1CaIT4CDeVLSaArzyg==
+react-native-paper@^5.10.3:
+  version "5.10.3"
+  resolved "https://registry.yarnpkg.com/react-native-paper/-/react-native-paper-5.10.3.tgz#75f5dafc71e0f0072877fcb24aa877bd1ec7d22b"
+  integrity sha512-UXT+cOnycpepAhE1t7E4PqFk5mSLtCA5BSQkt6xGi7XJxnpBF3v4orcHwG/OQEOWx7TpWKGPCjhDewnZodOl5Q==
   dependencies:
-    "@callstack/react-theme-provider" "^3.0.7"
+    "@callstack/react-theme-provider" "^3.0.9"
     color "^3.1.2"
-    react-native-iphone-x-helper "^1.3.1"
+    use-latest-callback "^0.1.5"
 
 react-native-safe-area-context@4.6.3:
   version "4.6.3"
@@ -12262,3 +12264,8 @@ yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+zod@^3.22.2:
+  version "3.22.2"
+  resolved "https://registry.yarnpkg.com/zod/-/zod-3.22.2.tgz#3add8c682b7077c05ac6f979fea6998b573e157b"
+  integrity sha512-wvWkphh5WQsJbVk1tbx1l1Ly4yg+XecD+Mq280uBGt9wa5BKSWf4Mhp6GmrkPixhMxmabYY7RbzlwVP32pbGCg==