react-nativereact-native-paper

React native paper dates DatePickerInput modal customization


I am using developing react native on the web, using react-native-paper-dates to show a DatePickerInput on the website, and am able to customize the colors of the date input - but not the modal date picker that comes out of it.

import { View } from '@gluestack-ui/themed'
import React from 'react'
import { DatePickerInput } from 'react-native-paper-dates'
import { CalendarDate } from 'react-native-paper-dates/lib/typescript/Date/Calendar'
import { SafeAreaProvider } from 'react-native-safe-area-context'

const DatePicker = ({ amountOfMonths = 3 }: { amountOfMonths?: number }) => {
    const [inputDate, setInputDate] = React.useState<CalendarDate>()
    
    return (
        <SafeAreaProvider>
            <View>
                <DatePickerInput
                    placeholder="XX/XX/XXXX"
                    placeholderTextColor={appliedColors.inputPlaceholderColor}
                    endYear={new Date().getFullYear() + 1}
                    startWeekOnMonday
                    iconColor={colors.darkCantaloupeGreen}
                    activeOutlineColor={colors.darkCantaloupeGreen}
                    selectionColor={colors.darkCantaloupeGreen}
                    textColor={colors.darkCantaloupeGreen}
                    outlineColor={appliedColors.inputBorderColor}
                    locale="en"
                    value={inputDate}
                    onChange={(d) => setInputDate(d)}
                    inputMode="start"
                    validRange={{
                        startDate: new Date(),
                        endDate: new Date(
                            new Date().setMonth(
                                new Date().getMonth() + amountOfMonths
                            )
                        ),
                    }}
                />
            </View>
        </SafeAreaProvider>
    )
}

export default DatePicker

I have tried all props including "...Color" in their names and the theme prop. Went through all type declarations I could find, nothing works for me.

I acknowledge React native paper dates DatePickerInput customization question exists, but it never got a working answer, and it refers to an android instance.

Is there a way to change the modal "primary" color?

examples of live result: Current working input colors Current modal colors


Solution

  • The only option I could find that actually works, is installing react-native-paper, using their PaperProvider and passing it a theme.