CODEWITHSUNDEEP
react-nativedatepickerexpo
user16524267
user16524267

Reputation:

Create a custom date picker with react native and expo

I would like to create a box to select the date as in the attached photo. What do you recommend to create something similar in react native with expo?

I tried using MUI's Mobile DatePicker API, but it doesn't work, errors occur.

DataBox

Update:

I created this box to select the date, but when I go to press it gives me an error.

BoxData

The error is the following: DataError

Upvotes: 0

Views: 8334

Answers (1)

Maxwell
Maxwell

Reputation: 546

https://www.npmjs.com/package/@react-native-community/datetimepicker

Works with Expo. Static version set at 3.x.x (something version 3). So you won't have the full functionality that is described on their docs, but you'll have enough.

expo install @react-native-community/datetimepicker

instead of npm to ensure you get the compatible version.

This library can be a bit difficult to work with. The main suggestion I have for you is to create a custom component on your own that looks like your design. Then wrap it with a TouchableOpacity and onPress set the DateTimePicker to show its modal. Grab the value you need from the onChange result, and pass it to your local state. Dont try anything fancy after that because as I mentioned earlier, the library is difficult to work with and really fights hard against any customization. It works well though and will certainly solve your problem.

Upvotes: 2

Related Questions