Examples that can be seen in the images

[Angelk90]

Hi @hossein-zare , It would be possible to see the examples that are seen in the images.

For example if you posted them on https://snack.expo.dev, anyone could try them.

P.s. Do they work on both react-native-web and react-native on macos?

[hossein-zare]

Hi,

I'll add a snack to the README.md file.

Do they work on both react-native-web and react-native on macos?

React-native-web not implemented. (Related PRs are welcomed) If you mean iOS, Yes.

[Angelk90]

@hossein-zare :

I did some tests on:

• react-native-web

• react-native on macos

https://user-images.githubusercontent.com/20476002/160289109-c980edb6-27e3-46d9-912a-319c8d9607a0.mov

On macOs it seems to work fine, the only problem at the moment that you notice is that the focus is not made when clicking on the input field, as you can see from the video.

P.s.

My text editor gives me the following problem on the setValue props:

[mikehardy]

I use it extensively on react-native-web @hossein-zare it works great - it's one of the reasons I use this package vs other dropdown packages, since it's pure JS :-)

[hossein-zare]

@Angelk90 hmm, i see.

This may fix the error.

const [value, setValue] = useState<string | null>(null);

[Angelk90]

@hossein-zare : Error remains, if you have webstorm you can check it for yourself.

[hossein-zare]

@mikehardy I didn't know that. 😁

So it's a snack.expo.dev bug.

[hossein-zare]

@Angelk90 Oh sorry, i haven't released a newer version. @ts-ignore the error.

[hossein-zare]

<DropDownPicker
...

// @ts-ignore
setValue={setValue}

...
/>

[Angelk90]

@hossein-zare : OK, I had copied an example from the documentation and there is no use of the ignore.

[hossein-zare]

@Angelk90 Are you using the single item or multiple items with (multiple={true})?

For multiple

const [value, setValue] = useState([]); // Put [], not null

https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/usage#single-item https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/usage#multiple-items

[Angelk90]

@hossein-zare : OK, if you can upload the examples, I'd like to test them.

[hossein-zare]

@Angelk90

Single: https://snack.expo.dev/yTiXXoFB9 Multiple: https://snack.expo.dev/YMpb4u6VG

[Angelk90]

@hossein-zare : I was hoping you would put these ;)

[hossein-zare]

@Angelk90 😅 Here you go https://snack.expo.dev/8mHmLfcZf

[Angelk90]

@hossein-zare : Thx, why did you decide to use TouchableOpacity instead of usingTouchableWithoutFeedback or TouchableHighlight, opacity effect when clicking on the input is not the best.

https://github.com/hossein-zare/react-native-dropdown-picker/blob/71c166b68d3d8fc0ac8356eb487c091c0aa1253c/src/components/Picker.js#L1744-L1747

[hossein-zare]

@Angelk90 This package was for personal use, TouchableOpacity was my favorite component. This is why i used it everywhere.

[Angelk90]

@hossein-zare : Have a look here: https://snack.expo.dev/F_9yooUBD ;)

[Angelk90]

@hossein-zare : You could use the props activeOpacity= {1} would be great.

[hossein-zare]

@Angelk90

Try

<DropDownPicker
  props={{
    activeOpacity: 1
  }}

  ... />

[Angelk90]

@hossein-zare : Great, you happen to know how to use animation?

[hossein-zare]

@Angelk90 I've forgotten the animated api. (the last time i used react native was 2 years ago)

[Angelk90]

@hossein-zare : I'm not very experienced with animations you used them a long time ago. When the arrow moves from bottom to top or vice versa, it would have been a nice effect to use animations with a rotation from 0 to 180 to give that motion effect.

[hossein-zare]

@Angelk90 It's an easy-peasy animation.

[Angelk90]

@hossein-zare : If you have time you could add the following animation.

[hossein-zare]

@Angelk90 ok

[Angelk90]

@hossein-zare : For the arrow animation, is there any news?

[hossein-zare]

@Angelk90 I didn't have enough time, So not for now.