react-native-datetimepicker / datetimepicker

React Native date & time picker component for iOS, Android and Windows
MIT License
2.54k stars 413 forks source link

Unable to Change Default Blue Color in DateTimePicker #918

Closed LucasPedro123 closed 3 months ago

LucasPedro123 commented 4 months ago

I am unable to change the default blue color in the @react-native-community/datetimepicker component. Despite attempting various styling approaches, the blue color persists in certain areas such as the confirm and cancel buttons on Android, and the header text on iOS.

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

const MyDatePicker = () => {
  const [date, setDate] = useState(new Date());
  const [show, setShow] = useState(false);

  const onChange = (event, selectedDate) => {
    const currentDate = selectedDate || date;
    setShow(Platform.OS === 'ios');
    setDate(currentDate);
  };

  return (
    <View>
      <Button onPress={() => setShow(true)} title="Show date picker!" />
      {show && (
        <DateTimePicker
          testID="dateTimePicker"
          value={date}
          mode="date"
          display="default"
          onChange={onChange}
          style={{ color: 'red' }} // Attempting to change color
          textColor="red" // Attempting to change color on iOS
        />
      )}
    </View>
  );
};

export default MyDatePicker;

Steps to reproduce

Install the @react-native-community/datetimepicker library in a React Native project. Implement a date picker modal and attempt to change the confirm and cancel button colors. Run the application on both Android and iOS. Describe what you expected to happen:

The confirm and cancel buttons, as well as the header text, should reflect the custom colors provided in the styles. The default blue color should be replaced by the specified custom color.

vonovak commented 3 months ago

Hello and thanks for asking, styling of the native control is limited

see