React Native dropdown setup guide

1. Generate and download

Open the builder, configure your options and download the JSX component. Put it in your existing React Native or Expo project's components folder. You do not install this PHP website in your mobile app.

2. Import your component

The example below assumes you downloaded CustomDropdown.jsx. If you chose another component name, update the import and tag.

import React, { useState } from 'react';
import { View, Text } from 'react-native';
import CustomDropdown from './components/CustomDropdown';

export default function App() {
  const [selection, setSelection] = useState(null);
  return (
    <View style={{ flex: 1, padding: 24, paddingTop: 64 }}>
      <CustomDropdown onChange={setSelection} />
      <Text>{JSON.stringify(selection)}</Text>
    </View>
  );
}

3. Use the selected value

Single-select mode passes a label string or null to onChange. Multi-select passes an array of label strings. Clear sends null or an empty array, depending on the mode. The component manages its selection internally; the callback lets your parent receive changes.

4. Connect it to form validation

For a required single-select field, check that the value is not null. For multiple selection, check that the array contains an item. Show your form's validation message near the field. Labels are values in this version, so keep labels unique.

5. Test before release

• Test Android and iOS, including the Android back button.
• Open search with the keyboard visible and reach the last result.
• Try long labels, large font settings and screen-reader navigation.
• Check selection, Clear, Done and dismissal without a change.
• Confirm the callback updates your actual form state.

What the preview represents

The preview uses HTML controls to simulate the settings. The exported component uses a React Native modal. Native fonts, keyboard layout and animations can differ from the browser. It is not a device emulator.

How it works

A Modal presents the selection panel above your app, while FlatList renders options. Search filters the list without clearing selected values. The generated component provides extraData to FlatList so selected-state changes update item rendering.

Primary references: React Native Modal and React Native FlatList.

Output contract and current limitations

• File: JavaScript with JSX. No typed TSX download or package installation is generated.
• Data: up to 200 unique labels of up to 120 characters. Blank lines are removed and exact duplicates are deduplicated. Labels are also the returned values.
• State: selection is internal. The only exposed prop is onChange; there is no controlled value, defaultValue or options prop.
• Search: local, case-insensitive text matching. No remote API, pagination or async loading is included.
• Compatibility: native-device tests and a React Native/Expo version matrix have not been completed. Verify in your own environment.
• Accessibility: accessibility attributes are a starting point, not certification. Test VoiceOver, TalkBack, focus restoration and large text.

What onChange returns

Resetting the field from a parent form

Changing your parent state alone does not reset this internally managed component. This example uses a React key to remount it and clear the parent value together. It assumes a single-select CustomDropdown.jsx export. For multi-select, initialise and reset the parent value to an empty array.

import React, { useState } from 'react';
import { View, Button, Text } from 'react-native';
import CustomDropdown from './components/CustomDropdown';

export default function ExampleForm() {
  const [selection, setSelection] = useState(null);
  const [resetKey, setResetKey] = useState(0);

  function reset() {
    setSelection(null);
    setResetKey(current => current + 1);
  }

  return (
    <View style={{ padding: 24 }}>
      <CustomDropdown key={resetKey} onChange={setSelection} />
      <Text>{selection ?? 'Nothing selected'}</Text>
      <Button title="Reset field" onPress={reset} />
    </View>
  );
}

Remounting also closes the modal and clears search. For externally controlled defaults or continuously synchronized values, adapt the component to accept value/onChange, or choose a library with an appropriate state API.

Troubleshooting by symptom

Common questions