React native paper dates presentationStyle not working

171 Views Asked by At

I am using react native paper dates for my calendar modal, but it pops up as full screen instead of a modal

<View
            className="flex rounded-2xl justify-center items-center absolute"
            style={{
              height: pixelsToVh(30),
              right: pixelsToVw(0),
              top: pixelsToVh(10),
              width: pixelsToVw(50),
              backgroundColor: theme.colors.inputBackground,
            }}
          >
            <IconButton icon="calendar-range" onPress={() => setOpen(true)} />

            <DatePickerModal
              locale="en"
              mode="single"
              visible={open}
              onDismiss={onDismissSingle}
              date={date}
              onConfirm={onConfirmSingle}
              presentationStyle="pageSheet"
              inputEnabled={false}
              validRange={{ endDate: new Date() }}
            />
</View>

I have tried using presentationStyle prop as per https://web-ridge.github.io/react-native-paper-dates/docs/date-picker/single-date-picker . I think presentationStyle prop should do it, but it does not do anything.

1

There are 1 best solutions below

0
On

Not a solution but I found the reason for this not working. Its supposed to come into effect only in ios. For androids, its always 'overFullScreen' irrespective of what values we provide. Not sure why such hard coding.

This is in the source code:

const isPageSheet = presentationStyle === 'pageSheet' && Platform.OS === 'ios';

presentationStyle={isPageSheet ? 'pageSheet' : 'overFullScreen'}