Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DatePickerAndroid styling not working when provide mode prop #13538

Closed
bennygenel opened this issue Apr 17, 2017 · 6 comments
Closed

DatePickerAndroid styling not working when provide mode prop #13538

bennygenel opened this issue Apr 17, 2017 · 6 comments
Labels
Resolution: Locked This issue was locked by the bot.

Comments

@bennygenel
Copy link

Description

On Android when using native style.xml DatePickerAndroid returns to theme default colors when using mode prop. When you don't use it at all it works fine.

mmazzarolo/react-native-modal-datetime-picker#29

Reproduction Steps and Sample Code

style.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorAccent">@color/mainRed</item>
    </style>
    <style name="Dialog.Theme" parent="Theme.AppCompat.Light.Dialog">
        <item name="colorAccent">@color/mainRed</item>
    </style>

</resources>
DatePickerAndroid.open(); // Styling works fine
DatePickerAndroid.open({mode: 'calendar'}); // Styling is not working
DatePickerAndroid.open({mode: 'spinner'}); // Styling is not working

Solution

Don't know much about native code but I assume that when using mode prop something overrides the styling to default theme.

Additional Information

  • React Native version: "0.43.3"
  • Platform: Android
  • Development Operating System: MacOS
  • Dev tools: Android Studio
@PARAGJYOTI
Copy link

@bennygenel Have no Idea why its not working . But you can make your android theme in android studio .
Go to tools>Android>Theme Editor and you can create your own theme . I built mine and its working everywhere. First just import the project to android studio. You dont have to touch any files , the studio itself will do it .

@bennygenel
Copy link
Author

@PARAGJYOTI I already created my own theme. As you can see I set the theme on style.xml and it works fine too unless I use mode prop on DatePickerAndroid as I mentioned before.

@jtibbertsma
Copy link

This issue appeared for me when updating from 0.43.0 to 0.44.0

@hramos
Copy link
Contributor

hramos commented Jul 25, 2017

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

  • Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
  • If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
  • Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

@hramos hramos added the Icebox label Jul 25, 2017
@hramos hramos closed this as completed Jul 25, 2017
@khrizt
Copy link

khrizt commented Feb 1, 2018

Ok, I found out how to apply styles when mode prop is set. The problem was the style names, when the mode prop is set react native looks for specific styles in the resources. For spinner mode:

<style name="SpinnerDatePickerDialog" parent="android:Theme.Material.Light.Dialog">
    <item name="android:datePickerStyle">@style/MyDatePicker</item>
    <item name="android:colorAccent">@color/colorPrimary</item>
    <item name="android:colorControlNormal">@color/colorPrimary</item>
</style>

<style name="MyDatePicker" parent="android:Widget.Material.DatePicker">
    <item name="android:datePickerMode">spinner</item>
</style>

No the style with the datePickerMode attribute, without it android renders the standard mode not the spinner mode (don't know why). These are the style attributes I found that work, maybe there are others but I haven't found them. Another thing I have not been able to set is the title, but probably this should be done in react-native.

And for calendar mode:

<style name="CalendarDatePickerDialog" parent="android:Theme.Material.Light.Dialog">
    <item name="android:headerBackground">@color/colorPrimary</item>
    <item name="android:colorControlNormal">@color/colorPrimary</item>
    <item name="android:colorControlHighlight">@color/colorPrimary</item>
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorAccent">@color/colorPrimary</item>
    <item name="textColor">@color/colorPrimary</item>
</style>

These style attributes are not fully tested but I think they work. I hope this works for other people.

@m-vdb
Copy link

m-vdb commented May 15, 2018

thank you @khrizt your solution for the spinner works like a charm! Haven't tested the calendar version.

@facebook facebook locked as resolved and limited conversation to collaborators Jul 25, 2018
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 25, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests

7 participants