React-native-modal-datetime-picker: Example for overriding button text colors for iOS

[winkelsdorf]

I read multiple times in issues or closed PRs why you don't want to allow general theming with v8 anymore and I really like the idea of having a look as close as possible to the native appearance.

But in my case the component is off native appearance as the iOS App has a default tintColor applied in AppDelegate.m by using self.window.tintColor = [UIColor ...] which tint's all alert and action sheet dialogs, except this.

From you discussion in https://github.com/mmazzarolo/react-native-modal-datetime-picker/pull/349, may you provide a snippet how to override e.g. just the text color in customHeaderIOS/customConfirmButtonIOS/customCancelButtonIOS?

[mmazzarolo]

Hey @winkelsdorf !
Thanks for starting this discussion.

I wasn't aware of the tintColor iOS setting.
Does it change just the text color of the components? Does it stay the same if dark-mode is enabled?

I guess it would be easier to just add a textColor prop at this point.

Alternatively, I'm also thinking about changing the API this way (let's use the Header as an example) in the future:

1. Add a style prop to the component. By default it will be headerStyles.
2. Export headerStyles.

In this way you will be able to override the styles of the component this way:

import React, { useState } from "react";
import { Button, View } from "react-native";
import DateTimePickerModal, { Header, headerStyles } from "react-native-modal-datetime-picker";

const Example = () => {
  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);

  const showDatePicker = () => {
    setDatePickerVisibility(true);
  };

  const hideDatePicker = () => {
    setDatePickerVisibility(false);
  };

  const handleConfirm = date => {
    console.warn("A date has been picked: ", date);
    hideDatePicker();
  };

  return (
    <View>
      <Button title="Show Date Picker" onPress={showDatePicker} />
      <DateTimePickerModal
        isVisible={isDatePickerVisible}
        mode="date"
        onConfirm={handleConfirm}
        onCancel={hideDatePicker}
        customHeaderIOS={(props) => <Header {...props} style={customHeaderStyles} />}
      />
    </View>
  );
};

const customHeaderStyles = StyleSheet.compose(headerStyles, StyleSheet.create({
  text: {
    color: "red"
  }
}))

export default Example;

How does it sound? It looks complex, but that's because it puts the responsibility of the customization entirely on the app (and not on the lib).

[winkelsdorf]

Hi @mmazzarolo!

You're very welcome, thanks for the very quick answer and your help :)

Your assumptions are both correct, it just changes the text color of the dialogs and stays the same in dark-mode.

I made two screenshoots, with a native iOS project for you:

In both I just set the tintColor in native code and launched an example Alert. No React involved.

I'm fine with both of your proposed solutions but fully agree that the 2nd one, despite looking more complex, is probably the cleaner approach (as it does not clutter this component's code) 👍

[mmazzarolo]

@winkelsdorf mind checking #369 ? :)

[winkelsdorf]

@mmazzarolo Working like a charm 👍 I commented in the PR as the exports are missing in index.js.

Example

My example code was:

...
        // properties of react-native-modal-datetime-picker as abve
        customConfirmButtonIOS={buttonProps => (
          <ConfirmButton {...buttonProps} style={customConfirmButtonStyles} />
        )}
        customCancelButtonIOS={buttonProps => (
          <CancelButton {...buttonProps} style={customCancelButtonStyles} />
        )}
...

const customConfirmButtonStyles = {
  ...confirmButtonStyles,
  text: {
    ...confirmButtonStyles.text,
    color: 'green',
  },
};

const customCancelButtonStyles = {
  ...cancelButtonStyles,
  text: {
    ...cancelButtonStyles.text,
    color: 'green',
  },
};

_Note: I used an object spread instead of compose - but thats just a style question._

Result

[mmazzarolo]

@winkelsdorf thanks so much for the review!

First of all, I didn't know you could spread the styles created with StyleSheet.create, that's nice!

Second: I updated the PR, do you mind testing if the importing works correctly from the index?
(I won't be able to test it for a while :( )

[winkelsdorf]

@mmazzarolo You're very welcome! I have to thank _you_ for your quick help! 💯

Glad I could show you a new shorthand syntax, too :)

I just saw the update and can confirm that the imports work correctly now 👍

For anybody wondering how to quickly test a PR with yarn: Here we have PR #369, so the command to checkout the PR is yarn add mmazzarolo/react-native-modal-datetime-picker#369/head.

Edit: Nice touch with the default export. My import now looks like this:

import {
  DateTimePickerModal,
  ConfirmButton,
  confirmButtonStyles,
  CancelButton,
  cancelButtonStyles,
} from 'react-native-modal-datetime-picker';

While in other cases, without override, this is also working:

import DateTimePickerModal from 'react-native-modal-datetime-picker';

[mmazzarolo]

Thanks for all the feedback and for the tips! Unless you’re in hurry, tomorrow I’ll update the README and publish a new release 👍

[winkelsdorf]

@mmazzarolo Sure, have no hurry. It's Sunday! Enjoy your evening ☺️

[mmazzarolo]

Merged 👍

[winkelsdorf]

Working! Thank you 👏