Add support for react native 76

.nvmrc

@@ -1 +1 @@
-18.18.0
+22.13.1

babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ['module:metro-react-native-babel-preset'],
+  presets: ['module:@react-native/babel-preset'],
 }

docusaurus/package.json

@@ -15,19 +15,19 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "3.5.2",
-    "@docusaurus/preset-classic": "3.5.2",
+    "@docusaurus/core": "^3.7.0",
+    "@docusaurus/preset-classic": "^3.7.0",
     "@mdx-js/react": "^3.0.1",
     "clsx": "^2.1.1",
     "color": "^4.2.3",
-    "prism-react-renderer": "^2.4.0",
+    "prism-react-renderer": "^2.4.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "3.5.2",
+    "@docusaurus/module-type-aliases": "^3.7.0",
     "@tsconfig/docusaurus": "^2.0.3",
-    "typescript": "^5.6.2"
+    "typescript": "^5.7.3"
   },
   "browserslist": {
     "production": [

example/app.json

@@ -4,7 +4,6 @@
     "slug": "react-native-paper-dates-example",
     "description": "Example app for react-native-paper-dates",
     "version": "1.0.0",
-    "privacy": "public",
     "scheme": "react-native-paper-dates",
     "ios": {
       "supportsTablet": true

example/package.json

@@ -14,38 +14,49 @@
   },
   "dependencies": {
     "@expo/webpack-config": "~19.0.1",
-    "crypto-browserify": "^3.12.0",
-    "expo": "^51.0.34",
-    "expo-constants": "~16.0.2",
-    "expo-crypto": "~13.0.2",
-    "expo-linking": "~6.3.1",
-    "expo-router": "~3.5.23",
-    "expo-splash-screen": "~0.27.6",
-    "expo-status-bar": "~1.12.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-native": "~0.75.0",
-    "react-native-gesture-handler": "~2.18.1",
-    "react-native-paper": "^5.12.5",
-    "react-native-paper-dates": "^0.22.25",
-    "react-native-reanimated": "~3.15.0",
-    "react-native-safe-area-context": "4.10.5",
-    "react-native-screens": "~3.34.0",
-    "react-native-web": "~0.19.12",
+    "crypto-browserify": "^3.12.1",
+    "expo": "^52.0.28",
+    "expo-constants": "~17.0.5",
+    "expo-crypto": "~14.0.2",
+    "expo-linking": "~7.0.5",
+    "expo-router": "~4.0.17",
+    "expo-splash-screen": "~0.29.21",
+    "expo-status-bar": "~2.0.1",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-native": "~0.76.6",
+    "react-native-gesture-handler": "~2.22.1",
+    "react-native-paper": "^5.13.1",
+    "react-native-paper-dates": "^0.22.30",
+    "react-native-reanimated": "~3.16.7",
+    "react-native-safe-area-context": "5.1.0",
+    "react-native-screens": "~4.5.0",
+    "react-native-web": "~0.19.13",
     "stream-browserify": "^3.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.9",
+    "@babel/core": "^7.26.7",
     "babel-loader": "^9.2.1",
     "babel-plugin-module-resolver": "^5.0.2"
   },
   "expo": {
+    "doctor": {
+      "reactNativeDirectoryCheck": {
+        "exclude": [
+          "@expo/webpack-config",
+          "crypto-browserify",
+          "stream-browserify"
+        ],
+        "listUnknownPackages": false
+      }
+    },
     "install": {
       "exclude": [
-        "react-native@~0.74.0",
-        "react-native-reanimated@~3.10.0",
-        "react-native-gesture-handler@~2.16.1",
-        "react-native-screens@~3.31.1"
+        "react-native-reanimated",
+        "react-native-gesture-handler",
+        "react-native-screens",
+        "react-native-safe-area-context",
+        "react-native-webview"
       ]
     }
   }

jest.config.js

@@ -10,7 +10,6 @@ module.exports = {
     'node_modules/(?!(@react-native|react-native(-.*)?)/)',
   ],
   setupFiles: ['<rootDir>/testSetup.js'],
-  setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect'],
   collectCoverage: true,
   collectCoverageFrom: [
     '**/src/**',

package.json

@@ -50,35 +50,36 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@commitlint/config-conventional": "^19.5.0",
+    "@commitlint/config-conventional": "^19.6.0",
     "@react-native-community/eslint-config": "^3.2.0",
-    "@release-it/conventional-changelog": "^8.0.2",
+    "@release-it/conventional-changelog": "^10.0.0",
     "@testing-library/jest-native": "^5.4.3",
-    "@testing-library/react-native": "^12.7.2",
-    "@types/color": "^3.0.6",
-    "@types/jest": "^29.5.13",
-    "@types/react": "^18.3.10",
+    "@testing-library/react-native": "^13.0.1",
+    "@types/color": "^4.2.0",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^18.3.18",
     "@types/react-native-vector-icons": "^6.4.18",
-    "@types/react-test-renderer": "^18.3.0",
+    "@types/react-test-renderer": "^18.3.1",
     "babel-loader": "^9.2.1",
-    "caniuse-lite": "^1.0.30001664",
-    "commitlint": "^19.5.0",
+    "caniuse-lite": "^1.0.30001695",
+    "commitlint": "^19.6.1",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "husky": "^9.1.6",
+    "eslint-plugin-prettier": "^5.2.3",
+    "eslint-plugin-testing-library": "^7.1.1",
+    "husky": "^9.1.7",
     "jest": "^29.7.0",
     "metro-react-native-babel-preset": "^0.77.0",
-    "pod-install": "^0.2.2",
-    "prettier": "^3.3.2",
+    "pod-install": "^0.3.4",
+    "prettier": "^3.4.2",
     "react": "^18.3.1",
-    "react-native": "^0.75.3",
-    "react-native-builder-bob": "^0.30.2",
-    "react-native-paper": "^5.12.5",
-    "react-native-safe-area-context": "^4.11.0",
+    "react-native": "^0.76.6",
+    "react-native-builder-bob": "^0.36.0",
+    "react-native-paper": "^5.13.1",
+    "react-native-safe-area-context": "^5.1.0",
     "react-native-vector-icons": "^10.2.0",
     "react-test-renderer": "^18.3.1",
-    "release-it": "^17.6.0",
+    "release-it": "^18.1.2",
     "typescript": "~5.5.3"
   },
   "peerDependencies": {

src/Time/AmPmSwitcher.tsx

@@ -44,7 +44,7 @@ export default function AmPmSwitcher({
           borderColor: backgroundColor,
           borderRadius: theme.roundness * 2,
           height: inputType === inputTypes.keyboard ? 72 : 80,
-          marginBottom: inputType === 'keyboard' ? 24 : 0,
+          marginBottom: inputType === 'keyboard' ? 16 : 0,
         },
       ]}
     >

src/Time/TimeInput.tsx

@@ -71,26 +71,39 @@ function TimeInput(
   }
 
   return (
-    <View style={styles.root}>
+    <View
+      style={[
+        styles.root,
+        // eslint-disable-next-line react-native/no-inline-styles
+        {
+          backgroundColor,
+          borderRadius: theme.roundness * 2,
+          borderColor:
+            theme.isV3 && highlighted
+              ? theme.colors.onPrimaryContainer
+              : undefined,
+          borderWidth: theme.isV3 && highlighted ? 2 : 0,
+          height: inputType === inputTypes.keyboard ? 72 : 80,
+        },
+      ]}
+    >
       <TextInput
         ref={ref}
+        textAlign="center"
         style={[
-          styles.input,
           // eslint-disable-next-line react-native/no-inline-styles
           {
             color,
             fontFamily: theme?.isV3
               ? theme.fonts.titleMedium.fontFamily
               : (theme as any as MD2Theme).fonts.medium.fontFamily,
             fontSize: inputFontSize,
-            backgroundColor,
-            borderRadius: theme.roundness * 2,
-            borderColor:
-              theme.isV3 && highlighted
-                ? theme.colors.onPrimaryContainer
+            lineHeight:
+              Platform.OS === 'android'
+                ? Math.max(inputFontSize, 48)
                 : undefined,
-            borderWidth: theme.isV3 && highlighted ? 2 : 0,
-            height: inputType === inputTypes.keyboard ? 72 : 80,
+            paddingTop: Platform.OS === 'android' ? 10 : undefined,
+            paddingBottom: Platform.OS === 'android' ? 0 : undefined,
           },
         ]}
         maxFontSizeMultiplier={1.5}
@@ -100,9 +113,7 @@ function TimeInput(
         onBlur={() => setInputFocused(false)}
         keyboardAppearance={theme.dark ? 'dark' : 'default'}
         keyboardType="number-pad"
-        onChangeText={(e: string) => {
-          onInnerChange(Number(e))
-        }}
+        onChangeText={(e) => onInnerChange(Number(e))}
         {...rest}
       />
       {onPress && inputType === inputTypes.picker ? (
@@ -130,14 +141,9 @@ function TimeInput(
 }
 
 const styles = StyleSheet.create({
-  input: {
-    textAlign: 'center',
-    textAlignVertical: 'center',
-    width: 96,
-  },
   root: {
-    height: 80,
-    position: 'relative',
+    alignItems: 'center',
+    justifyContent: 'center',
     width: 96,
   },
 })

src/Time/TimeInputs.tsx

@@ -122,7 +122,7 @@ function TimeInputs({
         style={[
           styles.hoursAndMinutesSeparator,
           // eslint-disable-next-line react-native/no-inline-styles
-          { marginBottom: inputType === 'keyboard' ? 24 : 0 },
+          { marginBottom: inputType === 'keyboard' ? 16 : 0 },
         ]}
       >
         <View style={sharedStyles.root} />

src/Time/TimePickerModal.tsx

@@ -6,6 +6,7 @@ import {
   Animated,
   TouchableWithoutFeedback,
   KeyboardAvoidingView,
+  Keyboard,
 } from 'react-native'
 
 import {
@@ -195,7 +196,10 @@ export function TimePickerModal({
                     keyboard: keyboardIcon,
                     picker: clockIcon,
                   })}
-                  onPress={() => setInputType(reverseInputTypes[inputType])}
+                  onPress={() => {
+                    Keyboard.dismiss()
+                    setInputType(reverseInputTypes[inputType])
+                  }}
                   size={24}
                   style={styles.inputTypeToggle}
                   accessibilityLabel="toggle keyboard"

src/__tests__/Date/__snapshots__/AnimatedCrossView.test.tsx.snap

@@ -4070,8 +4070,7 @@ exports[`renders collapsed AnimatedCrossView 1`] = `
                 onChangeText={[Function]}
                 onFocus={[Function]}
                 onSubmitEditing={[Function]}
-                placeholder=" "
-                placeholderTextColor="rgba(73, 69, 79, 1)"
+                placeholderTextColor="transparent"
                 selectionColor="rgba(103, 80, 164, 1)"
                 style={
                   [

src/__tests__/Date/__snapshots__/CalendarEdit.test.tsx.snap

@@ -220,8 +220,7 @@ exports[`renders CalendarEdit 1`] = `
             onChangeText={[Function]}
             onFocus={[Function]}
             onSubmitEditing={[Function]}
-            placeholder=" "
-            placeholderTextColor="rgba(73, 69, 79, 1)"
+            placeholderTextColor="transparent"
             selectionColor="rgba(103, 80, 164, 1)"
             style={
               [

src/__tests__/Date/__snapshots__/DatePickerInputWithoutModal.test.tsx.snap

@@ -212,8 +212,7 @@ exports[`renders DatePickerInput 1`] = `
           onChange={[Function]}
           onChangeText={[Function]}
           onFocus={[Function]}
-          placeholder=" "
-          placeholderTextColor="rgba(73, 69, 79, 1)"
+          placeholderTextColor="transparent"
           selectionColor="rgba(103, 80, 164, 1)"
           style={
             [

src/__tests__/Time/__snapshots__/AmPmSwitcher.test.tsx.snap

@@ -13,7 +13,7 @@ exports[`renders AmPmSwitcher 1`] = `
         "borderColor": "rgba(121, 116, 126, 1)",
         "borderRadius": 8,
         "height": 72,
-        "marginBottom": 24,
+        "marginBottom": 16,
       },
     ]
   }

src/__tests__/Time/__snapshots__/TimeInput.test.tsx.snap

@@ -3,11 +3,20 @@
 exports[`renders TimeInput 1`] = `
 <View
   style={
-    {
-      "height": 80,
-      "position": "relative",
-      "width": 96,
-    }
+    [
+      {
+        "alignItems": "center",
+        "justifyContent": "center",
+        "width": 96,
+      },
+      {
+        "backgroundColor": "rgba(232, 222, 248, 1)",
+        "borderColor": "rgba(33, 0, 93, 1)",
+        "borderRadius": 8,
+        "borderWidth": 2,
+        "height": 80,
+      },
+    ]
   }
 >
   <TextInput
@@ -21,22 +30,16 @@ exports[`renders TimeInput 1`] = `
     style={
       [
         {
-          "textAlign": "center",
-          "textAlignVertical": "center",
-          "width": 96,
-        },
-        {
-          "backgroundColor": "rgba(232, 222, 248, 1)",
-          "borderColor": "rgba(33, 0, 93, 1)",
-          "borderRadius": 8,
-          "borderWidth": 2,
           "color": "rgba(33, 0, 93, 1)",
           "fontFamily": "System",
           "fontSize": 57,
-          "height": 80,
+          "lineHeight": undefined,
+          "paddingBottom": undefined,
+          "paddingTop": undefined,
         },
       ]
     }
+    textAlign="center"
     value="12"
   />
 </View>