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?
The only option I could find that actually works, is installing react-native-paper, using their PaperProvider and passing it a theme.