React-native-ui-kitten: Autocomplete

[veedeo]

What is the way to implement simple autocomplete using this library. Something like Select component but with editable input inside?

[artyorsh]

Just look through Input and Select sources. It has a similar box, but Input also contains TextInput component in a render tree. By combining Input and Select you can achieve needed behavior.

[artyorsh]

@veedeo You also might be interested in using this guide to use custom mappings. But since autocomplete is something similar to Select, you may need simply copy mappings for this component

[aleqsio]

One thing that is missing a bit from this library switching from material-ui is the ability to easily customize behavior by injecting custom components to switch out the default ones (like passing an input prop to select https://material-ui.com/api/select/).

I've looked at changing the select component to display an in place of text, but i'd have to either fork this library, copy the entire Select component to my codebase, importing internal files that could change at any point, or use some sort of monkey patching techniques to achieve this. Is there an easier solution?

I think adding the ability to specify custom render functions via passing props (so we could provide a custom renderControlChildren function to Select, and in general be able to easily combine different building blocks provided by ui-kitten) would be very useful. The customizable theming solution works wonderfully, but i find that the ability to customize behavior is a bit underwhelming.

[artyorsh]

@aleqsio Thanks for the detailed answer. Our main goal for the v4 release was to fit Eva Design System specifications. The customization features still not in our backlog, but I guess we can improve UI Kitten with features you described in future releases since it really makes sense 👍

Did you able to migrate from material-ui to UI Kitten?

[aleqsio]

Didn't really have a choice on this, as material ui is not available on RN. But i must say it has been a really fun ride so far with ui kitten. It's obviously rather basic, but as this rapid prototyping was something i was looking for, it's perfect.
It's more like rebass, it's a really small set of components that provides consistent styling for often used items like buttons and checkboxes.
The theming is awesome, in material ui you had to dig through source code to change the look of imported components.
It's a bit more restrictive. For example, buttons accept only text as children, and that makes it impossible to easily add a spinner to a button. I had to hack it using the icon prop and no children.

[artyorsh]

@aleqsio In my opinion, we've built something restrictive out of the box, but you have a lot of predefinded parameters like status, size or appearance to customize components for your needs. But if you like something really custom or branded for your product, you basically able to do this with our styling system and Eva Design System tools (e.g Color generator). It's kinda complex when you start from a scratch, but it's really powerful (our company was already able to finish several outsource projects)

Thanks for the feedback!

[sudomann]

@artyorsh thank you for mentioning that color generator, did not know that existed! Previously I was inspecting source code for eva package to update color mappings accordingly. Not a fun process :(