fix: time picker initial value problem, locale problem and improve pe…

…rformance

.eslintrc.json

@@ -1,4 +1,7 @@
 {
   "extends": "@react-native-community",
-  "ignorePatterns": [".*.js", ".*.ts", "node_modules/", "lib/", "example/"]
+  "ignorePatterns": [".*.js", ".*.ts", "node_modules/", "lib/", "example/"],
+  "rules": {
+    "react/react-in-jsx-scope": "off"
+  }
 }

declarations.d.ts

@@ -0,0 +1 @@
+/// <reference types="@testing-library/jest-native" />

example/.gitignore

@@ -0,0 +1,38 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+expo-env.d.ts
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+app-example

example/README.md

@@ -0,0 +1,50 @@
+# Welcome to your Expo app 👋
+
+This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
+
+## Get started
+
+1. Install dependencies
+
+   ```bash
+   npm install
+   ```
+
+2. Start the app
+
+   ```bash
+    npx expo start
+   ```
+
+In the output, you'll find options to open the app in a
+
+- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
+- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
+- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
+- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
+
+You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
+
+## Get a fresh project
+
+When you're ready, run:
+
+```bash
+npm run reset-project
+```
+
+This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
+
+## Learn more
+
+To learn more about developing your project with Expo, look at the following resources:
+
+- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
+- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
+
+## Join the community
+
+Join our community of developers creating universal apps.
+
+- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
+- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.

example/app.json

@@ -6,27 +6,38 @@
     "version": "1.0.0",
     "githubUrl": "https://github.com/farhoudshapouran/react-native-ui-datepicker",
     "orientation": "portrait",
-    "icon": "./assets/icon.png",
-    "userInterfaceStyle": "light",
-    "splash": {
-      "image": "./assets/splash.png",
-      "resizeMode": "contain",
-      "backgroundColor": "#ffffff"
-    },
-    "assetBundlePatterns": ["**/*"],
+    "icon": "./assets/images/icon.png",
+    "scheme": "myapp",
+    "userInterfaceStyle": "automatic",
+    "newArchEnabled": true,
     "ios": {
       "supportsTablet": true
     },
     "android": {
       "adaptiveIcon": {
-        "foregroundImage": "./assets/adaptive-icon.png",
+        "foregroundImage": "./assets/images/adaptive-icon.png",
         "backgroundColor": "#ffffff"
       }
     },
     "web": {
-      "favicon": "./assets/calendar.png",
-      "themeColor": "#FFFFFF",
-      "display": "fullscreen"
+      "bundler": "metro",
+      "output": "static",
+      "favicon": "./assets/images/favicon.png"
+    },
+    "plugins": [
+      "expo-router",
+      [
+        "expo-splash-screen",
+        {
+          "image": "./assets/images/splash-icon.png",
+          "imageWidth": 200,
+          "resizeMode": "contain",
+          "backgroundColor": "#ffffff"
+        }
+      ]
+    ],
+    "experiments": {
+      "typedRoutes": true
     }
   }
 }

example/app/+not-found.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Link, Stack } from 'expo-router';
+import { StyleSheet, View, Text } from 'react-native';
+
+export default function NotFoundScreen() {
+  return (
+    <>
+      <Stack.Screen options={{ title: 'Oops!' }} />
+      <View style={styles.container}>
+        <Text>This screen doesn't exist.</Text>
+        <Link href="/" style={styles.link}>
+          <Text>Go to home screen!</Text>
+        </Link>
+      </View>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 20,
+  },
+  link: {
+    marginTop: 15,
+    paddingVertical: 15,
+  },
+});

example/app/_layout.tsx

@@ -0,0 +1,48 @@
+import {
+  DarkTheme,
+  DefaultTheme,
+  ThemeProvider,
+} from '@react-navigation/native';
+import { useFonts } from 'expo-font';
+import { Slot, Stack } from 'expo-router';
+import * as SplashScreen from 'expo-splash-screen';
+import { StatusBar } from 'expo-status-bar';
+import { useEffect } from 'react';
+import 'react-native-reanimated';
+import { ReactScan } from 'react-scan/native';
+
+import { useColorScheme } from '@/hooks/useColorScheme';
+
+// Prevent the splash screen from auto-hiding before asset loading is complete.
+SplashScreen.preventAutoHideAsync();
+
+export default function RootLayout() {
+  const colorScheme = useColorScheme();
+  const [loaded] = useFonts({
+    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
+  });
+
+  useEffect(() => {
+    if (loaded) {
+      SplashScreen.hideAsync();
+    }
+  }, [loaded]);
+
+  if (!loaded) {
+    return null;
+  }
+
+  return (
+    // <ReactScan
+    //   options={{
+    //     enabled: true,
+    //     log: true,
+    //     animationWhenFlashing: 'fade-out',
+    //   }}
+    // >
+    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
+      <Slot />
+      <StatusBar style="auto" />
+    </ThemeProvider>
+  );
+}

