Merge pull request #231 from AdamWier/203-upgrade-packages

203 upgrade packages
AdamWier · Oct 10, 2023 · 12eefc0 · 12eefc0
2 parents da670cb + 44977e5
commit 12eefc0
Show file tree

Hide file tree

Showing 35 changed files with 8,364 additions and 6,049 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -17,7 +17,9 @@
         "jest/no-identical-title": "error",
         "jest/prefer-to-have-length": "warn",
         "jest/valid-expect": "error",
-        "jest/no-hooks": "off"
+        "jest/no-hooks": "off",
+        "@typescript-eslint/unbound-method": "off",
+        "jest/unbound-method": "off"
     },
     "env": {
         "jest/globals": true

diff --git a/babel.config.js b/babel.config.js
@@ -2,6 +2,6 @@ module.exports = function (api) {
   api.cache(true);
   return {
     presets: ['babel-preset-expo', 'module:react-native-dotenv'],
-    plugins: ['react-native-reanimated/plugin'],
+    plugins: ['react-native-reanimated/plugin', '@babel/plugin-transform-private-methods', '@babel/plugin-transform-class-properties', '@babel/plugin-transform-private-property-in-object'],
   };
 };
diff --git a/package.json b/package.json
@@ -42,76 +42,82 @@
   },
   "dependencies": {
     "@react-hook/debounce": "^2.0.4",
-    "@react-native-community/datetimepicker": "4.0.0",
+    "@react-native-community/datetimepicker": "7.2.0",
     "@react-native-community/masked-view": "0.1.10",
-    "@react-navigation/drawer": "^5.8.1",
-    "@react-navigation/native": "^5.0.9",
-    "@react-navigation/stack": "^5.1.1",
-    "expo": "^44.0.0",
-    "expo-barcode-scanner": "~11.2.0",
+    "@react-native-picker/picker": "2.4.10",
+    "@react-navigation/drawer": "^6.6.4",
+    "@react-navigation/native": "^6.1.8",
+    "@react-navigation/stack": "^6.3.18",
+    "@rneui/base": "^4.0.0-rc.8",
+    "@rneui/themed": "^4.0.0-rc.8",
+    "expo": "^49.0.0",
+    "expo-barcode-scanner": "~12.5.3",
     "firebase": "^9.6.2",
     "moment": "^2.24.0",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
-    "react-native": "0.64.3",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-native": "0.72.5",
     "react-native-calendars": "git+https://github.com/AdamWier/react-native-calendars",
     "react-native-dotenv": "^0.2.0",
-    "react-native-elements": "^1.2.7",
-    "react-native-gesture-handler": "~2.1.0",
+    "react-native-gesture-handler": "~2.12.0",
     "react-native-modal-datetime-picker": "^8.5.4",
     "react-native-progress": "^4.1.2",
-    "react-native-reanimated": "~2.3.1",
-    "react-native-safe-area-context": "3.3.2",
-    "react-native-screens": "~3.10.1",
+    "react-native-reanimated": "~3.3.0",
+    "react-native-safe-area-context": "4.6.3",
+    "react-native-screens": "~3.22.0",
     "react-native-simple-toast": "^1.1.2",
-    "react-native-svg": "12.1.1",
-    "react-native-web": "0.17.1",
+    "react-native-svg": "13.9.0",
+    "react-native-web": "~0.19.6",
     "react-redux": "^7.2.0",
     "redux": "^4.0.5",
-    "victory-native": "^34.3.0"
+    "victory-native": "^36.6.11"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.9",
+    "@babel/core": "^7.20.0",
     "@react-native-community/eslint-config": "^1.1.0",
     "@types/firebase": "^3.2.1",
     "@types/jest": "^26.0.14",
-    "@types/react": "~17.0.21",
-    "@types/react-native": "~0.64.12",
+    "@types/react": "~18.2.14",
+    "@types/react-native": "~0.67.6",
     "@types/react-native-calendars": "^1.20.7",
     "@types/react-native-dotenv": "^0.2.0",
     "@types/react-native-elements": "^0.18.0",
     "@types/react-redux": "^7.1.7",
     "@types/react-test-renderer": "^16.9.3",
     "@types/redux": "^3.6.0",
     "@types/victory": "^33.1.4",
-    "@typescript-eslint/eslint-plugin": "^2.23.0",
-    "@typescript-eslint/parser": "^2.23.0",
+    "@typescript-eslint/eslint-plugin": "^6.7.5",
+    "@typescript-eslint/parser": "^6.7.5",
     "babel-eslint": "^10.1.0",
-    "babel-preset-expo": "9.0.1",
-    "eslint": "^6.8.0",
+    "babel-preset-expo": "^9.5.0",
+    "eslint": "^8.51.0",
     "eslint-config-airbnb": "^18.1.0",
     "eslint-config-prettier": "^6.10.1",
+    "eslint-config-universe": "^12.0.0",
     "eslint-import-resolver-typescript": "^2.0.0",
     "eslint-plugin-import": "^2.20.1",
-    "eslint-plugin-jest": "^24.1.0",
+    "eslint-plugin-jest": "^27.4.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.19.0",
     "eslint-plugin-react-hooks": "^2.5.0",
     "eslint-plugin-react-native": "^3.8.1",
     "firebase-admin": "^9.1.0",
     "husky": "^4.2.5",
-    "jest": "^26.6.3",
-    "jest-expo": "^44.0.0",
+    "jest": "^29.2.1",
+    "jest-expo": "^49.0.0",
     "jest-fetch-mock": "^3.0.3",
     "lint-staged": "^10.1.6",
-    "prettier": "^2.0.2",
+    "prettier": "^3.0.3",
     "react-test-renderer": "17",
-    "typescript": "~4.3.5"
+    "typescript": "^5.1.3"
   },
   "private": true,
   "resolutions": {
     "d3-array": "2.3.3"
   },
