Home > front end >  Create a custom date picker with react native and expo
Create a custom date picker with react native and expo

Time:07-25

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.

enter image description here

CodePudding user response:

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.

  • Related