Skip to content

Commit 2df57d3

Browse files
committed
feat: explicit animation type
Closes #21
1 parent 31184da commit 2df57d3

File tree

3 files changed

+13
-2
lines changed

3 files changed

+13
-2
lines changed

README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@ function SingleDatePage() {
6767
onConfirm={onChange}
6868
saveLabel={'Save'} // optional
6969
label={'Select period'} // optional
70+
animationType={'slide'} // optional
7071
/>
7172
<Button onPress={()=> setVisible(true)}>
7273
Pick date
@@ -107,6 +108,7 @@ export default function RangeDatePage() {
107108
label={'Select period'} // optional
108109
startLabel={'From'} // optional
109110
endLabel={'To'} // optional
111+
animationType={'slide'} // optional
110112
/>
111113
<Button onPress={()=> setVisible(true)}>
112114
Pick range

example/src/App.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,10 @@ function App({
106106
label={'Select period'} // optional
107107
startLabel={'From'} // optional
108108
endLabel={'To'} // optional
109+
animationType={Platform.select({
110+
web: 'none',
111+
default: 'slide',
112+
})} // optional
109113
/>
110114
<DatePickerModal
111115
mode="single"
@@ -115,6 +119,10 @@ function App({
115119
onConfirm={onChangeSingle}
116120
saveLabel={'Save'} // optional
117121
label={'Select date'} // optional
122+
animationType={Platform.select({
123+
web: 'none',
124+
default: 'slide',
125+
})} // optional
118126
/>
119127

120128
<TimePickerModal

src/Date/DatePickerModal.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ interface DatePickerModalProps extends HeaderPickProps, BaseCalendarProps {
2626
visible: boolean
2727
onDismiss: () => any
2828
inputFormat?: string
29+
animationType?: 'slide' | 'fade' | 'none'
2930
}
3031

3132
export type LocalState = {
@@ -57,7 +58,7 @@ export function DatePickerModal(
5758
) {
5859
const theme = useTheme()
5960
const dimensions = useWindowDimensions()
60-
const { visible, onDismiss, mode, onChange, onConfirm } = props
61+
const { visible, onDismiss, mode, onChange, onConfirm, animationType } = props
6162
const anyProps = props as any
6263

6364
// use local state to add only onConfirm state changes
@@ -101,7 +102,7 @@ export function DatePickerModal(
101102

102103
return (
103104
<Modal
104-
animationType="slide"
105+
animationType={animationType}
105106
transparent={true}
106107
visible={visible}
107108
onRequestClose={onDismiss}

0 commit comments

Comments
 (0)