# react-native-jalali-ios-style-datepicker

React Native Jalali IOS Style DatePicker component for both Android and iOS, using React Native Reanimated, React Native Gusture Handler

Install

yarn add react-native-redash
yarn add [email protected]
yarn add react-native-gusture-handler
yarn add react-native-jalali-ios-style-datepicker

Demo

Usage

import DatePicker from "react-native-jalali-ios-style-datepicker";

export default function App() {
  const [isOpen, setIsOpen] = useState(false);
  const [date, setDate] = useState("");

  const confirmDatePicker = (value: string) => setDate(value);
  const closeDatePicker = () => setIsOpen(false);
  const openDatePicker = () => setIsOpen(true);

  return (
    <View style={styles.container}>
      <Text onPress={openDatePicker}>Date : {date}</Text>

      <DatePicker
        isOpen={isOpen}
        close={closeDatePicker}
        callback={confirmDatePicker}
      />
    </View>
  );
}

Properties

| Prop | Default | Type | Description | | :----------------- | :-------------------------: | :---------: | :---------------------------------------------------------------------- | | callback | - | function | This is called when the user confirm the picked date or time in the UI. | | textButtonStyle | - | TextStyle | Creating custom ui for confirm button text | | confirmButtonStyle | - | ViewStyle | Creating custom ui for confirm button | | titleStyle | - | TextStyle | Creating custom ui for title text | | backdropColor | rgba(0,0,0,0.5) | string | | | pickerBgColor | white | string | | | confirmText | تایید تاریخ | string | | | title | تاریخ مورد نظرتو انتخاب کن! | string | | | isOpen | - | boolean | | | close | - | function | |