search

hossein-zare / react-native-dropdown-picker

A single / multiple, categorizable, customizable, localizable and searchable item picker (drop-down) component for react native which supports both Android & iOS.
https://hossein-zare.github.io/react-native-dropdown-picker-website/
MIT License
991 stars 296 forks source link

Set container width so it grows with the content inside of it rather than a set width. #619

Open Jake-Mulhern opened 1 year ago

Jake-Mulhern commented 1 year ago

I am using the picker and it's great so thank you! I am having difficulty figuring out how to do a couple of styling changes though.

I have tried setting the margin and padding to 0 on most of the different components to attempt this to no avail.

So, I would like the down/up arrow to appear directly next to the text inside the container and I would like for the container to only be as big as the content inside of it. If I remove the width completely it spreads to 100% and if I set a width on it and then the string inside of the container is larger than the hardcoded value I can't see the entire thing. I would also like the padding on the top and the bottom gone. Basically I would like it as compact as possible, with everything directly next to each other (meaning the label and the arrow). I'm including a picture with the background colors changed so that you can see the padding on the sides of the "ETH-Wollet" text. I'll also include a picture of how I would like for it to look.

Screen Shot 2022-12-14 at 12 28 08 PM

Screen Shot 2022-12-14 at 12 26 25 PM

(This picture includes an Icon to the left of the text that will not be there anymore. We decided against it. The picture does show, however, how the text is bunched up to the text above it rather than having any padding or margin and how the arrow is directly next to the text regardless of the String size.)

I love the customization that is available for this component but there is a lot of different styling options to try and none of them seem to solve this issue. Any help on this would be great.

Jake-Mulhern commented 1 year ago

It looks like the width on the style prop is set to 100% therefore cannot be set back to no set width. Is there a way to get around this? I've also tried setting justifyContent to all of the different options and yet the arrow never moves any closer or further from the string. Maybe it's not overriding the style set in the source code?