Add animation type for the modal

[MrGuim]

Overview

The library is reimplementing the slide animation for the modal. React native implements three types of the animation: 'slide' (current implementation), 'fade' and 'none' and the animationType from the modalPropsIOS is not changing the animation type.

The change is reimplementing the three animations and add a better typing for the modalPropsIOS.

Before - Not working code

import { useState } from 'react';
import { Button, View } from 'react-native';
import DateTimePickerModal from 'react-native-modal-datetime-picker';

const App = () => {
  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);

  const showDatePicker = () => {
    setDatePickerVisibility(true);
  };

  const hideDatePicker = () => {
    setDatePickerVisibility(false);
  };

  const handleConfirm = (date: Date) => {
    console.warn('A date has been picked: ', date);
    hideDatePicker();
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Show Date Picker" onPress={showDatePicker} />
      <DateTimePickerModal
        isVisible={isDatePickerVisible}
        mode="date"
        onConfirm={handleConfirm}
        onCancel={hideDatePicker}
        modalPropsIOS={{
          animationType: 'none' // <-- This is not working on iOS, the modal is still sliding
        }}
      />
    </View>
  );
};

export default App;

Test Plan

animationType: 'fade'	animationType: 'slide'	animationType: 'none'
ScreenRecording_08-04-2025.13.MOV	ScreenRecording_08-04-2025.12.mov	ScreenRecording_08-04-2025.11-44-39_1.MOV

After - Working code

import { useState } from 'react';
import { Button, View } from 'react-native';
import DateTimePickerModal from 'react-native-modal-datetime-picker';

const App = () => {
  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);

  const showDatePicker = () => {
    setDatePickerVisibility(true);
  };

  const hideDatePicker = () => {
    setDatePickerVisibility(false);
  };

  const handleConfirm = (date: Date) => {
    console.warn('A date has been picked: ', date);
    hideDatePicker();
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Show Date Picker" onPress={showDatePicker} />
      <DateTimePickerModal
        isVisible={isDatePickerVisible}
        mode="date"
        onConfirm={handleConfirm}
        onCancel={hideDatePicker}
        modalPropsIOS={{
          animationType: 'none' // <-- This value can be 'none', 'fade' or 'slide'
        }}
      />
    </View>
  );
};

export default App;