feat: create expo plugin to customize native style

[brunohkbx]

Summary

This PR is a proposal to implement an expo plugin to be able to customize both Android native components DatePickerDialog and TimePickerDialog.

Resolves #20

References https://www.tutorialsbuzz.com/2019/09/android-datepicker-dialog-styling-kotlin.html https://www.tutorialsbuzz.com/2019/09/android-timepicker-dialog-styling.html

Test Plan

DatePickerDialog	TimePickerDialog

styles.xml

Entries added in the style <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

<item name="android:datePickerDialogTheme">@style/DatePickerDialogTheme</item>
<item name="android:timePickerStyle">@style/TimePickerTheme</item>

New style entries added

<style name="DatePickerDialogTheme" parent="Theme.AppCompat.Light.Dialog">
  <item name="colorAccent">@color/datePicker_colorAccent</item>
  <item name="colorControlActivated">@color/datePicker_colorControlActivated</item>
  <item name="colorControlHighlight">@color/datePicker_colorControlHighlight</item>
  <item name="android:textColor">@color/datePicker_textColor</item>
  <item name="android:textColorPrimary">@color/datePicker_textColorPrimary</item>
  <item name="android:textColorSecondary">@color/datePicker_textColorSecondary</item>
  <item name="android:windowBackground">@color/datePicker_windowBackground</item>
</style>

<style name="TimePickerTheme" parent="android:Widget.Material.Light.TimePicker">
  <item name="android:background">@color/timePicker_background</item>
</style>

colors.xml

<resources>
  <color name="datePicker_colorAccent">...</color>
  <color name="datePicker_colorControlActivated">...</color>
  <color name="datePicker_colorControlHighlight">...</color>
  <color name="datePicker_textColor">...</color>
  <color name="datePicker_textColorPrimary">...</color>
  <color name="datePicker_textColorSecondary">...</color>
  <color name="datePicker_windowBackground">...</color>
  <color name="timePicker_background">...</color>
</resources>

values-night/colors.xml

<resources>
  <color name="datePicker_colorAccent">...</color>
  <color name="datePicker_colorControlActivated">...</color>
  <color name="datePicker_colorControlHighlight">...</color>
  <color name="datePicker_textColor">...</color>
  <color name="datePicker_textColorPrimary">...</color>
  <color name="datePicker_textColorSecondary">...</color>
  <color name="datePicker_windowBackground">...</color>
  <color name="timePicker_background">...</color>
</resources>

What's required for testing (prerequisites)?

1. First of, set up a new expo project with expo init
2. Install this library with expo install @react-native-community/datetimepicker
3. Configure the new plugin in app.json/app.config.js as described in the new documentation

What are the steps to reproduce (after prerequisites)?

You should see the new styles applied to either a RNDateTimePicker with mode="date" or mode="time"

Compatibility

OS	Implemented
iOS	❌
Android	✅

Checklist

• [x] I have tested this on a device and a simulator
• [x] I added the documentation in README.md
• [x] I updated the typed files (TS and Flow)
• [ ] I added a sample use of the API in the example project (example/App.js)
• [ ] I have added automated tests, either in JS or e2e tests, as applicable

[Haukez]

I guess we'll have to wait until like 2025.

[mribbons]

@brunohkbx anything we can do to help move this forward?

[vonovak]

To give an answer to @mribbons and @Haukez - to move a stale PR forward, you can fork the original branch, address the comments from the review, write docs, test the implementation and submit a new PR 🙂.

This PR will be merged soon.

Thank you @brunohkbx!

[vonovak]

:tada: This issue has been resolved in version 8.2.0 :tada:

If this package helps you, consider sponsoring us! :rocket: