Table of contents
1.
Introduction
2.
What is react-native-element-dropdown in React Native?
3.
How to Create a Custom React Native Dropdown?
3.1.
1. Import the necessary components
3.2.
2. Define the options for the dropdown
3.3.
3. Create a state variable to store the selected value
3.4.
4. Render the Dropdown component
3.5.
5. Define the styles for the dropdown
4.
Frequently Asked Questions
4.1.
Can I customize the appearance of the dropdown?
4.2.
How can I handle the selected value from the dropdown?
4.3.
Is it possible to disable the search functionality in the dropdown?
5.
Conclusion
Last Updated: Jul 20, 2024
Easy

Dropdown in React Native

Author Rinki Deka
0 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

Dropdowns are a common user interface element in mobile app development. They allow users to select an option from a list of choices, making it easier to input data or navigate through the app. In React Native, creating a dropdown is straightforward, thanks to the availability of pre-built components. 

Dropdown in React Native

In this article, we'll discuss the react-native-element-dropdown library and learn how to create a custom dropdown in a React Native app. We'll talk about the basics of setting up the library, configuring the dropdown, and handling user selections. 

What is react-native-element-dropdown in React Native?

react-native-element-dropdown is a popular library that simplifies the process of adding dropdown functionality to React Native apps. It provides a customizable and easy-to-use dropdown component that can be integrated into your app with minimal setup.

The react-native-element-dropdown library offers several features that make it a great choice for implementing dropdowns, like:

1. Customizable styling: You can easily customize the appearance of the dropdown to match your app's design. The library provides props to control the size, color, font, and other visual aspects of the dropdown.
 

2. Search functionality: The dropdown includes a built-in search feature that allows users to quickly find the desired option by typing in a search query. This is particularly useful when dealing with a large number of options.
 

3. Keyboard avoidance: When the dropdown is open and the user taps on an input field, the library automatically adjusts the position of the dropdown to ensure it doesn't overlap with the virtual keyboard. This improves the user experience and prevents any obstruction of the dropdown.
 

4. Accessibility: react-native-element-dropdown follows accessibility guidelines, making it compatible with assistive technologies like screen readers. This ensures that your app is inclusive and usable by a wide range of users.


To use react-native-element-dropdown in your React Native project, you first need to install the library using npm or yarn:

npm install react-native-element-dropdown


or

yarn add react-native-element-dropdown


Once installed, you can import the Dropdown component from the library and use it in your React Native components.

How to Create a Custom React Native Dropdown?

Creating a custom dropdown in React Native using the react-native-element-dropdown library is a straightforward process. Let's understand the steps to create a basic dropdown component:

1. Import the necessary components

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

2. Define the options for the dropdown

const data = [
  { label: 'Option 1', value: '1' },
  { label: 'Option 2', value: '2' },
  { label: 'Option 3', value: '3' },
];

3. Create a state variable to store the selected value

const [selectedValue, setSelectedValue] = useState(null);

4. Render the Dropdown component

<Dropdown
  style={styles.dropdown}
  placeholderStyle={styles.placeholderStyle}
  selectedTextStyle={styles.selectedTextStyle}
  inputSearchStyle={styles.inputSearchStyle}
  iconStyle={styles.iconStyle}
  data={data}
  search
  maxHeight={300}
  labelField="label"
  valueField="value"
  placeholder="Select an option"
  searchPlaceholder="Search..."
  value={selectedValue}
  onChange={item => {
    setSelectedValue(item.value);
  }}
/>


In this example, we've set various props to customize the appearance and behavior of the dropdown:

- `style`: Applies styles to the dropdown container.

- `placeholderStyle`: Styles the placeholder text.

- `selectedTextStyle`: Styles the selected option text.

- `inputSearchStyle`: Styles the search input field.

- `iconStyle`: Styles the dropdown icon.

- `data`: Specifies the options for the dropdown.

- `search`: Enables the search functionality.

- `maxHeight`: Sets the maximum height of the dropdown list.

- `labelField`: Specifies the key for the option label.

- `valueField`: Specifies the key for the option value.

- `placeholder`: Sets the placeholder text when no option is selected.

- `searchPlaceholder`: Sets the placeholder text for the search input.

- `value`: Represents the currently selected value.

- `onChange`: Handles the selection change event.

5. Define the styles for the dropdown

const styles = {
  dropdown: {
    margin: 16,
    height: 50,
    borderBottomColor: 'gray',
    borderBottomWidth: 0.5,
  },
  // ... other styles
};


