chore(#18): upgrade expo@49 RN paper@5

mkraenz · Jan 20, 2024 · 4911be5 · 4911be5
1 parent 055a562
commit 4911be5
Show file tree

Hide file tree

Showing 12 changed files with 3,678 additions and 5,467 deletions.
diff --git a/package.json b/package.json
@@ -22,41 +22,42 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^13.0.0",
-    "@react-native-async-storage/async-storage": "1.17.11",
-    "@react-native-community/datetimepicker": "6.7.3",
+    "@react-native-async-storage/async-storage": "1.18.2",
+    "@react-native-community/datetimepicker": "7.2.0",
     "@react-navigation/drawer": "^6.6.2",
     "@react-navigation/native": "^6.1.6",
     "@react-navigation/stack": "^6.3.16",
     "@reduxjs/toolkit": "^1.9.3",
-    "expo": "^48.0.0",
-    "expo-clipboard": "~4.1.2",
-    "expo-constants": "^14.2.1",
-    "expo-crypto": "~12.2.1",
-    "expo-localization": "~14.1.1",
-    "expo-notifications": "~0.18.1",
-    "expo-permissions": "~14.1.1",
-    "expo-splash-screen": "~0.18.1",
-    "expo-status-bar": "~1.4.4",
-    "expo-system-ui": "~2.2.1",
-    "expo-updates": "~0.16.3",
+    "expo": "^49.0.0",
+    "expo-clipboard": "~4.3.1",
+    "expo-constants": "~14.4.2",
+    "expo-crypto": "~12.4.1",
+    "expo-localization": "~14.3.0",
+    "expo-notifications": "~0.20.1",
+    "expo-permissions": "~14.2.1",
+    "expo-splash-screen": "~0.20.5",
+    "expo-status-bar": "~1.6.0",
+    "expo-system-ui": "~2.4.0",
+    "expo-updates": "~0.18.19",
     "fuse.js": "^6.6.2",
     "i18next": "^21.8.13",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-i18next": "^11.18.0",
-    "react-native": "0.71.4",
+    "react-native": "0.72.6",
     "react-native-chart-kit": "^6.12.0",
     "react-native-draggable-flatlist": "^4.0.1",
-    "react-native-gesture-handler": "~2.9.0",
+    "react-native-gesture-handler": "~2.12.0",
     "react-native-modal-datetime-picker": "^13.1.2",
-    "react-native-paper": "^4.12.4",
-    "react-native-reanimated": "~2.14.4",
-    "react-native-safe-area-context": "4.5.0",
-    "react-native-screens": "~3.20.0",
-    "react-native-svg": "13.4.0",
-    "react-native-web": "~0.18.10",
+    "react-native-paper": "^5.12.1",
+    "react-native-reanimated": "~3.3.0",
+    "react-native-safe-area-context": "~4.6.3",
+    "react-native-screens": "~3.22.0",
+    "react-native-svg": "13.9.0",
+    "react-native-vector-icons": "^10.0.3",
+    "react-native-web": "~0.19.6",
     "react-redux": "^8.0.5",
     "redux": "^4.2.1",
     "redux-persist": "^6.0.0"
@@ -65,14 +66,14 @@
     "@babel/core": "^7.19.3",
     "@types/jest": "^29.5.0",
     "@types/lodash": "^4.14.185",
-    "@types/react": "~18.0.27",
+    "@types/react": "~18.2.14",
     "@types/redux-persist": "^4.3.1",
-    "babel-preset-expo": "^9.3.1",
-    "eas-cli": "^3.8.1",
+    "babel-preset-expo": "^9.5.0",
+    "eas-cli": "^7.0.0",
     "jest": "^29.2.1",
-    "jest-expo": "^48.0.2",
+    "jest-expo": "~49.0.0",
     "license-report": "^6.0.0",
-    "typescript": "^4.9.4"
+    "typescript": "^5.1.3"
   },
   "jest": {
     "preset": "jest-expo"

diff --git a/src/NavigationApp.tsx b/src/NavigationApp.tsx
@@ -6,7 +6,7 @@ import {
 import { NavigationContainer } from "@react-navigation/native";
 import { StatusBar } from "expo-status-bar";
 import React, { FC } from "react";
-import { List, useTheme } from "react-native-paper";
+import { List, MD2Theme, useTheme } from "react-native-paper";
 import { connect, ConnectedProps } from "react-redux";
 import AboutNav from "./about/AboutNav";
 import BaseAppBar from "./BaseAppBar";
@@ -30,7 +30,7 @@ type PropsFromRedux = ConnectedProps<typeof connector>;
 const Drawer = createDrawerNavigator<GlobalDrawerParamList>();
 
 const CustomDrawer: FC<DrawerContentComponentProps> = (props) => {
-  const theme = useTheme();
+  const theme = useTheme<MD2Theme>();
   const { t } = useTranslation();
   return (
     <DrawerContentScrollView {...props}>
@@ -81,7 +81,7 @@ const NavigationApp: FC<PropsFromRedux> = ({
   appbarShownInDailies,
   devMode,
 }) => {
-  const theme = useTheme();
+  const theme = useTheme<MD2Theme>();
   const { t } = useTranslation();
 
   const initialRoute: Routes = "Dailies";

diff --git a/src/about/GithubNote.tsx b/src/about/GithubNote.tsx
@@ -1,6 +1,11 @@
 import React, { FC } from "react";
 import { Linking, StyleSheet } from "react-native";
-import { Paragraph, TouchableRipple, useTheme } from "react-native-paper";
+import {
+  MD2Theme,
+  Paragraph,
+  TouchableRipple,
+  useTheme,
+} from "react-native-paper";
 import { useTranslation } from "../localization/useTranslations";
 
 const styles = StyleSheet.create({
@@ -13,7 +18,7 @@ const styles = StyleSheet.create({
 });
 
 const GithubNote: FC = () => {
-  const theme = useTheme();
+  const theme = useTheme<MD2Theme>();
   const { t } = useTranslation();
   const openGithub = () => {
     Linking.openURL("https://github.com/proSingularity/daily-questions");

diff --git a/src/about/VersionAndCopyright.tsx b/src/about/VersionAndCopyright.tsx
@@ -1,7 +1,12 @@
 import Constants from "expo-constants";
 import React from "react";
 import { Linking, StyleSheet, View } from "react-native";
-import { Paragraph, TouchableRipple, useTheme } from "react-native-paper";
+import {
+  MD2Theme,
+  Paragraph,
+  TouchableRipple,
+  useTheme,
+} from "react-native-paper";
 import { useTranslation } from "../localization/useTranslations";
 
 const styles = StyleSheet.create({
@@ -14,7 +19,7 @@ const styles = StyleSheet.create({
 });
 
 const VersionAndCopyright = () => {
-  const theme = useTheme();
+  const theme = useTheme<MD2Theme>();
   const { t } = useTranslation();
   const openCompanyWebsite = () => {
     Linking.openURL("http://kraenz.eu");

diff --git a/src/dailies/SummaryScreen.tsx b/src/dailies/SummaryScreen.tsx
@@ -5,6 +5,7 @@ import React, { FC, useState } from "react";
 import { ScrollView, Share, StyleSheet, View } from "react-native";
 import {
   Button,
+  MD2Theme,
   Paragraph,
   Title,
   TouchableRipple,
@@ -92,7 +93,7 @@ const PointsAnswer: FC<{
   answer: string | number;
   onClick: () => void;
 }> = ({ title, answer, onClick }) => {
-  const theme = useTheme();
+  const theme = useTheme<MD2Theme>();
   const { t } = useTranslation();
   return (
     <TouchableRipple
@@ -205,7 +206,8 @@ const SummaryScreen: FC<Props & PropsFromRedux> = ({
     // intentionally not awaited to not block the UI
     Notifications.dismissAllNotificationsAsync();
   };
-  const wasClickSpammed = () => lastShareTimeInMs + SHARE_TIMEOUT_IN_MS > Date.now()
+  const wasClickSpammed = () =>
+    lastShareTimeInMs + SHARE_TIMEOUT_IN_MS > Date.now();
   const handleSharePressed = async () => {
     // manual debouncing because lodash.debounce does not work when we immediately
     // the state in handleConfirmAndSharePressed to show 'written to storage' success message,

diff --git a/src/history/HistoricEntryScreen.tsx b/src/history/HistoricEntryScreen.tsx
@@ -1,7 +1,13 @@
 import { isInteger, isString } from "lodash";
 import React, { FC } from "react";
 import { ScrollView, StyleSheet, View } from "react-native";
-import { Button, Paragraph, Title, useTheme } from "react-native-paper";
+import {
+  Button,
+  MD2Theme,
+  Paragraph,
+  Title,
+  useTheme,
+} from "react-native-paper";
 import { useTranslation } from "../localization/useTranslations";
 import { HistoricEntryParams } from "./history-nav";
 
@@ -39,7 +45,7 @@ const PointsAnswer: FC<{
   title?: string;
   answer: string | number;
 }> = ({ title, answer }) => {
-  const theme = useTheme();
+  const theme = useTheme<MD2Theme>();
   const { t } = useTranslation();
   return (
     <View

diff --git a/src/settings/SettingsButtonRow.tsx b/src/settings/SettingsButtonRow.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from "react";
 import { AccessibilityRole, StyleSheet } from "react-native";
-import { List, Text, useTheme } from "react-native-paper";
+import { List, MD2Theme, Text, useTheme } from "react-native-paper";
 
 interface Props {
   title: string;
@@ -30,7 +30,7 @@ const SettingsButtonRow: FC<Props> = ({
   disabled,
   accessibilityRole = "button",
 }) => {
-  const theme = useTheme();
+  const theme = useTheme<MD2Theme>();
   const textColor = disabled ? theme.colors.disabled : theme.colors.text;
   return (
     <List.Item

diff --git a/src/settings/SettingsSwitchRow.tsx b/src/settings/SettingsSwitchRow.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from "react";
 import { AccessibilityRole } from "react-native";
-import { List, Switch, useTheme } from "react-native-paper";
+import { List, MD2Theme, Switch, useTheme } from "react-native-paper";
 import { useTranslation } from "../localization/useTranslations";
 
 interface Props {
@@ -25,7 +25,7 @@ const SettingsSwitchRow: FC<Props> = ({
   accessibilityRole = "button", // not using switch as it is not working properly with accessibility
   disabled,
 }) => {
-  const theme = useTheme();
+  const theme = useTheme<MD2Theme>();
   const { t } = useTranslation();
   return (
     <List.Item

diff --git a/src/settings/import-history/ImportHistoryErrorDialog.tsx b/src/settings/import-history/ImportHistoryErrorDialog.tsx
@@ -5,6 +5,7 @@ import { View } from "react-native";
 import {
   Button,
   Dialog,
+  MD2Theme,
   Paragraph,
   Portal,
   useTheme,
@@ -17,7 +18,7 @@ interface Props {
 }
 
 const WarningIcon: FC = () => {
-  const theme = useTheme();
+  const theme = useTheme<MD2Theme>();
   return <FontAwesome name={"warning"} size={24} color={theme.colors.accent} />;
 };
 

diff --git a/src/statistics/Chart.tsx b/src/statistics/Chart.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from "react";
 import { LineChart } from "react-native-chart-kit";
-import { useTheme } from "react-native-paper";
+import { MD2Theme, useTheme } from "react-native-paper";
 import { History } from "../history/history.slice";
 
 const getXLabels = (history: History) => {
@@ -25,7 +25,7 @@ const min = 1;
 const max = 10;
 
 const Chart: FC<Props> = ({ selectedQuestions, history, width, height }) => {
-  const theme = useTheme();
+  const theme = useTheme<MD2Theme>();
 
   const datasets = selectedQuestions
     .filter((q) => q.checked)

diff --git a/src/theme.ts b/src/theme.ts
@@ -1,6 +1,6 @@
-import { DarkTheme, DefaultTheme } from "react-native-paper";
+import { MD2LightTheme, MD2DarkTheme } from "react-native-paper";
 
-export type FullTheme = typeof DefaultTheme;
+export type FullTheme = typeof MD2LightTheme;
 
 export enum Color {
   LightBlue = "#00C0FA",
@@ -16,10 +16,10 @@ export enum Color {
 }
 
 export const lightTheme: FullTheme = {
-  ...DefaultTheme,
+  ...MD2LightTheme,
   roundness: 12,
   colors: {
-    ...DefaultTheme.colors,
+    ...MD2LightTheme.colors,
     primary: Color.CorporateBlue,
     accent: Color.Orange,
   },
@@ -38,10 +38,10 @@ export const highContrastLightTheme: FullTheme = {
 };
 
 export const darkTheme: FullTheme = {
-  ...DarkTheme,
+  ...MD2DarkTheme,
   roundness: 12,
   colors: {
-    ...DarkTheme.colors,
+    ...MD2DarkTheme.colors,
     primary: Color.LightBlue,
     accent: Color.LightOrange,
   },