fix: upgrade app to material 3

Author: RichardLindhout

example/package.json

@@ -12,12 +12,13 @@
     "test": "jest"
   },
   "dependencies": {
+    "add": "^2.0.6",
     "expo": "^47.0.0",
     "expo-splash-screen": "~0.17.5",
     "react": "18.1.0",
     "react-dom": "18.1.0",
     "react-native": "0.70.5",
-    "react-native-paper": "^4.12.4",
+    "react-native-paper": "^5.0.2",
     "react-native-web": "~0.18.7"
   },
   "devDependencies": {

example/src/App.tsx

@@ -6,7 +6,6 @@ import {
   Linking,
   Image,
   Animated,
-  Platform,
 } from 'react-native'
 import { SafeAreaProvider } from 'react-native-safe-area-context'
 
@@ -117,7 +116,7 @@ function App() {
   const backgroundColor =
     theme.dark && theme.mode === 'adaptive'
       ? overlay(3, theme.colors.surface)
-      : (theme.colors.surface as any)
+      : theme.colors.surface
 
   const pastDate = new Date(new Date().setDate(new Date().getDate() - 5))
   const futureDate = new Date(new Date().setDate(new Date().getDate() + 5))
@@ -389,21 +388,19 @@ function Row({ children }: { children: any }) {
 function Label({ children }: { children: string }) {
   const theme = useTheme()
   return (
-    <Text style={[styles.label, { ...theme.fonts.medium }]}>{children}</Text>
+    <Text style={[styles.label, { ...theme.fonts.bodyLarge }]}>{children}</Text>
   )
 }
 
+const theme = { version: 3 }
 export default function AppWithProviders() {
-  const inner = (
-    <PaperProvider>
-      <App />
-    </PaperProvider>
+  return (
+    <SafeAreaProvider>
+      <PaperProvider theme={theme as any}>
+        <App />
+      </PaperProvider>
+    </SafeAreaProvider>
   )
-
-  if (Platform.OS === 'web') {
-    return <SafeAreaProvider>{inner}</SafeAreaProvider>
-  }
-  return <SafeAreaProvider>{inner}</SafeAreaProvider>
 }
 
 function TwitterFollowButton({ userName }: { userName: string }) {

example/yarn.lock

@@ -1228,10 +1228,10 @@
     "@babel/helper-validator-identifier" "^7.19.1"
     to-fast-properties "^2.0.0"
 
-"@callstack/react-theme-provider@^3.0.7":
-  version "3.0.7"
-  resolved "https://registry.npmjs.org/@callstack/react-theme-provider/-/react-theme-provider-3.0.7.tgz#b7ce1a53d63ad5e83574b831ae0af6b7c6cc40e7"
-  integrity sha512-Ab6rbD2w4u9W3yf7LQQ8evx9m8fZNsoWxt+MFm3AyZnyKQNCJf4K7ip9tHHZgSs+HTdoj38lEqPehvFOVQKvAg==
+"@callstack/react-theme-provider@^3.0.8":
+  version "3.0.8"
+  resolved "https://registry.npmjs.org/@callstack/react-theme-provider/-/react-theme-provider-3.0.8.tgz#d0d7ac71e422133c5f7b78f4c4aa1bc57f156f50"
+  integrity sha512-5U231sYY2sqQOaELX0WBCn+iluV8bFaXIS7em03k4W5Xz0AhGvKlnpLIhDGFP8im/SvNW7/2XoR0BsClhn9t6Q==
   dependencies:
     deepmerge "^3.2.0"
     hoist-non-react-statics "^3.3.0"
@@ -2486,6 +2486,11 @@ acorn@^6.4.1:
   resolved "https://registry.npmjs.org/acorn/-/acorn-6.4.2.tgz#35866fd710528e92de10cf06016498e47e39e1e6"
   integrity sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==
 
+add@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.npmjs.org/add/-/add-2.0.6.tgz#248f0a9f6e5a528ef2295dbeec30532130ae2235"
+  integrity sha512-j5QzrmsokwWWp6kUcJQySpbG+xfOBqqKnup3OIk1pz+kB/80SLorZ9V8zHFLO92Lcd+hbvq8bT+zOGoPkmBV0Q==
+
 [email protected]:
   version "1.1.2"
   resolved "https://registry.npmjs.org/address/-/address-1.1.2.tgz#bf1116c9c758c51b7a933d296b72c221ed9428b6"
@@ -9367,19 +9372,14 @@ react-native-gradle-plugin@^0.70.3:
   resolved "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.70.3.tgz#cbcf0619cbfbddaa9128701aa2d7b4145f9c4fc8"
   integrity sha512-oOanj84fJEXUg9FoEAQomA8ISG+DVIrTZ3qF7m69VQUJyOGYyDZmPqKcjvRku4KXlEH6hWO9i4ACLzNBh8gC0A==
 
-react-native-iphone-x-helper@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz#20c603e9a0e765fd6f97396638bdeb0e5a60b010"
-  integrity sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg==
-
-react-native-paper@^4.12.4:
-  version "4.12.4"
-  resolved "https://registry.npmjs.org/react-native-paper/-/react-native-paper-4.12.4.tgz#c04ce40d225dc267b7ee32be705dd553f44e0c0c"
-  integrity sha512-NMfLSIN0Ql/KCTSimhgzbEOgz371dqDAgChnp2VE4H7n1B0Pwy0bzPKmY/T8trVvEdmJRXrbXAusaFq8elDXNg==
+react-native-paper@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.npmjs.org/react-native-paper/-/react-native-paper-5.0.2.tgz#1ea77d394988c0b8be9e933a1a7f6c16a180adc5"
+  integrity sha512-PRH2QtlpXovfbs82affDQO9BT7vK3lKa04daK56ov3YXezPmbJnPy1dAAyERrLUswtxyY/e6dQhnIMkkKg3k0Q==
   dependencies:
-    "@callstack/react-theme-provider" "^3.0.7"
+    "@callstack/react-theme-provider" "^3.0.8"
     color "^3.1.2"
-    react-native-iphone-x-helper "^1.3.1"
+    use-event-callback "^0.1.0"
 
 react-native-web@~0.18.7:
   version "0.18.8"
@@ -11158,6 +11158,11 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-event-callback@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.npmjs.org/use-event-callback/-/use-event-callback-0.1.0.tgz#29d7ce996802935c5387e7d3b606cf316da3457f"
+  integrity sha512-5fTzY5UEXHMK5UR0NRkUz6TPfWmmX9fO8Tx3SnHrfMPdrQ7Rna0gDBy0r56SP68TwsP9DgwSBzeysCu3A/Z2NA==
+
 use-sync-external-store@^1.0.0:
   version "1.2.0"
   resolved "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"

src/Date/DatePickerInputWithoutModal.tsx

@@ -94,7 +94,6 @@ function getLabel({
 const styles = StyleSheet.create({
   root: {
     flexGrow: 1,
-    backgroundColor: 'pink',
   },
   inputContainer: {
     flexGrow: 1,