[IOS]Datepicker somehow adds an additional field which acts as the trigger

[XaphanBael]

Question

I'm working on migrating an outdated react native into an up-to-date expo version. Using this package, i seem to run into some unexpected behaviour inside the iOS simulator (android emulator works fine).

The problem is that, once the input field is clicked, the date appears underneath it. I then have to click on that element, in order to get the date-picker to appear.

Attempting to fix this, i tried multiple versions of the package, currently i'm on version 7.6.1

Any help/ suggestions would be much appreciated.

Initial view upon loading the form

What happens once i click inside the input field

What happens when i click in the newly appeared date element, note: clicking inside the input field again does nothing

After selecting a date from the picker

Code element for this input

                    <View>
                      <TouchableOpacity
                        onPress={() => setShow(true)}
                        style={styles.date}
                      >
                        <Text style={{ fontSize: 18 }}>
                          {item.answer ? item.answer : "Kies een datum"}
                        </Text>
                        <Ionicons
                          name="calendar-outline"
                          size={25}
                          color={colors.darkBlue}
                        />
                      </TouchableOpacity>

                      {show && (<RNDateTimePicker
                        mode="date"
                        value={item.answer ? new Date(formattedDate) : new Date()}
                        onChange={(e, date) => {
                          setShow(false);
                          setFormattedDate(date);
                          handleAnswer(
                            subjectIndex,
                            questionIndex,
                            date.toLocaleDateString('nl-NL')
                          );
                        }}
                        onTouchCancel={() => setShow(false)}
                        locale="nl-NL"
                      />)}

                    </View>

[ArthurLaheyne]

I encoutered the same issue, my solution was to use the old iOS spinner display mode rather than the compact display mode which is the default display mode for recent version of iOS. I then displayed the spinner in an overlay too match the Android look

{Platform.OS === 'ios' ?
  <Overlay isVisible={show} onBackdropPress={toggleOverlay}>
    <RNDateTimePicker
      mode="date"
      value={item.answer ? new Date(formattedDate) : new Date()}
      onChange={(e, date) => {
        setShow(false);
        setFormattedDate(date);
        handleAnswer(
          subjectIndex,
          questionIndex,
          date.toLocaleDateString('nl-NL')
        );
      }}
      onTouchCancel={() => setShow(false)}
      locale="nl-NL"
      display='spinner'
    />
  </Overlay>
: show &&
  <RNDateTimePicker
    mode="date"
    value={item.answer ? new Date(formattedDate) : new Date()}
    onChange={(e, date) => {
      setShow(false);
      setFormattedDate(date);
      handleAnswer(
        subjectIndex,
        questionIndex,
        date.toLocaleDateString('nl-NL')
      );
    }}
    onTouchCancel={() => setShow(false)}
    locale="nl-NL"
  />
}

Overlay is part of the react-native-elements package

[XaphanBael]

Thanks for your reply, i applied it into the code, and added the react-native-elements package. On Android it works like before, on iOS however, although the date element does not show anymore, i get a black square in the middle of the screen.

This is the code i'm currently trying.

                    <View>
                      <TouchableOpacity
                        onPress={() => setShow(true)}
                        style={styles.date}
                      >
                        <Text style={{ fontSize: 18 }}>
                          {item.answer ? item.answer : "Kies een datum"}
                        </Text>
                        <Ionicons
                          name="calendar-outline"
                          size={25}
                          color={colors.darkBlue}
                        />
                      </TouchableOpacity>

                      {Platform.OS === 'ios' ?
                        <Overlay isVisible={show} onBackdropPress={() => setShow(false)}>
                          <RNDateTimePicker
                            mode="date"
                            value={item.answer ? new Date(formattedDate) : new Date()}
                            onChange={(e, date) => {
                              setShow(false);
                              setFormattedDate(date);
                              handleAnswer(
                                subjectIndex,
                                questionIndex,
                                date.toLocaleDateString('nl-NL')
                              );
                            }}
                            onTouchCancel={() => setShow(false)}
                            locale="nl-NL"
                            display='spinner'
                          />
                        </Overlay>
                      : show &&
                        <RNDateTimePicker
                          mode="date"
                          value={item.answer ? new Date(formattedDate) : new Date()}
                          onChange={(e, date) => {
                            setShow(false);
                            setFormattedDate(date);
                            handleAnswer(
                              subjectIndex,
                              questionIndex,
                              date.toLocaleDateString('nl-NL')
                            );
                          }}
                          onTouchCancel={() => setShow(false)}
                          locale="nl-NL"
                        />
                      }
                    </View>

[ArthurLaheyne]

We almost see the spinner. Try to render it outside the overlay, or configure the overlay with a background color maybe.

[XaphanBael]

Thanks, i added overlayStyle={{ backgroundColor: 'rgba(255, 255, 255, 1)' }} and removed setShow(false); in the onChange and now it's working like a charm.