react-native-paper
react-native-paper copied to clipboard
callstack
feat: dropdown component
Summary
This PR introduces a new component which is Dropdown and Dropdown.Option, I noticed that the native Picker in react-native isn't very customizable and doesn't look nice with other react-native-paper components.
I found other libraries on npm such as 'react-native-paper-dropdown' and 'react-native-material-dropdown' however I tested these libraries, they appear to have an issue displaying on the web, when developing this I went through the same problem because I was following their approach at first so I had to change a little bit.
I will try to explain it briefly:
If we want to create a dropdown in react (only web), we can use a div with relative position to parent by following this approach https://stackoverflow.com/a/5209833, however we will need to set the z-index to prevent other components down in the page to appear on top of the dropdown.
With react-native it's a little more complicated since all components by default have a relative position a a z-index preset to 0, so even if we increase the z-index of the dropdown we still can't make it appear above other components unless we change the z-index of the parent (and maybe other parents in the dom tree as well) https://stackoverflow.com/a/35326592.
The approach I took involved using a portal and computing the location of the dropdown when the user clicks on the component and displaying it, it works because the portal renders the dropdown at the top of the tree. But in this approach I assumed that the Provider component will provide the Protal.Host.
Test plan
I already provided an example in my PR, but I believe this is not ready to merge yet since there are tests and docs to add and maybe some refactoring required. Other features can be added as well like completely custom components (here I'm just using List.Item) and making the dropdown searchable... but I'll let you guys be the judge.
I'll keep updating the PR as much as I can until it's ready to merge and if anyone can also contribute with this it would be great
Hey @omneimneh, thank you for your pull request 🤗. The documentation from this branch can be viewed here.
@omneimneh I just realized that there's a missing top/bottom margin in the dropdown. Check it out:
From MD guide: https://material.io/components/menus#specs
Hello 👋, this pull request has been open for more than 2 months with no activity on it. If you think this is still necessary with the latest version, please comment and ping a maintainer to get this reviewed, otherwise it will be closed automatically in 7 days.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
I'm working on a similar component but I only tested it on the web for now but it will improve in the coming month: https://github.com/web-ridge/react-native-paper-autocomplete
+1 I'm using react-native-paper and wanted to use a dropdown picker the Project as well, unfortunately did not find one with good web & react-native support as mentioned at the start of this PR. Looking for other solutions now.
Hello everyone, sorry for not being able to close this PR. A lot of things has changed with the material design M3 and it was very difficult to find a convenient time to work on this but I'll try to work on it in the upcoming days although I can't promise anything due to life/work commitments. Sorry again for keeping this open for too long and thanks for understanding.
I moved this to a new PR https://github.com/callstack/react-native-paper/pull/4102