is this a RNW ready? Can I use this for both web and mobile?

[robertkibet]

Is your feature request related to a problem? Please describe. Yes, I am wondering if this is react native web enabled by default? is it currently RNW capable. I am super curious. Is there an example of this?

Describe the solution you'd like First, The current implementation is amazing, kudos to the team :clap: . On my end, I am trying to get this awesome picker running with storybook, meaning I am setting up a component based approach to enable re-usability across devices including web. :smile:

Secondly, do we need the icons as a dependency? Ref: https://github.com/hossein-zare/react-native-dropdown-picker/blob/4.x/src/index.js#L17 It would be amazing if we just have it as a prop and have the users determine their own icons to send in :100: and possibly remove vector icons dependency? :stuck_out_tongue:

Describe alternatives you've considered I would say this is currently the best option for me, but currently I am not sure if this is RNW ready. Inspiration comes from necolas https://necolas.github.io/react-native-web/docs/picker/

I am currently facing this error with my storybook:

ERROR in /node_modules/react-native-vector-icons/lib/create-icon-set.js 43:21
Module parse failed: Unexpected token (43:21)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
|   class Icon extends PureComponent {
>     static propTypes = {
|       allowFontScaling: PropTypes.bool,
|       name: IconNamePropType,
 @ /node_modules/react-native-vector-icons/Feather.js 6:0-50 9:16-29
 @ ./dist/killer-shrew.esm.js
 @ ./stories/controller.stories.tsx
 @ ./stories sync \.stories\.(js|ts)x?$
 @ ./.storybook/config.tsx
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.tsx (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in /node_modules/react-native-dropdown-picker/src/index.js 61:33
Module parse failed: Unexpected token (61:33)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|                 isVisible: props.isVisible
|             },
>             initialScroll: props?.autoScrollToDefaultValue,
|             defaultValueIndex
|         };
 @ ./dist/killer-shrew.esm.js 17:0-58 7785:66-80
 @ ./stories/controller.stories.tsx
 @ ./stories sync \.stories\.(js|ts)x?$
 @ ./.storybook/config.tsx
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.tsx (webpack)-hot-middleware/client.js?reload=true&quiet=true

FYI: I can get the setup to run if I comment out Feather Icons import and send in my custom Icon, but this is not effective because I'll need to get updates from this package :smile:

import Feather from 'react-native-vector-icons/Feather';
Feather.loadFont();

any thoughts, examples or pointers to getting this in place will be welcomed. Thanks :+1:

[hossein-zare]

Hello, Thank you for your kind comment.

It may take a week to get rid of the dependency. Please modify the package to make it work for now, The release of the standalone version will be announced soon.

[robertkibet]

Hi @hossein-zare, thank you so much, that will be super awesome. :muscle: If its okay I can do a PR for this update :checkered_flag:

[hossein-zare]

Why not?! You can submit your PR, The default icons should be PNG. 😁

[hungvu193]

Hi there, I saw that it worked with RNW, but the right icon doesnt display as expected, do you have any advice? I used react-native-dropdown-picker 4.0.6 btw

[hossein-zare]

@hungvu193 Install https://github.com/oblador/react-native-vector-icons

[tickietackie]

Does version 5 also work with web? Version 4 worked kinda right our of the box. With version 5 I now see that the styles are not shown. You can simply check this in the expo example:

https://snack.expo.dev/8mHmLfcZf

[mikehardy]

I am using it on the web and I have noticed similar behavior with modal mode - I haven't tracked it down yet personally