-  "packageManager": "yarn@3.1.1"
+  "packageManager": "yarn@3.1.1",
+  "eslintConfig": {
+    "extends": "universe/native"
+  }
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { ThemeProvider } from 'react-native-elements';
+import { ThemeProvider } from '@rneui/themed';
 import { Provider } from 'react-redux';
 import Navigation from './Navigation';
 import { theme } from './StyleSheet';
 import store from './store';
 import { LogBox } from 'react-native';
 
-function App(): JSX.Element {
+function App() {
   LogBox.ignoreLogs(['Setting a timer', 'Calling `getNode()` on the ref']);
   return (
     <Provider store={store}>

diff --git a/src/Navigation/FoodJournalStack/index.tsx b/src/Navigation/FoodJournalStack/index.tsx
@@ -3,7 +3,7 @@ import { createStackNavigator } from '@react-navigation/stack';
 import { navTheme } from '../../StyleSheet';
 import screens from './Screens';
 import { authService } from '../../Firebase';
-import { Button, Icon } from 'react-native-elements';
+import { Button, Icon } from '@rneui/themed';
 import { Alert } from 'react-native';
 import { container, UserContainerProps } from '../../store/reducers/User';
 import { DrawerNavigationProp } from '@react-navigation/drawer';
@@ -22,7 +22,7 @@ function Navigation({
     LoggedInDrawerParams,
     LoggedInDrawerScreenNames.FoodJournal
   >;
-}): JSX.Element {
+}) {
   const logout = () => {
     Alert.alert('Log out', 'Do you want to log out?', [
       { text: 'No', onPress: () => null },

diff --git a/src/Navigation/LoggedInDrawer/index.tsx b/src/Navigation/LoggedInDrawer/index.tsx
@@ -5,14 +5,14 @@ import { navTheme } from '../../StyleSheet';
 
 const Drawer = createDrawerNavigator();
 
-export default function LoggedInDrawer(): JSX.Element {
+export default function LoggedInDrawer() {
   return (
     <Drawer.Navigator
-      drawerContentOptions={{
-        style: {
+      screenOptions={{
+        drawerContentStyle: {
           backgroundColor: navTheme.colors.background,
         },
-        labelStyle: {
+        drawerLabelStyle: {
           color: navTheme.colors.text,
         },
       }}

diff --git a/src/StyleSheet.ts b/src/StyleSheet.ts
@@ -1,10 +1,6 @@
-import { Theme } from 'react-native-elements';
+import { createTheme } from '@rneui/themed';
 import { DefaultTheme } from '@react-navigation/native';
 
-export interface MyTheme extends Theme {
-  colors: { [key: string]: string };
-}
-
 const colors = {
   ...DefaultTheme.colors,
   text: '#ffffff',
@@ -22,85 +18,88 @@ export const navTheme = {
   colors,
 };
 
-export const theme: MyTheme = {
-  Text: {
-    style: {
-      color: colors.text,
-      textAlign: 'center',
+export const theme = createTheme({
+  components: {
+    Text: {
+      style: {
+        color: colors.text,
+        textAlign: 'center',
+      },
     },
-  },
-  Button: {
-    buttonStyle: {
-      backgroundColor: colors.primary,
-      borderRadius: 10,
+    Button: {
+      buttonStyle: {
+        backgroundColor: colors.primary,
+        borderRadius: 10,
+      },
+      containerStyle: {
+        margin: 10,
+        backgroundColor: colors.background,
+      },
     },
-    containerStyle: {
-      margin: 10,
-      backgroundColor: colors.background,
+    ListItemTitle: {
+      style: { textAlign: 'left' },
     },
-  },
-  ListItem: {
-    titleStyle: {
-      textAlign: 'left',
+    ListItemSubtitle: {
+      style: {
+        color: colors.text,
+        textAlign: 'left',
+      },
     },
-    subtitleStyle: {
-      color: colors.text,
-      textAlign: 'left',
+    ListItem: {
+      containerStyle: {
+        backgroundColor: colors.background,
+      },
+      bottomDivider: true,
     },
-    containerStyle: {
-      backgroundColor: colors.background,
+    Card: {
+      containerStyle: {
+        backgroundColor: colors.background,
+      },
     },
-    chevron: true,
-    bottomDivider: true,
-  },
-  Card: {
-    containerStyle: {
-      backgroundColor: colors.background,
+    CardTitle: {
+      style: { color: colors.text },
     },
-    titleStyle: {
-      color: colors.text,
+    Slider: {
+      thumbTintColor: colors.success,
     },
-  },
-  Slider: {
-    thumbTintColor: colors.success,
-  },
-  Input: {
-    containerStyle: {
-      backgroundColor: colors.text,
-      marginVertical: 10,
-      marginHorizontal: 20,
-      width: 300,
-      padding: 0,
+    Input: {
+      containerStyle: {
+        backgroundColor: 'red',
+        marginVertical: 10,
+        marginHorizontal: 20,
+        width: 300,
+        padding: 0,
+      },
     },
-  },
-  SearchBar: {
-    inputStyle: {
+    SearchBar: {
+      inputStyle: {
+        color: colors.text,
+      },
+      containerStyle: {
+        backgroundColor: colors.background,
+      },
+      inputContainerStyle: {
+        borderRadius: 0,
+      },
+    },
+    Icon: {
       color: colors.text,
     },
-    containerStyle: {
-      backgroundColor: colors.background,
+    Tooltip: {
+      withOverlay: false,
     },
-    inputContainerStyle: {
-      borderRadius: 0,
+    Overlay: {
+      overlayStyle: { backgroundColor: colors.background },
+      backdropStyle: { borderRadius: 10 },
     },
-  },
-  Icon: {
-    color: colors.text,
-  },
-  Tooltip: {
-    withOverlay: false,
-  },
-  Overlay: {
-    overlayStyle: { backgroundColor: colors.background },
-    borderRadius: 10,
-  },
-  Header: {
-    containerStyle: {
-      height: 56,
-      borderBottomColor: 'transparent',
-      paddingTop: 0,
-      paddingHorizontal: 0,
+    Header: {
+      containerStyle: {
+        height: 56,
+        borderBottomColor: 'transparent',
+        paddingTop: 0,
+        paddingHorizontal: 0,
+      },
     },
   },
   colors,
-};
+});
diff --git a/src/components/ActivityIndicator.tsx b/src/components/ActivityIndicator.tsx
@@ -1,15 +1,14 @@
 import React from 'react';
 import { ActivityIndicator as AI } from 'react-native';
-import { withTheme } from 'react-native-elements';
-import { MyTheme } from '../StyleSheet';
+import { useTheme, withTheme } from '@rneui/themed';
 
-function ActivityIndicator({ theme, size }: ActivityIndicatorProps) {
+function ActivityIndicator({ size }: ActivityIndicatorProps) {
+  const { theme } = useTheme();
   return <AI size={size} color={theme.colors.success} />;
 }
 
 interface ActivityIndicatorProps {
   size?: number | 'small' | 'large';
-  theme: MyTheme;
 }
 
 export default withTheme(ActivityIndicator);
diff --git a/src/components/AmountPicker.tsx b/src/components/AmountPicker.tsx
@@ -1,14 +1,13 @@
 import React from 'react';
-import { Picker } from 'react-native';
-import { withTheme } from 'react-native-elements';
-import { MyTheme } from '../StyleSheet';
+import { Picker } from '@react-native-picker/picker';
+import { useTheme, withTheme } from '@rneui/themed';
 
 function AmountPicker({
   amounts,
-  theme,
   selectedValue,
   onValueChange,
 }: AmountPickerProps) {
+  const { theme } = useTheme();
   return (
     <Picker
       prompt="Choose your measurement"
@@ -33,7 +32,6 @@ function AmountPicker({
 
 interface AmountPickerProps {
   amounts: any[];
-  theme: MyTheme;
   selectedValue: string;
   onValueChange: (value: string) => void;
 }