React-native-ui-kitten: Select component: controlStyle missing in ui-kitten v5

[xydian]

🐛 Bug Report

Not sure if its a bug report or a feature request. It worked on ui-kitten 4.x and is not working on v5.0.0 anymore so i guess its more of a bug report unless the feature was removed on purpose. I want to change the background color of the select control. Using ui kitten v4 this was easily doable by passing controlStyle prop to the select component like this:

<Select 
    data={selectTimespan} 
    selectedOption={selectedTimespan}
    onSelect={onSelectTimespan}
    controlStyle={{ backgroundColor: '#fff' }}
/>

However, the controlStyle prop seems to be missing in v5. The migration guide is talking about labelStyle, captionStyle and placeholderStyle being removed, but not about controlStyle.

From the migration guide:

Also, labelStyle, captionStyle and placeholderStyle properties are no longer supported. Instead, if having custom styles is required, function component with additional text style should be passed to the corresponding property.

Did you just miss mentioning it on the guide and it has been removed on purpose or did you forget implementing it on the new version? The new API isn't mentioning it either, so I guess it was removed on purpose. Is there any workaround in this case?

Thank you in advance.

PS: awesome work :) except the background problem I didn't run into any issues while migrating from v4 to v5. It only took me about half an hour to update and migrate my compontent to the new API.

To Reproduce

Trying to pass controlStyle property to Select component

Expected behavior

Select component should apply styles passed to controlStyle prop

Link to runnable example or repository (highly encouraged)

I can provide two example repositories if it is necessary, just let me know

UI Kitten and Eva version

| Package | Version |
| ----------- | ----------- |
| @eva-design/eva | ^2.0.0 |
| @ui-kitten/components | ^5.0.0 |

Environment information

System:
OS: Linux 5.6 Arch Linux
CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Binaries:
Node: 14.2.0 - /tmp/yarn--1589746358068-0.6902798869234454/node
Yarn: 1.22.4 - /tmp/yarn--1589746358068-0.6902798869234454/yarn
IDEs:
Android Studio: 3.6 AI-192.7142.36.36.6392135
npmPackages:
react: 16.9.0 => 16.9.0
react-native: https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz => 0.61.4

[artyorsh]

@xydian Yes, that's the problem for migrated to v5 users. Thanks for a detailed description 👍

However, in my vision we shouldn't add this back to support the consistency across the other component APIs. That was the reason to remove *Style properties - it doesn't give you 100% flexibility in styling.

I would suggest using mapping customization feature.

[xydian]

@artyorsh Thank you for your fast reply. I got it working with a custom mapping as you suggested :)

Would be nice if you add a note about it in the migration guide for the other developers. I think something along the lines of the following should be enough

Be aware that controlStyle has also been removed in favor of a more simple API. If you need to customize the control itself, look into "Customize Mapping" section of the docs.