react-native-date-picker

The component supports three distinct modes to handle different user input requirements:

• React Native Timepicker: Specifically for selecting time.
• React Native Datepicker: Specifically for selecting a date.
• React Native Datetimepicker: For selecting both date and time simultaneously.

The react-native-date-picker component offers two primary ways to display the picker UI:

1. Modal: Uses the built-in modal provided by the library. This is the standard way to present a picker that overlays the current screen.
2. Inlined: The picker is rendered directly within a view or a custom-made modal. This is useful when you want to embed the picker as part of a larger form or a specific section of your UI.

The locale prop is the primary way to control the visual formatting of the picker:

• Date Order: The order of year, month, and day (e.g., YYYY-MM-DD vs DD-MM-YYYY) is determined by the locale. For example, locale='fr' sets the French preference.
• 12/24h Format (iOS): Determined by the locale prop.
• 12/24h Format (Android): By default, Android uses the device setting. To force the picker to follow the locale setting instead of the device setting, add the is24hourSource="locale" prop.

Note: Changing the locale only affects the date/time formatting; it does not change the language of the title, confirm button, or cancel button texts.

This library is compatible with Expo Development Builds, but no config plugin is required.

Note: This library cannot be used in the standard "Expo Go" app because it requires custom native code.

The package supports automatic linking. For most setups, you only need to install the package and its cocoapods dependencies, then rebuild the project using react-native run-ios or react-native run-android.

If you are using a React Native version below 0.60 or encounter issues with automatic linking, you can manually link the package by running:

npx react-native link react-native-date-picker

To launch your application on an iOS simulator, ensure Metro is running in a separate terminal, then execute the following command from the project root.

# using npm
npm run ios

# OR using Yarn
yarn ios

To change the font size of the date picker on Android, you must modify your project's styles.xml file. Add the following style block immediately above the closing </resources> tag.

Note: Changing the font size on iOS is not supported out of the box.

<style name="DatePickerTheme" parent="DatePickerBaseTheme">
    <item name="android:textSize">25sp</item>
</style>

To run the provided React Native example (Rn073), you must first ensure your environment is set up according to the React Native Environment Setup guide. The process involves starting the Metro bundler and then launching the application on an emulator or simulator.

1. Start the Metro Server

Run this from the root of the project to start the JavaScript bundler:

npm start
# OR
yarn start

2. Start the Application

Open a new terminal and run the command corresponding to your target platform:

For Android:

npm run android
# OR
yarn android

For iOS:

npm run ios
# OR
yarn ios

npm start

# In a new terminal
npm run android

After modifying your code (e.g., in App.tsx), use the following methods to reload the app and apply changes:

• Android: Press the <kbd>R</kbd> key twice or open the Developer Menu (<kbd>Ctrl</kbd> + <kbd>M</kbd> on Windows/Linux or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> on macOS) and select "Reload".
• iOS: Press <kbd>Cmd ⌘</kbd> + <kbd>R</kbd> within the iOS Simulator.

To launch your application on an Android emulator or device, ensure Metro is running in a separate terminal, then execute the following command from the project root.

# using npm
npm run android

# OR using Yarn
yarn android

Before running your application, you must start Metro, the JavaScript bundler that ships with React Native. Run this command from the root of your project in a dedicated terminal window.

# using npm
npm start

# OR using Yarn
yarn start

For non-Expo projects, you must install the CocoaPods after downloading the package and then rebuild the application. If you are using an Expo project, skip the pod install step and use the Expo run commands to rebuild.

# Install pods (skip for expo projects)
cd ios && pod install

# Rebuild for expo projects
npx expo run:android
npx expo run:ios

# Rebuild for non-expo projects
npx react-native run-android
npx react-native run-ios