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 Algorithms, Competitive Programming, Operating Systems, Computer Networks, DBMS, System Design, etc., as well as some Contests, Test Series, and Interview Experiences curated by top Industry Experts.