flickering when having multiple dropdown

[Four58]

here is the source code: https://github.com/Four58/dropdown

https://github.com/user-attachments/assets/379190e1-23b0-471d-a9e6-275a072075e1

I just copied the code example and try open every dropdown list. I realized that it usually flickering the previous one.

[ZorianaBila]

I have the same problem, but it only happens on IOS. Have you found a solution?

[bvedad]

I am experiencing this issue as well.

[alemar11]

same here

[vkondratievtouchbistro]

same on IOS

[Tomer-Ezon]

Same here on iOS

[ChechoCZ]

Have you find any fix or workaround for this issue?

[PaviPff]

@Four58 Have you find any solution?

[HamzaJameel01]

same here

[PaviPff]

@HamzaJameel01 I managed to fix it by making the changes below in v2.12.4

diff --git a/node_modules/react-native-element-dropdown/src/components/Dropdown/index.tsx b/node_modules/react-native-element-dropdown/src/components/Dropdown/index.tsx
index 2a73f2f..cfb8149 100644
--- a/node_modules/react-native-element-dropdown/src/components/Dropdown/index.tsx
+++ b/node_modules/react-native-element-dropdown/src/components/Dropdown/index.tsx
@@ -638,7 +638,7 @@ const DropdownComponent = React.forwardRef<IDropdownRef, DropdownProps<any>>(
     );
 
     const _renderModal = useCallback(() => {
-      if (visible && position) {
+      if ( position) {
         const { isFull, width, height, top, bottom, left } = position;
 
         const onAutoPosition = () => {

[trilam1409]

@HamzaJameel01 I managed to fix it by making the changes below in v2.12.4

diff --git a/node_modules/react-native-element-dropdown/src/components/Dropdown/index.tsx b/node_modules/react-native-element-dropdown/src/components/Dropdown/index.tsx
index 2a73f2f..cfb8149 100644
--- a/node_modules/react-native-element-dropdown/src/components/Dropdown/index.tsx
+++ b/node_modules/react-native-element-dropdown/src/components/Dropdown/index.tsx
@@ -638,7 +638,7 @@ const DropdownComponent = React.forwardRef<IDropdownRef, DropdownProps<any>>(
     );
 
     const _renderModal = useCallback(() => {
-      if (visible && position) {
+      if ( position) {
         const { isFull, width, height, top, bottom, left } = position;
 
         const onAutoPosition = () => {

I had another issue. I opened a separate modal, then opened and selected an item from the dropdown. The previous modal blinked. But your approach fixed my issue. Thank you

[AsurNikul]

I tried removing itemContainerStyle, and it worked. I removed the border style and border width from itemContainerStyle, and that resolved the issue.