react-native-jetpack-compose-datetimepicker

A Native Date and Time Picker library for react native which uses Jetpack Compose Material3 Date and Time Pickers under the hood. It uses react Native Fabric Component (New Architecture only)

NOTE

This package uses React Natiev new architecture's Fabric Component so it'll only work if your app has new architechture enabled in android/gradle.properties file.

Installation

npm install react-native-jetpack-compose-datetimepicker

Usage

import { MaterialDatetimepicker } from 'react-native-jetpack-compose-datetimepicker';

// ...

<MaterialDatetimepicker
  defaultDate={new Date()}
  onCancel={() => console.log('cancel')}
  isVisible={true} //true|false -> manage with useState
  onConfirm={(val) => console.log(val)} // val is Date object
  confirmText="Confirm"
  displayMode="picker" // picker | input
  pickerType="date" // date | time
  themeVarient="dark" // light | dark | system    ->(default value is system means it follows system setting)
  dynamicColors={false} // true | false (default is true)
/>;

Features

• Date Picker/ Time Picker
• Inout Mode and Picker Mode
• Light and Dark Theme based support
• Dynamic Theme support based on wallpaper colors (Material You)
• Props autocompletion (Typescript)

Screenshots/Demo

Check example folder for demo code. You can run the demo using this command

yarn example

OR

npm run example

https://github.com/user-attachments/assets/7d535fbe-ad9f-4fcf-a80e-0cf0a82a767b

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library