chore: update dependencies in lib and example (#4000)

Author: lukewalczak

docs/src/components/DynamicColorTheme.tsx

@@ -4,13 +4,13 @@ import Color from 'color';
 //@ts-ignore
 import { BlockPicker } from 'react-color';
 
+import Switch from './Switch';
 import {
   getMatchingColor,
   getPreviewColors,
   hexThemeFromColor,
   prepareThemes,
 } from '../utils/themes';
-import Switch from './Switch';
 
 type ColorProps = {
   color?: string;

docs/src/components/PropTable.tsx

@@ -67,7 +67,7 @@ export default function PropTable({
 }) {
   const doc = useDoc(componentLink);
 
-  if (!doc || !doc.data || !doc.data.props) {
+  if (!doc?.data?.props) {
     return null;
   }
 

example/android/app/build.gradle

@@ -1,4 +1,5 @@
 apply plugin: "com.android.application"
+apply plugin: "com.facebook.react"
 
 import com.android.build.OutputFile
 

example/android/gradle.properties

@@ -51,3 +51,5 @@ expo.webp.enabled=true
 # Enable animated webp support (~3.4 MB increase)
 # Disabled by default because iOS doesn't support animated webp
 expo.webp.animated=false
+
+hermesEnabled=false

example/app.json

@@ -5,7 +5,6 @@
     "slug": "react-native-paper-example",
     "privacy": "public",
     "version": "3.9.0",
-    "entryPoint": "App.js",
     "orientation": "default",
     "primaryColor": "#6200EE",
     "userInterfaceStyle": "automatic",

example/package.json

@@ -4,6 +4,7 @@
   "description": "Example for React Native Paper",
   "author": "",
   "private": true,
+  "main": "App.js",
   "scripts": {
     "eas-build-pre-install": "cd .. && yarn",
     "start": "EXPO_NO_TYPESCRIPT_SETUP=1 expo start",
@@ -14,36 +15,39 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^13.0.0",
+    "@expo/webpack-config": "^18.0.1",
     "@pchmn/expo-material3-theme": "^1.0.1",
-    "@react-native-async-storage/async-storage": "~1.17.10",
+    "@react-native-async-storage/async-storage": "1.17.11",
     "@react-native-masked-view/masked-view": "0.2.8",
     "@react-navigation/bottom-tabs": "^6.5.3",
     "@react-navigation/drawer": "^6.5.7",
     "@react-navigation/native": "^6.1.2",
     "@react-navigation/stack": "^6.3.11",
-    "expo": "^47.0.0",
-    "expo-dev-client": "~2.0.1",
-    "expo-font": "~11.0.1",
-    "expo-keep-awake": "~11.0.1",
-    "expo-splash-screen": "~0.17.5",
-    "expo-status-bar": "~1.4.2",
-    "expo-updates": "~0.15.6",
+    "expo": "^48.0.0",
+    "expo-dev-client": "~2.2.1",
+    "expo-font": "~11.1.1",
+    "expo-keep-awake": "~12.0.1",
+    "expo-splash-screen": "~0.18.2",
+    "expo-status-bar": "~1.4.4",
+    "expo-updates": "~0.16.4",
     "file-loader": "^6.2.0",
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
-    "react-native": "0.70.8",
-    "react-native-gesture-handler": "~2.8.0",
-    "react-native-reanimated": "~2.12.0",
-    "react-native-safe-area-context": "4.4.1",
-    "react-native-screens": "~3.18.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-native": "0.71.6",
+    "react-native-gesture-handler": "~2.9.0",
+    "react-native-reanimated": "~2.14.4",
+    "react-native-safe-area-context": "4.5.0",
+    "react-native-screens": "~3.20.0",
     "react-native-vector-icons": "^9.2.0",
     "react-native-web": "~0.18.7",
     "typeface-roboto": "^1.1.13"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
     "babel-plugin-module-resolver": "^5.0.0",
-    "babel-preset-expo": "~9.2.1",
-    "expo-cli": "^6.1.0"
+    "babel-preset-expo": "^9.3.0"
+  },
+  "resolutions": {
+    "expo/expo-asset": "8.9.1"
   }
 }

example/src/ExampleList.tsx

@@ -123,7 +123,7 @@ type Props = {
 
 type Item = {
   id: string;
-  data: typeof mainExamples[string];
+  data: (typeof mainExamples)[string];
 };
 
 const data = Object.keys(mainExamples).map(

example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx

@@ -11,13 +11,13 @@ import {
 } from 'react-native-paper';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 
-import { useExampleTheme } from '../..';
-import { animatedFABExampleData } from '../../../utils';
 import CustomFAB from './CustomFAB';
 import CustomFABControls, {
   Controls,
   initialControls,
 } from './CustomFABControls';
+import { useExampleTheme } from '../..';
+import { animatedFABExampleData } from '../../../utils';
 
 type Item = {
   id: string;

example/src/Examples/AnimatedFABExample/CustomFABControls.tsx

@@ -43,7 +43,7 @@ const CustomControl = ({
   const { isV3 } = useExampleTheme();
 
   const _renderItem = React.useCallback(
-    ({ item }: ListRenderItemInfo<typeof options[number]>) => {
+    ({ item }: ListRenderItemInfo<(typeof options)[number]>) => {
       const TextComponent = isV3 ? Text : Paragraph;
 
       return (
@@ -65,7 +65,7 @@ const CustomControl = ({
   );
 
   const _keyExtractor = React.useCallback(
-    (item: typeof options[number]) => item,
+    (item: (typeof options)[number]) => item,
     []
   );
   const TextComponent = isV3 ? Text : Paragraph;

example/src/Examples/DialogExample.tsx

@@ -3,8 +3,6 @@ import { Platform, StyleSheet } from 'react-native';
 
 import { Button } from 'react-native-paper';
 
-import { useExampleTheme } from '..';
-import ScreenWrapper from '../ScreenWrapper';
 import {
   DialogWithCustomColors,
   DialogWithDismissableBackButton,
@@ -14,6 +12,8 @@ import {
   DialogWithRadioBtns,
   UndismissableDialog,
 } from './Dialogs';
+import { useExampleTheme } from '..';
+import ScreenWrapper from '../ScreenWrapper';
 
 type ButtonVisibility = {
   [key: string]: boolean | undefined;