Allow passing a react-native-paper Theme object to components

[matmedev]

It would be nice to allow styling in some ways to change the design provided by global theme from react-native-paper. In my opinion the most straightforward solution would be to add (just like for original react-native-paper components) theme attribute to components.

[aron9609]

+1

[rajan-31]

I am using this workaround to change theme

why?

• I had app level theme set using PaperProvider, but I didn't want to change any properties there
• Using PaperProvider like below also works, even if you have app level theme set using PaperProvider

Use this component in place of using TimePickerModal from 'react-native-paper', pass same props as before

// TimePickerModalCustom.tsx

import { PaperProvider, MD3LightTheme, configureFonts } from 'react-native-paper';
import { TimePickerModal } from 'react-native-paper-dates';

const TimePickerModalCustom = (props: any) => {
    return (
        <PaperProvider 
            theme={{
                ...MD3LightTheme,
                colors: {
                    ...MD3LightTheme.colors,
                    primary: '#F3943F',
                    primaryContainer: '#F3943F88',
                    onPrimary: '#fff',
                    onPrimaryContainer: '#000',
                    surface: '#fff',
                    onSurface: '#656565',
                    surfaceVariant: '#F3943F20',
                    secondaryContainer: '#F3943F66',
                }
            }}
        >
            <TimePickerModal {...props} />
        </PaperProvider>
    );
}

export default TimePickerModalCustom;

Use it

<TimePickerModalCustom
          visible={visible}
          onDismiss={onDismiss}
          onConfirm={onConfirm}
          hours={0}
          minutes={0}
          animationType="fade"
          inputFontSize={30}
/>

---

Similarly, for DatePickerInput component

//DatePickerInputCustom.tsx

import { PaperProvider, MD3LightTheme, configureFonts } from 'react-native-paper';
import { DatePickerInput } from 'react-native-paper-dates';

const DatePickerInputCustom = (props: any) => {
    return (
        <PaperProvider
            theme={{
                ...MD3LightTheme,
                colors: {
                    ...MD3LightTheme.colors,
                    primary: '#F3943F',
                    primaryContainer: '#F3943F88',
                    onPrimary: '#fff',
                    onPrimaryContainer: '#000',
                    surface: '#fff',
                    onSurface: '#656565',
                    surfaceVariant: '#F3943F20',
                    secondaryContainer: '#F3943F66',
                }
            }}
        >
            <DatePickerInput {...props} />
        </PaperProvider>
    );
}

export default DatePickerInputCustom;

You can do this for other components also.

To see which theme properties, like colors, etc. you need to set then see respective component files in node_modules/react-native-paper-dates/src

---

Please, comment if I am doing something wrong.

[RichardLindhout]

@rajan-31 provided a great way to work with theme's using the provider + you probably don't have the right colors in your theme if it's not working right. Please see the react-native-paper docs for generating a nice theme (it's in the Theming docs)