refactor: improve maintainability

Author: iM-GeeKy

example/package.json

@@ -12,19 +12,19 @@
     "test": "jest"
   },
   "dependencies": {
-    "expo": "^50.0.8",
-    "expo-splash-screen": "~0.26.4",
+    "expo": "^50.0.19",
+    "expo-splash-screen": "~0.26.5",
     "expo-status-bar": "~1.11.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.73.4",
     "react-native-paper": "^5.12.3",
-    "react-native-web": "~0.19.10"
+    "react-native-web": "~0.19.12"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.0",
+    "@babel/core": "^7.24.8",
     "@expo/webpack-config": "^19.0.1",
     "babel-loader": "^9.1.3",
-    "babel-plugin-module-resolver": "^5.0.0"
+    "babel-plugin-module-resolver": "^5.0.2"
   }
 }

example/src/App.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import {
   StyleSheet,
   ScrollView,
@@ -57,7 +56,8 @@ import {
   ja,
   th,
 } from 'react-native-paper-dates'
-import { useCallback, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
+import React from 'react'
 
 const presentationStyles = ['overFullScreen', 'pageSheet'] as const
 const locales: [string, TranslationsType][] = [
@@ -124,7 +124,7 @@ function App({
 
   /** Constants. */
   const maxFontSizeMultiplier = 1.5
-  const dateFormatter = React.useMemo(
+  const dateFormatter = useMemo(
     () =>
       new Intl.DateTimeFormat(locale, {
         day: 'numeric',
@@ -133,7 +133,7 @@ function App({
       }),
     [locale]
   )
-  const timeFormatter = React.useMemo(
+  const timeFormatter = useMemo(
     () =>
       new Intl.DateTimeFormat(locale, {
         hour: '2-digit',
@@ -570,7 +570,7 @@ function App({
 
 export default function AppWithProviders() {
   const colorScheme = useColorScheme()
-  const [materialYouEnabled, setMaterialYouEnabled] = React.useState(true)
+  const [materialYouEnabled, setMaterialYouEnabled] = useState(true)
   const m3Theme = colorScheme === 'dark' ? MD3DarkTheme : MD3LightTheme
   const m2Theme = colorScheme === 'dark' ? MD2LightTheme : MD2LightTheme
 

example/src/ReadMeExampleDatePickerInput.tsx

@@ -1,9 +1,9 @@
-import * as React from 'react'
-
+import React from 'react'
+import { useState } from 'react'
 import { DatePickerInput } from 'react-native-paper-dates'
 
 export default function ReadMeExampleDatePickerInput() {
-  const [inputDate, setInputDate] = React.useState<Date | undefined>(undefined)
+  const [inputDate, setInputDate] = useState<Date | undefined>(undefined)
 
   return (
     <>

example/src/ReadMeExampleMultiple.tsx

@@ -1,17 +1,18 @@
-import * as React from 'react'
+import React from 'react'
+import { useCallback, useState } from 'react'
 import { Button } from 'react-native-paper'
 
 import { DatePickerModal } from 'react-native-paper-dates'
 
 export default function ReadMeExampleMultiple() {
-  const [dates, setDates] = React.useState<Date[] | undefined>()
-  const [open, setOpen] = React.useState(false)
+  const [dates, setDates] = useState<Date[] | undefined>()
+  const [open, setOpen] = useState(false)
 
-  const onDismiss = React.useCallback(() => {
+  const onDismiss = useCallback(() => {
     setOpen(false)
   }, [setOpen])
 
-  const onConfirm = React.useCallback((params: any) => {
+  const onConfirm = useCallback((params: any) => {
     setOpen(false)
     setDates(params.dates)
     console.log('[on-change-multi]', params)

example/src/ReadMeExampleRange.tsx

@@ -1,21 +1,22 @@
-import * as React from 'react'
+import React from 'react'
+import { useCallback, useState } from 'react'
 import { Button } from 'react-native-paper'
 
 import { DatePickerModal } from 'react-native-paper-dates'
 
 export default function ReadMeExampleRange() {
-  const [range, setRange] = React.useState<{
+  const [range, setRange] = useState<{
     startDate: Date | undefined
     endDate: Date | undefined
   }>({ startDate: undefined, endDate: undefined })
 
-  const [open, setOpen] = React.useState(false)
+  const [open, setOpen] = useState(false)
 
-  const onDismiss = React.useCallback(() => {
+  const onDismiss = useCallback(() => {
     setOpen(false)
   }, [setOpen])
 
-  const onConfirm = React.useCallback(
+  const onConfirm = useCallback(
     ({ startDate, endDate }: any) => {
       setOpen(false)
       setRange({ startDate, endDate })

example/src/ReadMeExampleSingle.tsx

@@ -1,16 +1,17 @@
-import * as React from 'react'
+import React from 'react'
+import { useCallback, useState } from 'react'
 import { Button } from 'react-native-paper'
 import { DatePickerModal } from 'react-native-paper-dates'
 
 export default function ReadMeExampleSingle() {
-  const [date, setDate] = React.useState<Date | undefined>(undefined)
-  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = useState<Date | undefined>(undefined)
+  const [open, setOpen] = useState(false)
 
-  const onDismissSingle = React.useCallback(() => {
+  const onDismissSingle = useCallback(() => {
     setOpen(false)
   }, [setOpen])
 
-  const onConfirmSingle = React.useCallback(
+  const onConfirmSingle = useCallback(
     (params: any) => {
       setOpen(false)
       setDate(params.date)