fix: upgrade version

Author: RichardLindhout

example/package.json

@@ -11,7 +11,8 @@
     "web:build": "react-app-rewired build",
     "web:test": "react-app-rewired test",
     "web:eject": "react-app-rewired eject",
-    "web": "npm link ../node_modules/react --legacy-peer-deps --force && react-app-rewired start"
+    "bugfix": "npm link ../node_modules/react --legacy-peer-deps --force",
+    "web": "react-app-rewired start"
   },
   "dependencies": {
     "@formatjs/intl-datetimeformat": "^2.6.6",
@@ -22,14 +23,14 @@
     "@formatjs/intl-numberformat": "^5.6.1",
     "@formatjs/intl-pluralrules": "^3.4.6",
     "@formatjs/intl-relativetimeformat": "^7.2.6",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "react-native": "0.63.4",
     "react-native-localize": "^2.0.1",
-    "react-native-paper": "^4.5.0",
+    "react-native-paper": "^4.7.2",
     "react-native-vector-icons": "https://github.com/RichardLindhout/react-native-vector-icons",
     "react-native-web": "^0.15.0",
-    "react-scripts": "3.4.3"
+    "react-scripts": "^4.0.3"
   },
   "devDependencies": {
     "@babel/core": "^7.11.4",
@@ -47,7 +48,7 @@
     "metro-react-native-babel-preset": "^0.63.0",
     "react-app-rewired": "^2.1.6",
     "react-test-renderer": "16.13.1",
-    "typescript": "^4.1.0"
+    "typescript": "^4.2.3"
   },
   "jest": {
     "preset": "react-native"

example/src/AppInner.tsx

@@ -15,7 +15,7 @@ import {
   Button,
   Text,
   Provider as PaperProvider,
-  Switch,
+  // Switch,
   DefaultTheme,
   DarkTheme,
   useTheme,
@@ -32,7 +32,7 @@ import {
 } from 'react-native-paper-dates';
 
 function AppInner({
-  onToggleDarkMode,
+  // onToggleDarkMode,
   dark,
 }: {
   onToggleDarkMode: () => any;
@@ -142,7 +142,10 @@ function AppInner({
       >
         <View style={styles.content}>
           <View style={styles.titleContainer}>
-            <Image source={require('./schedule.png')} style={styles.logo} />
+            <Image
+              source={require('./schedule.png').default}
+              style={styles.logo}
+            />
             <Title>react-native-paper-dates</Title>
           </View>
 
@@ -156,7 +159,7 @@ function AppInner({
               webRidge
             </Text>
           </Paragraph>
-          <Paragraph>Example version: 0.4.0</Paragraph>
+          <Paragraph>Example version: 0.4.1</Paragraph>
         </View>
         <View style={styles.content}>
           <Button
@@ -184,17 +187,17 @@ function AppInner({
             },
           ]}
         >
-          <View style={styles.switchContainer}>
-            <Text style={[styles.switchLabel, { ...theme.fonts.medium }]}>
-              Dark mode
-            </Text>
-            <View style={styles.switchSpace} />
-            <Switch value={dark} onValueChange={onToggleDarkMode} />
-          </View>
-          <Enter />
-          <Enter />
-          <Enter />
-          <Enter />
+          {/*<View style={styles.switchContainer}>*/}
+          {/*  <Text style={[styles.switchLabel, { ...theme.fonts.medium }]}>*/}
+          {/*    Dark mode (does not wo*/}
+          {/*  </Text>*/}
+          {/*  <View style={styles.switchSpace} />*/}
+          {/*  <Switch value={dark} onValueChange={onToggleDarkMode} />*/}
+          {/*</View>*/}
+          {/*<Enter />*/}
+          {/*<Enter />*/}
+          {/*<Enter />*/}
+          {/*<Enter />*/}
           <View>
             <Row>
               <Label>Date</Label>
@@ -221,9 +224,9 @@ function AppInner({
               <Label>Dates</Label>
               <Text>
                 {dates
-                  ?.map((date) => date && dateFormatter.format(date))
+                  ?.map((d) => dateFormatter.format(d))
                   .filter(Boolean)
-                  .join(', ') ?? '-'}
+                  .join(', ') || '-'}
               </Text>
             </Row>
           </View>
@@ -413,7 +416,10 @@ export default function AppWithProviders() {
           <style type="text/css">{`
           @font-face {
             font-family: 'MaterialCommunityIcons';
-            src: url(${require('react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf')}) format('truetype');
+            src: url(${
+              require('react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf')
+                .default
+            }) format('truetype');
           }
         `}</style>
         ) : null}

example/tsconfig.json

@@ -17,7 +17,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "react-jsx",
+    "noFallthroughCasesInSwitch": true
   },
   "include": [
     "src"