rn-modal-date-picker

plateform independant date picker modal for react native

Installation

1npm install rn-modal-date-picker

sample

Usage

1import * as React from 'react';
2
3import { StyleSheet, View, Text, Button } from 'react-native';
4import DatePickerModal from 'rn-modal-date-picker';
5
6export default function App() {
7  const [date, setDate] = React.useState(new Date());
8  const [show, setShow] = React.useState(false);
9
10  const openDatePicker = () => {
11    setShow(true);
12  };
13
14  const closeDatePicker = () => {
15    setShow(false);
16  };
17
18  return (
19    <View style={styles.container}>
20      <DatePickerModal
21        date={date}
22        setDate={setDate}
23        onHideModal={closeDatePicker}
24        isVisible={show}
25        mainColor="#ddd111"
26        contrastColor="#fff"
27        fontFamily="PublicSans_Light"
28        disablePast={true}
29        disableFuture = {true}
30      />
31      <Button title="Open" onPress={openDatePicker} />
32      <Text>{date.toDateString()}</Text>
33    </View>
34  );
35}
36
37const styles = StyleSheet.create({
38  container: {
39    flex: 1,
40    alignItems: 'center',
41    justifyContent: 'center',
42  },
43  box: {
44    width: 60,
45    height: 60,
46    marginVertical: 20,
47  },
48});
49
50// ...