By following these steps, you can create a custom dropdown component in React Native using the react-native-element-dropdown library. You can further customize the dropdown by modifying the styles and props to fit your app's design and requirements.

Now, let’s use these steps for a implementation of Dropdown and see a complete example of Dropdown in React Native : 

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Dropdown } from 'react-native-element-dropdown';
const App = () => {
  const [selectedValue, setSelectedValue] = useState(null);
  const data = [
    { label: 'Option 1', value: '1' },
    { label: 'Option 2', value: '2' },
    { label: 'Option 3', value: '3' },
  ];
  return (
    <View style={styles.container}>
      <Text style={styles.heading}>Select an Option</Text>
      <Dropdown
        style={styles.dropdown}
        placeholderStyle={styles.placeholderStyle}
        selectedTextStyle={styles.selectedTextStyle}
        inputSearchStyle={styles.inputSearchStyle}
        iconStyle={styles.iconStyle}
        data={data}
        search
        maxHeight={300}
        labelField="label"
        valueField="value"
        placeholder="Select an option"
        searchPlaceholder="Search..."
        value={selectedValue}
        onChange={item => {
          setSelectedValue(item.value);
        }}
      />
      {selectedValue && (
        <Text style={styles.selectedOption}>
          Selected Option: {selectedValue}
        </Text>
      )}
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 20,
  },
  heading: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  dropdown: {
    height: 50,
    borderColor: 'gray',
    borderWidth: 0.5,
    borderRadius: 8,
    paddingHorizontal: 8,
  },
  placeholderStyle: {
    fontSize: 16,
  },
  selectedTextStyle: {
    fontSize: 16,
  },
  iconStyle: {
    width: 20,
    height: 20,
  },
  inputSearchStyle: {
    height: 40,
    fontSize: 16,
  },
  selectedOption: {
    marginTop: 20,
    fontSize: 18,
  },
});
export default App;


In this example, we create a functional component called `App` that renders a dropdown and displays the selected option.
 

1. We import the necessary components and libraries, including `React`, `useState`, `View`, `Text`, `StyleSheet`, and `Dropdown` from `react-native-element-dropdown`.
 

2. Inside the `App` component, we define a state variable called `selectedValue` using the `useState` hook to store the selected value from the dropdown.
 

3. We define an array called `data` that contains the options for the dropdown. Each option is an object with a `label` and a `value` property.

 

4. In the JSX, we render the `Dropdown` component and pass various props to customize its appearance and behavior. We set the `style`, `placeholderStyle`, `selectedTextStyle`, `inputSearchStyle`, `iconStyle`, `data`, `search`, `maxHeight`, `labelField`, `valueField`, `placeholder`, `searchPlaceholder`, `value`, and `onChange` props.
 

5. Below the `Dropdown`, we conditionally render the selected option if `selectedValue` is not null.
 

6. We define the styles for the component using the `StyleSheet.create` method. We style the container, heading, dropdown, placeholder, selected text, icon, search input, and selected option.
 

7. Finally, we export the `App` component as the default export.

When you run this code, you'll see a dropdown component rendered on the screen. You can select an option from the dropdown, and the selected value will be displayed below it. The Dropdown also includes a search functionality to easily find options.

Frequently Asked Questions

Can I customize the appearance of the dropdown?

Yes, you can customize the appearance of the dropdown by modifying the styles prop and applying your desired styles.

How can I handle the selected value from the dropdown?

You can use the onChange prop to handle the selected value. It receives the selected item as a parameter, allowing you to access its value and perform any necessary actions.

Is it possible to disable the search functionality in the dropdown?

Yes, you can disable the search functionality by simply removing the search prop from the Dropdown component.

Conclusion

In this article, we learned how to create a custom dropdown component in React Native using the react-native-element-dropdown library. We covered the basics of setting up the library, configuring the dropdown, and handling user selections. With the steps explained above and utilizing the provided code example, you can easily integrate a customizable dropdown into your React Native app. The react-native-element-dropdown library offers a user-friendly and feature-rich solution for adding dropdown functionality to your mobile app interface.

You can also practice coding questions commonly asked in interviews on Coding Ninjas Code360

Also, check out some of the Guided Paths on topics such as Data Structure and AlgorithmsCompetitive ProgrammingOperating SystemsComputer Networks, DBMSSystem Design, etc., as well as some Contests, Test Series, and Interview Experiences curated by top Industry Experts.

Live masterclass