Dropdown value resets to default and scrolls to top due to object reference mismatch in value prop

[pga5e]

When using react-native-element-dropdown with default selected values and full object binding (valueField="code"), the dropdown snaps back to the top of the list and resets the scroll position as soon as scrolling stops. This happens even after selecting a different language.

Upon inspection, the issue appears to be related to the way the dropdown compares value with the items in the data list — using reference equality (===), not deep value comparison.

This makes it impossible to use initial values or updates unless the value is strictly the same object instance from the data array.

---

Library: react-native-element-dropdown

Version: "react-native-element-dropdown": "^2.12.4",

---

Reproduction Steps

1. Set up a dropdown with valueField="code" and labelField="label"
3. Set initial value using an object like { code: "en", label: "English" }
5. Provide data as an array of language objects
7. Scroll down the list
9. When scrolling stops or the dropdown loses focus, it snaps back to the top and resets selection visually.

---

import React, { useState } from "react";
import { View } from "react-native";
import { Dropdown } from "react-native-element-dropdown";

const translationLanguages = [
  { code: "en", label: "English" },
  { code: "fr", label: "French" },
  { code: "es", label: "Spanish" },
  { code: "et", label: "Estonian" },
  { code: "zh", label: "Chinese" },
  // ...many more
];

export default function App() {
  const [language, setLanguage] = useState(() =>
    translationLanguages.find((l) => l.code === "en")
  );

  return (
    <View style={{ padding: 20 }}>
      <Dropdown
        data={translationLanguages}
        labelField="label"
        valueField="code"
        value={language}
        search
        maxHeight={200}
        placeholder="Select Language"
        onChange={(item) => {
          // Even if `item` looks identical, it's not the same object instance.
          // This causes the dropdown to scroll/reset.
          const match = translationLanguages.find((lang) => lang.code === item.code);
          setLanguage(match); // Workaround: use object from same array
        }}
      />
    </View>
  );
}

---

As a result:

Scroll resets

Selection reverts visually to default

Dropdown snaps to top even when you select another item