React Native DateTimePicker Styling

4.1k Views Asked by At

I am having issues styling React Native DateTimePicker. The relevant code is as follows:

import React, { ReactChild, useState } from 'react';
import DateTimePicker from '@react-native-community/datetimepicker';

const Picker = () => {
    const [currentDate, setCurrentDate] = useState(new Date());
    return (
        <DateTimePicker
          testID={'dateTimePicker'}
          value={currentDate}
          mode={'date'}
          display={'default'}
          style={styles.dateTimePicker}
          textColor={BLACK}
        />
    );
};

const styles = StyleSheet.create({
    dateTimePicker: {
    backgroundColor: 'white',
    borderRadius: 5,
    borderColor: '#C5C5C5',
    borderWidth: 1,
    marginVertical: 10,
    height: 43,
   },
})

The problem is that with the white background, the picker has a light grey background when the modal open. I need to get rid of that. Alternatively I have tried just created an input field which would trigger the picker but in that case I would need it to appear already open to the modal.

Any suggestions?

0

There are 0 best solutions below