iOS title and buttons style personnalization

[Okipa]

Hey mmazzarolo, Your package is working very fine and it globally looks pretty, especially on Android. On iOS, title and buttons are not customizable and it would be great to have the possibility to change the font color and size of the title and the confirm and cancel buttons for example. The background color of the modals could be great to custom too !

Native iOS modal

In your package, it looks like the native modal buttons but they are bigger than on the native modal. Moreover, the cancel button has a bold font weight and not the confirm one. If everybody could customize this, that would be awesome (and your package would become perfect ;) )

Your package modal

Last thing, the cancel button is separated from the modal and (in my opinion), it would far prettier if it would looks like the native modal (elegantly separated from the confirm button by a border as in the native iOS modal). What do you think about give us the possibility to choose between separated cancel button, native-like cancel button and no cancel button at all ?

[mmazzarolo]

@Okipa thank you for this well documented issue 👍

On iOS, title and buttons are not customizable and it would be great to have the possibility to change the font color and size of the title and the confirm and cancel buttons for example. The background color of the modals could be great to custom too !

In your package, it looks like the native modal buttons but they are bigger than on the native modal. Moreover, the cancel button has a bold font weight and not the confirm one. If everybody could customize this, that would be awesome (and your package would become perfect ;) )

I'm with you on this, more customizations + nice defaults = ❤️ I'm planning to make this component even more customizable, but at the moment I'd like to focus a bit more on react-native-animated-modal first, which in the future will become the "modal" dependency of this package.

Last thing, the cancel button is separated from the modal and (in my opinion), it would far prettier if it would looks like the native modal (elegantly separated from the confirm button by a border as in the native iOS modal).

Sounds good, but fyi I tried to mimic the design of the ActionSheetIOS instead of the modal one :)

[mmazzarolo]

Hey @Okipa ! In the end I had to edit a bit your pull request #4: you can now provide a component for the title, for the two buttons (they will be wrapped in a TouchableOpacity and for the DatePickerIOS container style.
I had to do so because:

1. There were some minor issues with the linting
2. I'd like to keep the IOS component more similar to ActionSheetIOS than to a real modal/dialog
3. It's even more customizable this way in my opinion

You can install the latest version with npm i -S react-native-modal-datetime-picker@2.0.2

Let me know if it works well for you, I'm open any kind of feedback (and critics, of course). Thanks again for the PR 👍

[Okipa]

Sorry for the late answer, I was working on a Web project these last days. I test your new version tomorrow !

[mmazzarolo]

@Okipa I'm closing the issue, feel free to re-open if you have any issue with the new release 👍

[Okipa]

Hey @mmazzarolo,

I just tested your new version and your changes are nice, however I have found some issues/questions :

• this is strange, there is no modal backdrop anymore when we call the datepicker => by the way, it could be great to have the possibility to set our custom modal backdrop-color.
• if I want to include a custom confirm button, how to manipulate the date the datepicker have just set ?
• if I customize the confirm and cancel components, the onConfirm and onCancel attributes should not be required anymore

Could give me some feedbacks about this ?

[mmazzarolo]

this is strange, there is no modal backdrop anymore when we call the datepicker => by the way

are you using the last version? I tried it just yesterday (in the example dir) and it was working fine.

it could be great to have the possibility to set our custom modal backdrop-color.

yep, the component that handles the modal already has a prop for that, I can easily add something like modalProps if you want 👍

if I want to include a custom confirm button, how to manipulate the date the datepicker have just set ?

Can you give me a concrete example? Can't you just react in the onConfirm trigger?

if I customize the confirm and cancel components, the onConfirm and onCancel attributes should not be required anymore

You can customize the component, but it will be wrapped in a touchable that handles the onConfirm and onCancel, otherwise it would be too complex to trigger them.

[Okipa]

I have installed the 1.3.0 version, removed my node_modules, clean react and npm cache, reinstalled npm dependencies and have inserted your datepicker as below (the same implementation as before)and I do not have any modal backdrop ...

<DateTimePicker
            mode='datetime'
            titleIOS='Choisissez une date'
            visible={this.state.showDatePicker}
            onConfirm={(datetime) => {
              this.handleDatePicked(datetime);
            }}
            onCancel={() => {
              this.hideDateTimePicker();
            }}
            minuteInterval={5}
            maximumDate={new Date()}
/>

By the way, the isVisible attribute precised in your readme has not been updated => it is visible now.

About the custom components, they are currently not wrapped into a Touchable component but they replace them, that's why I can't trigger your onConfirm method. You're right, the solution would be to wrap them into your Touchable component.

EDIT : here is an example of the DateTimePicker implementation with custom components :

<DateTimePicker
            mode='datetime'
            titleIOS='Choisissez une date'
            customConfirmButtonIOS={
              <View>
                <TouchableOpacity
                  style={[styles.customDatePickerConfirmButton, Theme.h_align_center]}
                  onPress={(datetime) => {
                    this.handleDatePicked(datetime) // can't get the datetime set on the DatePicker
                  }}>
                  <Text style={styles.customDatePickerConfirmText}>Confirmer</Text>
                </TouchableOpacity>
                <TouchableOpacity style={[styles.customDatePickerCancelButton, Theme.h_align_center]}
                                  onPress={() => this.hideDateTimePicker()}>
                  <Text style={styles.customDatePickerCancelText}>Annuler</Text>
                </TouchableOpacity>
              </View>
            }
            customCancelButtonIOS={<View />} // don't want to show the cancel component
            visible={this.state.showDatePicker}
            onConfirm={(datetime) => this.handleDatePicked(datetime)} // useless here
            onCancel={() => this.hideDateTimePicker()} // useless here
            minuteInterval={5}
            maximumDate={new Date()}
/>

In this case, the onConfirm method is never hit because of the replacement of the initial component by the custom one.

[mmazzarolo]

I have installed the 1.3.0 version

Wait! the last version published on npm is 2.0.3, not 1.30.
You're still on the older version ☂️

Please take a look at the code: as you can see the isVisible prop is named correctly and the custom button are wrapped in the touchable view :)

Let me know if the latest version works fine for you 👍

[Okipa]

Woooot, I was sure to install the latest version ! I just reinstalled your package with the tag @latest and everything is working well ! Pfiuuu, sorry for that ^^

[mmazzarolo]

no worries man! 👍

[pushkertiwari]

In IOS, somtimes onConfirm button is not working,ON select 17 and 16 min, it does not select