Can't add a custom theme

[RilDev]

Hi there, I would like to customize the dropdown's theme.

I followed the documentation here, but it throws an error.

Here is a minimal reproduction: https://github.com/RilDev/react-native-dropdown-picker-custom-theming

Do you know how to fix it?

Reproduction Steps

1. Create Expo project with yarn create expo
2. Install react-native-dropdown-picker with yarn add react-native-dropdown-picker
3. Follow the setup instructions to "Add a theme" https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/advanced/themes#add-a-theme

The theme is defined in myTheme.js.

The dropdown picker is displayed in App.jsx.

Expected Behavior

Display the dropdown picker with the custom theme.

Actual Behavior

The dropdown throws an error:

ERROR TypeError: Cannot read property 'style' of undefined

This error is located at:
in Picker (created by App)
in RCTView (created by View)
in View (created by App)
in App (created by withDevTools(App))
in withDevTools(App)
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent), js engine: hermes

Thank you for your help!

[rgomezp]

Yep. I have the exact same issue.

From looking at the types, it looks like addTheme takes two args:

• name: string
• theme: ThemeNameType

and ThemeNameType = 'DEFAULT' | 'LIGHT' | 'DARK';

So there's really no way to set your custom theme.

[Adwich]

Hi ran into the same issue.

The trouble is that whem you import your theme you only get the default. But the package need to get the theme as an object with the ICONS and the default (containing your styling).

You need to change the way you import your theme in your App.jsx like so:

const myTheme = require("./myTheme");

This is specified in the doc.