example/src/App.tsx → example/app/index.tsx

@@ -7,9 +7,9 @@ import {
   TouchableOpacity,
   Pressable,
 } from 'react-native';
-import ThemeSelector, { ITheme } from './components/ThemeSelector';
-import LocaleSelector from './components/LocaleSelector';
-import GithubLink from './components/GithubLink';
+import ThemeSelector, { ITheme } from '@/components/ThemeSelector';
+import LocaleSelector from '@/components/LocaleSelector';
+import GithubLink from '@/components/GithubLink';
 import BouncyCheckbox from 'react-native-bouncy-checkbox';
 import DateTimePicker, { DateType, ModeType } from 'react-native-ui-datepicker';
 import dayjs from 'dayjs';
@@ -30,7 +30,7 @@ const Themes: ITheme[] = [
   { mainColor: '#FAD7DD', activeTextColor: '#932338' },
 ];
 
-export default function App() {
+export default function MainPage() {
   const [mode, setMode] = useState<ModeType>('single');
   const [timePicker, setTimePicker] = useState(false);
 
@@ -55,7 +55,7 @@ export default function App() {
   );
 
   const onChange = useCallback(
-    (params) => {
+    (params: any) => {
       if (mode === 'single') {
         setDate(params.date);
       } else if (mode === 'range') {
@@ -157,8 +157,9 @@ export default function App() {
           style={{
             flexDirection: 'row',
             alignItems: 'center',
-            gap: 10,
             marginBottom: 20,
+            gap: 10,
+            paddingHorizontal: 120,
           }}
         >
           <BouncyCheckbox
@@ -169,11 +170,9 @@ export default function App() {
               fontSize: 14,
               color: '#000',
               marginLeft: -8,
-              textDecorationLine: 'none',
             }}
             useNativeDriver={false}
             isChecked={timePicker}
-            disableBuiltInState
             onPress={() => setTimePicker(!timePicker)}
             disabled={mode !== 'single'}
           />

example/src/components/GithubLink.tsx → example/components/GithubLink.tsx

@@ -22,7 +22,7 @@ export default function GithubLink() {
         accessibilityLabel="Check repository on GitHub"
       >
         <Image
-          source={require('../../assets/github-logo.png')}
+          source={require('../assets/images/github-logo.png')}
           style={styles.githubLogo}
         />
         <Text style={styles.githubText}>Check repository on GitHub</Text>

example/src/components/LocaleSelector.tsx → example/components/LocaleSelector.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 import { StyleSheet, View, Text, Pressable } from 'react-native';
 
 const Locales = ['en', 'de', 'es', 'fr', 'tr'];
@@ -10,12 +10,12 @@ type Props = {
   activeTextColor?: string;
 };
 
-export default function LocaleSelector({
+const LocaleSelector = ({
   locale,
   setLocale,
   mainColor,
   activeTextColor,
-}: Props) {
+}: Props) => {
   return (
     <View style={styles.localeContainer}>
       <Text
@@ -55,7 +55,9 @@ export default function LocaleSelector({
       ))}
     </View>
   );
-}
+};
+
+export default memo(LocaleSelector);
 
 const styles = StyleSheet.create({
   localeContainer: {

example/src/components/ThemeSelector.tsx → example/components/ThemeSelector.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 import { StyleSheet, View, Pressable } from 'react-native';
 
 export interface ITheme {
@@ -11,7 +11,7 @@ type Props = {
   setTheme: (theme: ITheme) => void;
 };
 
-export default function ThemeSelector({ themes = [], setTheme }: Props) {
+const ThemeSelector = ({ themes = [], setTheme }: Props) => {
   return (
     <View style={styles.themeContainer}>
       {themes.map((item, index) => (
@@ -31,7 +31,9 @@ export default function ThemeSelector({ themes = [], setTheme }: Props) {
       ))}
     </View>
   );
-}
+};
+
+export default memo(ThemeSelector);
 
 const styles = StyleSheet.create({
   themeContainer: {