Dropdown list placement issue in realme devices

[MrFarhan]

Dropdown is working perfect in all android and ios devices except realme device in which dropdown list is opening above the dropdown input, video is attached for refference.

Minimal code snippet.

    <View style={[styles.outer, viewContainerStyle]}>
      <View style={styles.fieldWrapper}>
        <Dropdown
          flatListProps={{
            onEndReachedThreshold: 0.5,
            onEndReached: () => dropdownEndReachedCallback?.(),
          }}
          dropdownPosition="bottom"
          disable={disabled}
          style={[styles.dropdown, dropdownStyle]}
          placeholderStyle={[
            styles.placeholderStyle,
            textAlignment === 'left' ? styles.textLeft : styles.textCenter,
            textAlignment === 'left' ? styles.paddingLeft : styles.noPadding,
          ]}
          selectedTextStyle={[
            styles.selectedTextStyle,
            disabled ? styles.disabledColor : styles.enabledColor,
            textAlignment === 'left' ? styles.textLeft : styles.textCenter,
            textAlignment === 'left' ? styles.paddingLeft : styles.noPadding,
            styles.fontWeight500,
          ]}
          inputSearchStyle={styles.inputSearchStyle}
          iconStyle={styles.iconStyle}
          data={options}
          search={search}
          maxHeight={300}
          labelField="value"
          valueField="key"
          placeholder={placeholder}
          searchPlaceholder="Search..."
          value={value}
          onFocus={() => setIsFocus(true)}
          onBlur={() => setIsFocus(false)}
          itemTextStyle={styles.itemTextStyle}
          onChange={(item: any) => {
            setValue(item.key);
            setIsFocus(false);
          }}
        />
      </View>
    </View>

Screen.Recording.2025-08-12.at.4.36.16.PM.mov

[Ritesh-HangingPanda]

when it happens then i do the bundle reload and yes it work for me everytime some how....

[MrFarhan]

when it happens then i do the bundle reload and yes it work for me everytime some how....

Yes, same with me, but this is not a solution, also this is happening on real device (Pixel 3) as well.

[Rohindh-Foodhub]

when it happens then i do the bundle reload and yes it work for me everytime some how....

Yes, same with me, but this is not a solution, also this is happening on real device (Pixel 3) as well.

Any updates? Were you able to fix it?

[MrFarhan]

when it happens then i do the bundle reload and yes it work for me everytime some how....

Yes, same with me, but this is not a solution, also this is happening on real device (Pixel 3) as well.

Any updates? Were you able to fix it?

I had solved this by removing this lib and created my own custom dropdown with flatlist...

[JJablonski02]

Solution:

On some Android devices, the value returned by StatusBar.currentHeight may be inaccurate or 0, which can cause incorrect element positioning.

The most reliable (and simplest) solution is to use react-native-safe-area-context

Solution

Since react-native-element-dropdown doesn’t currently use react-native-safe-area-context, you have two options:

1. Copy the component code into your own project and apply the fix there.

2. Use patch-package

1️⃣ Copy the component into your project (no patch-package)

1. Copy the file:

node_modules/react-native-element-dropdown/src/components/Dropdown/index.tsx

and copy files that refers to DropdownComponent.

2. Install react-native-safe-area-context:

npm install react-native-safe-area-context
# or
yarn add react-native-safe-area-context

3. In the copied index.tsx, import and use the useSafeAreaInsets() hook and replace the code as below:

37. ...
38. import { useSafeAreaInsets } from 'react-native-safe-area-context'; <-- Add this line
39. ...
40. const { isTablet } = useDetectDevice;
41.
42.
43.  const statusBarHeight: number = StatusBar.currentHeight || 0; <-- Replace this line with: const { top: statusBarHeight} = useSafeAreaInsets();
44. ...
195. const _measure = useCallback(() => {
220. }, [H, W, orientation, mode, statusBarHeight]); <-- Add statusBarHeight to square brackets

4. Update your imports to use this local component instead of the library’s default export.

2️⃣ Patch the library with patch-package

1. Install react-native-safe-area-context in your project:

npm install react-native-safe-area-context
# or
yarn add react-native-safe-area-context

2. Edit the file:

node_modules/react-native-element-dropdown/src/components/Dropdown/index.tsx

3. Import and use the useSafeAreaInsets() hook and replace the original code as below:

37. ...
38. import { useSafeAreaInsets } from 'react-native-safe-area-context'; <-- Add this line
39. ...
40. const { isTablet } = useDetectDevice;
41.
42.
43.  const statusBarHeight: number = StatusBar.currentHeight || 0; <-- Replace this line with: const { top: statusBarHeight} = useSafeAreaInsets();
44. ...
195. const _measure = useCallback(() => {
220. }, [H, W, orientation, mode, statusBarHeight]); <-- Add statusBarHeight to square brackets

3. Open the library’s package.json and add:

"dependencies": {
  "react-native-safe-area-context": "^5.4.0"
}

4. Save your changes and run:

npx patch-package react-native-element-dropdown

5. Rebuild and run the app. Dropdown should now align correctly on all devices.

[DurgeshPatil8982]

i am facing also same issue? any update on this solution how to fix that

[Welinton-Hoff]

Same issue here, when the dropdown position is set to "top", the list overlaps the dropdown input.

I’ve noticed this happening on some emulators (e.g., Pixel 8 API 35).

Here’s a quick demo:

Screen.Recording.2025-10-30.at.3.14.50.p.m.mov

[aabidDevit]

@MrFarhan
I was facing same issue, but in iOS.

I tried this and it works

<Dropdown
containerStyle={{marginTop: Platform.OS === 'ios' ? 60 : undefined}}
/>

[Welinton-Hoff]

@MrFarhan I was facing same issue, but in iOS.

I tried this and it works

<Dropdown containerStyle={{marginTop: Platform.OS === 'ios' ? 60 : undefined}} />

I tried something similar. In my case, it fixed the issue on the problematic devices, but then the devices that were working fine started displaying the list incorrectly.

In the end, I decided to remove the library and build my own dropdown component instead.