feat: add DatePicker

example/package.json

@@ -12,6 +12,9 @@
     "@faker-js/faker": "^8.0.2",
     "@quidone/react-native-wheel-picker-feedback": "^2.0.0",
     "@react-native-picker/picker": "2.9.0",
+    "@react-navigation/elements": "^2.5.2",
+    "@react-navigation/native": "^7.1.14",
+    "@react-navigation/native-stack": "^7.3.21",
     "@rozhkov/react-useful-hooks": "^1.0.9",
     "expo": "^52.0.41",
     "expo-splash-screen": "~0.29.22",
@@ -21,7 +24,10 @@
     "react-native": "0.76.7",
     "react-native-builder-bob": "^0.38.4",
     "react-native-elements": "^4.0.0-rc.2",
+    "react-native-gesture-handler": "~2.20.2",
+    "react-native-reanimated": "~3.16.1",
     "react-native-safe-area-context": "4.12.0",
+    "react-native-screens": "~4.4.0",
     "react-native-web": "~0.19.10"
   },
   "devDependencies": {

example/src/App.tsx

@@ -1,38 +1,13 @@
 import * as React from 'react';
-import {ScrollView, StyleSheet} from 'react-native';
-import {PickerConfigProvider} from './picker-config';
-import {Box} from './components/base';
-import {
-  AvatarCustomizedPickerBlockExample,
-  CompareWithNativeIOSBlockExample,
-  SimplePickerBlockExample,
-} from './components/example-blocks';
+import WheelPickerFeedback from '@quidone/react-native-wheel-picker-feedback';
+import {NativeFeedbackProvider, RootNavigation} from './snack';
 
 const App = () => {
   return (
-    <ScrollView contentContainerStyle={styles.contentContainer}>
-      <SimplePickerBlockExample />
-      <AvatarCustomizedPickerBlockExample />
-      <CompareWithNativeIOSBlockExample />
-      <Box height={100} />
-    </ScrollView>
+    <NativeFeedbackProvider module={WheelPickerFeedback}>
+      <RootNavigation />
+    </NativeFeedbackProvider>
   );
 };
 
-const styles = StyleSheet.create({
-  contentContainer: {
-    paddingVertical: 60,
-    paddingHorizontal: 20,
-    alignItems: 'center',
-  },
-});
-
-const Providers = () => {
-  return (
-    <PickerConfigProvider>
-      <App />
-    </PickerConfigProvider>
-  );
-};
-
-export default Providers;
+export default App;

example/src/snack/contants.ts

@@ -0,0 +1,2 @@
+export const WP_FEEDBACK_GITHUB_URL =
+  'https://github.com/quidone/react-native-wheel-picker-feedback';

example/src/snack/get-random-number.ts

@@ -0,0 +1,7 @@
+export const getRandomNumber = (currentValue: number, dataCount: number) => {
+  let randomValue;
+  do {
+    randomValue = Math.floor(Math.random() * dataCount);
+  } while (randomValue === currentValue);
+  return randomValue;
+};

example/src/snack/index.ts

@@ -0,0 +1,2 @@
+export {RootNavigation} from './navigator';
+export {NativeFeedbackProvider} from './native-api-provider';

example/src/snack/native-api-provider/NativeFeedbackProvider.tsx

@@ -0,0 +1,38 @@
+import React, {createContext, type PropsWithChildren, useContext} from 'react';
+
+const NativeFeedbackModuleContext = createContext<
+  NativeFeedbackModule | 'NOT_SUPPORT_IN_SNACK'
+>('NOT_SUPPORT_IN_SNACK');
+
+type NativeFeedbackModule = {
+  triggerImpact: () => void;
+  triggerSound: () => void;
+  triggerSoundAndImpact: () => void;
+};
+
+type NativeFeedbackProviderProps = PropsWithChildren<{
+  module: NativeFeedbackModule | 'NOT_SUPPORT_IN_SNACK';
+}>;
+
+const NativeFeedbackProvider = ({
+  module,
+  children,
+}: NativeFeedbackProviderProps) => {
+  return (
+    <NativeFeedbackModuleContext.Provider value={module}>
+      {children}
+    </NativeFeedbackModuleContext.Provider>
+  );
+};
+
+export default NativeFeedbackProvider;
+
+export const useNativeFeedbackModule = () => {
+  const value = useContext(NativeFeedbackModuleContext);
+  if (value === undefined) {
+    throw new Error(
+      'useNativeFeedbackModule must be called from within NativeFeedbackProvider!',
+    );
+  }
+  return useContext(NativeFeedbackModuleContext)!;
+};

example/src/snack/native-api-provider/index.ts

@@ -0,0 +1,4 @@
+export {
+  default as NativeFeedbackProvider,
+  useNativeFeedbackModule,
+} from './NativeFeedbackProvider';

example/src/snack/navigator/RootNavigator.tsx

@@ -0,0 +1,22 @@
+import {createStaticNavigation} from '@react-navigation/native';
+import {createNativeStackNavigator} from '@react-navigation/native-stack';
+import {SimplePickerScreen} from '../screens/simple-picker';
+import {MainScreen} from '../screens/main';
+import {SimplePickerAndIOSPickerScreen} from '../screens/simple-picker-and-ios-picker';
+import {CustomizedPickerScreen} from '../screens/customized-picker';
+import {SimpleDatePickerScreen} from '../screens/simple-date-picker';
+import {ControlSimpleUsage} from '../screens/control-simple-usage';
+
+// @ts-ignore
+const RootStackNavigator = createNativeStackNavigator({
+  screens: {
+    Main: MainScreen,
+    SimplePicker: SimplePickerScreen,
+    SimplePickerAndIOSPicker: SimplePickerAndIOSPickerScreen,
+    CustomizedPicker: CustomizedPickerScreen,
+    SimpleDatePicker: SimpleDatePickerScreen,
+    ControlSimpleUsage: ControlSimpleUsage,
+  },
+});
+
+export const RootNavigation = createStaticNavigation(RootStackNavigator);

example/src/snack/navigator/index.ts

@@ -0,0 +1 @@
+export {RootNavigation} from './RootNavigator';

example/src/picker-config/PickerConfigPanel.tsx → example/src/snack/props-changer/PickerPropsChangerPanel.tsx

@@ -1,61 +1,91 @@
 import React, {memo} from 'react';
 import {Linking, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
-import {ListItemCheckBox, Divider} from '../components/base';
-import {usePickerConfig} from './PickerConfigProvider';
-import {WP_FEEDBACK_GITHUB_URL} from '../contants';
+import {ListItemCheckBox, Divider} from '../ui-base';
 import {ButtonGroup} from 'react-native-elements';
 import {useInit} from '@rozhkov/react-useful-hooks';
+import {usePickerPropsChanger} from './PickerPropsChangerProvider';
+import {WP_FEEDBACK_GITHUB_URL} from '../contants';
+
+type PickerPropsChangerPanelProps = {
+  hideSound?: boolean;
+  hideImpact?: boolean;
+  hideVirtualized?: boolean;
+};
 
-const PickerConfigPanel = () => {
+const PickerPropsChangerPanel = ({
+  hideImpact,
+  hideSound,
+  hideVirtualized,
+}: PickerPropsChangerPanelProps) => {
   const {
     enabledVirtualized,
     enabledSound,
     enabledImpact,
     readOnly,
+    enableScrollByTapOnItem,
     visibleItemCount,
     toggleVirtualized,
     toggleSound,
     toggleImpact,
     toggleReadOnly,
+    toggleScrollByTapOnItem,
     changeVisibleItemCount,
-  } = usePickerConfig();
+  } = usePickerPropsChanger();
 
   const visibleItemCounts = useInit(() => ['1', '3', '5', '7', '9']);
 
   return (
     <View style={styles.root}>
       <Divider />
-      <ListItemCheckBox
-        title={'Sound'}
-        value={enabledSound}
-        onToggle={toggleSound}
-      />
-      <Divider />
-      <ListItemCheckBox
-        title={'Impact'}
-        value={enabledImpact}
-        onToggle={toggleImpact}
-      />
-      <Divider />
-      <ListItemCheckBox
-        title={'Virtualized'}
-        value={enabledVirtualized}
-        onToggle={toggleVirtualized}
-      />
-      <Divider />
+      {!hideSound && (
+        <>
+          <ListItemCheckBox
+            title={'Sound'}
+            value={enabledSound}
+            onToggle={toggleSound}
+          />
+          <Divider />
+        </>
+      )}
+      {!hideImpact && (
+        <>
+          <ListItemCheckBox
+            title={'Impact'}
+            value={enabledImpact}
+            onToggle={toggleImpact}
+          />
+          <Divider />
+        </>
+      )}
+      {!hideVirtualized && (
+        <>
+          <ListItemCheckBox
+            title={'Virtualized'}
+            value={enabledVirtualized}
+            onToggle={toggleVirtualized}
+          />
+          <Divider />
+        </>
+      )}
       <ListItemCheckBox
         title={'readOnly'}
         value={readOnly}
         onToggle={toggleReadOnly}
       />
       <Divider />
+      <ListItemCheckBox
+        title={'enableScrollByTapOnItem'}
+        value={enableScrollByTapOnItem}
+        onToggle={toggleScrollByTapOnItem}
+      />
+      <Divider />
       <View style={styles.buttonGroupListItem}>
         <Text style={{fontSize: 16}}>Visible Count:</Text>
         <ButtonGroup
           buttons={visibleItemCounts}
           selectedIndex={visibleItemCounts.indexOf(`${visibleItemCount}`)}
           onPress={(value) => {
             changeVisibleItemCount(parseInt(visibleItemCounts[value]!));
           }}
           containerStyle={styles.buttonGroupContainer}
         />
@@ -85,7 +115,7 @@
   buttonGroupListItem: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingVertical: 8,
+    paddingVertical: 0,
     justifyContent: 'space-between',
   },
   buttonGroupContainer: {
@@ -96,4 +126,4 @@
   },
 });
 
-export default memo(PickerConfigPanel);
+export default memo(PickerPropsChangerPanel);