datetimepicker icon indicating copy to clipboard operation
datetimepicker copied to clipboard

iOS has wrapper around the picker when setting background colour

Open devesmee opened this issue 4 months ago • 2 comments

When adding a background colour to the DateTimePicker, it is almost as if the picker itself is a separate element. I would have expected the DateTimePicker's background to be the same colour throughout, not have light parts on the sides that make it seem like there's a wrapper view around it. This also differs on the length of the input date. Any ideas on how to fix? See screenshots and code below

Image Image
<DateTimePicker
    style={SharedStyles.datePicker}
    display={Platform.OS === 'android' ? 'calendar' : 'compact'}
    textColor='#002A32'
    accentColor='#002A32'
    themeVariant="light"
    testID="dateTimePicker"
    value={date}
    mode={'date'}
    maximumDate={currentDate}
    onChange={setPickedDate}
/>

// Style
datePicker: {
    borderRadius: 10,
    backgroundColor: '#FFCF70',
    color: '#002A32',
},

// In package.json
"@react-native-community/datetimepicker": "^8.4.1",

devesmee avatar Aug 22 '25 14:08 devesmee