React Native DateTimePicker

When migrating from the legacy DatePickerAndroid imperative API to the RNDateTimePicker component:

• Replace date with the value prop.
• Replace minDate and maxDate with minimumDate and maximumDate.
• Replace imperative action checks (dateSetAction and dismissedAction) with the onChange callback:
  • A selection (formerly dateSetAction) is indicated when the date argument in onChange is defined.
  • A dismissal (formerly dismissedAction) is indicated when the date argument in onChange is undefined.

To customize the appearance of the Android Date and Time pickers, you must use version 8.2.0 or higher and an Expo Development build.

Configuration is handled via the @react-native-community/datetimepicker plugin in your app.json or app.config.js.

Important Rules:

• You cannot specify a color for dark mode only. To influence dark mode, you must provide values for both light and dark keys. If one is missing, the plugin will throw an error.
• The plugin validates that the property names (e.g., textColorPrimary) are valid.

After modifying your configuration, you must regenerate native code and rebuild to see changes:

npx expo prebuild -p android --clean
expo run:android

Add the @react-native-community/datetimepicker plugin to your Expo configuration to apply custom colors to the Android pickers. Use the android.datePicker and android.timePicker objects to define styles for light and dark modes.

{
  "expo": {
    "plugins": [
      [
        "@react-native-community/datetimepicker",
        {
          "android": {
            "datePicker": {
              "colorAccent": {
                "light": "#FF5722"
              },
              "textColorPrimary": {
                "light": "#FF5722"
              }
            },
            "timePicker": {
              "background": {"light": "#FF5722", "dark": "#383838"},
              "numbersBackgroundColor": {"light": "#FF5722", "dark": "#383838"}
            }
          }
        }
      ]
    ]
  }
}

To run the provided example project to see the library in action or to perform development, follow these steps in order:

1. Run yarn in the repository root.
2. Navigate to the example directory: cd example.
3. Install required pods: npx pod-install.
4. Start the Metro Bundler: yarn start.
5. Run the application for your target platform using yarn run start:ios, yarn run start:android, or yarn run start:windows.

Note for Developers: To develop on the library itself, open the project located in the example folder using Xcode or Android Studio. Changes made to the library code will be reflected in the example project.

Install the package using npm or yarn.

iOS Setup: After installation, you must run npx pod-install and then rebuild your project.

Windows Setup: Autolinking is not implemented for Windows; manual installation is required.

npm install @react-native-community/datetimepicker --save

# or

yarn add @react-native-community/datetimepicker

If you are using Expo Go, use npx expo install to ensure you get the version compatible with your Expo SDK.

If you are using a Dev Client, rebuild the Dev Client after installing. If you use expo prebuild, you can use the latest version of the module.

npx expo install @react-native-community/datetimepicker

To use Material pickers on Android, your app theme must inherit from Theme.Material3.DayNight.NoActionBar in your styles.xml file.

For advanced styling of dialogs that cannot be set at runtime, you can use the provided config plugin. This requires using an Expo development build and building a new app binary to take effect.

To manually install the DateTimePicker for Windows, follow these steps in Visual Studio 2019:

1. Add Project: Right-click your solution in Solution Explorer > Add > Existing Project. Select the .vcxproj file located at: node_modules/@react-native-community/datetimepicker/windows/DateTimePickerWindows/DateTimePickerWindows.vcxproj.
2. Add Reference: Right-click your main application project > Add > Reference... and check DateTimePickerWindows under the 'Project > Solution' tab.
3. Update pch.h: Add #include "winrt/DateTimePicker.h".
4. Update app.cpp: Add PackageProviders().Append(winrt::DateTimePicker::ReactPackageProvider()); before the InitializeComponent(); call.

When migrating from the legacy TimePickerAndroid imperative API to the RNDateTimePicker component:

• Replace hour and minute props with a single value prop (the component uses the hour and minute defined in the provided Date object).
• Replace imperative action checks (timeSetAction and dismissedAction) with the onChange callback:
  • A selection (formerly timeSetAction) is indicated when the date argument in onChange is defined.
  • A dismissal (formerly dismissedAction) is indicated when the date argument in onChange is undefined.