-
-
Notifications
You must be signed in to change notification settings - Fork 408
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: create expo plugin to customize native style (#801)
* feat: create expo plugin to customize native style * Update docs/android-styling.md Co-authored-by: Gabriel Belgamo <19699724+belgamo@users.noreply.github.com> * refactor: reduce some duplicity * refactor: change the config plugin interface * refactor: remove npmignore * chore: build plugin in CI * doc updates * make images readable on dark bg * fix lint * chore: update eslint * chore: update resource_class --------- Co-authored-by: Vojtech Novak <vonovak@gmail.com> Co-authored-by: Gabriel Belgamo <19699724+belgamo@users.noreply.github.com>
- Loading branch information
1 parent
ecd680e
commit 66235db
Showing
13 changed files
with
5,790 additions
and
171 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
module.exports = require('./plugin/build/withDateTimePickerStyles'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,71 @@ | ||
## Android Styling | ||
|
||
To use the features documented here, you need to use a [Expo Development build](https://docs.expo.dev/develop/development-builds/introduction/). | ||
|
||
Make changes as documented below and then run the following commands to see the updated colors: | ||
|
||
- `npx expo prebuild -p android --clean` (apply configuration to the native code) | ||
- `expo run:android` (build the native code) | ||
|
||
### Configuration in app.json / app.config.js | ||
|
||
```json | ||
{ | ||
"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"} | ||
} | ||
} | ||
} | ||
] | ||
} | ||
} | ||
``` | ||
|
||
It's not possible to specify a color only for dark mode. If you wish to influence dark mode color you must declare a value for both the `light` and `dark` modes. Plugin will throw an error otherwise. Plugin also validates that the color names you specify (e.g. `textColorPrimary`) are valid. | ||
|
||
### Configurable properties | ||
|
||
The following illustrations show the different styles that can be applied to the date and time pickers. | ||
|
||
| DatePickerDialog | TimePickerDialog | | ||
| -------------------------------------------------------------------------- | ------------------------------------------------------------ | | ||
| ![Date picker dialog breakdown](./images/date_picker_dialog_breakdown.png) | ![Time picker breakdown](./images/time_picker_breakdown.png) | | ||
|
||
#### DatePickerDialog | ||
|
||
| Property | Attribute Name | | ||
| ---------------------------------- | ------------------------------------------ | | ||
| colorAccent | colorAccent | | ||
| colorControlActivated | colorControlActivated | | ||
| colorControlHighlight | colorControlHighlight | | ||
| selectableItemBackgroundBorderless | android:selectableItemBackgroundBorderless | | ||
| textColor | android:textColor | | ||
| textColorPrimary | android:textColorPrimary | | ||
| textColorPrimaryInverse | android:textColorPrimaryInverse | | ||
| textColorSecondary | android:textColorSecondary | | ||
| textColorSecondaryInverse | android:textColorSecondaryInverse | | ||
| windowBackground | android:windowBackground | | ||
|
||
#### TimePickerDialog | ||
|
||
| Property | Attribute Name | | ||
| ---------------------- | ------------------------------ | | ||
| background | android:background | | ||
| headerBackground | android:headerBackground | | ||
| numbersBackgroundColor | android:numbersBackgroundColor | | ||
| numbersSelectorColor | android:numbersSelectorColor | | ||
| numbersTextColor | android:numbersTextColor | |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.