How to add icon to the date picker of nativebase components react native

Question

I am using date picker component from native base UI component library is there any prop that can be used to display Icons.

Answer 1

There's not a native way to display an icon on Datepicker yet.

But you can do something like this:

<View>
    <Text style={styles.label}>Birth Date</Text>
    <View style={styles.datePickerInput}
    >
        <DatePicker
            ref={datePicker}
            maximumDate={new Date()}
            locale="en"
            modalTransparent={false}
            animationType="fade"
            androidMode="spinner"
            placeHolderText="Select a date"
            placeHolderTextStyle={{ color: '#d3d3d3', fontFamily: 'default' }}
            textStyle={{ color: '#222', fontFamily: 'default', fontSize: 15 }}
            disabled={false}
        >
        </DatePicker>
        <View>
            <Icon
                active
                name='calendar'
                style={styles.datepickerIcon}
                onPress={handleDatePickerIconClick}
            />
        </View>
    </View>
</View>

Remember to use the ref to trigger datepicker:

const datePicker = useRef();

const handleDatePickerIconClick = () => {
    datePicker.current?.showDatePicker();
}