Dropdown menus are essential UI components that allow users to select one option from a list. In React Native, dropdowns can be implemented in various ways, depending on the design and user experience requirements. Here, we’ll explore two approaches to creating dropdowns from scratch:
- Using a Modal to display the dropdown.
- Inline display of the dropdown below a button or text field.
Prerequisites
Before starting, ensure you have React Native set up in your project. You can install React Native using:
npx react-native init MyApp
Approach 1: Dropdown Using a Modal
The modal approach is useful in cases where you want the dropdown to take up the full screen or focus the user’s attention on the options.
Steps:
- Create a Dropdown component that toggles a modal.
- Render dropdown options inside the modal.
- Pass the selected value back to the parent.
Code:
import React, { useState } from "react";
import {
View,
Text,
Modal,
TouchableOpacity,
FlatList,
StyleSheet,
} from "react-native";
const ModalDropdown = ({ data, onSelect }) => {
const [isModalVisible, setModalVisible] = useState(false);
const [selectedValue, setSelectedValue] = useState(null);
const toggleModal = () => setModalVisible(!isModalVisible);
const handleSelect = (item) => {
setSelectedValue(item);
onSelect(item);
toggleModal();
};
return (
<View style={styles.container}>
<TouchableOpacity style={styles.button} onPress={toggleModal}>
<Text style={styles.buttonText}>
{selectedValue || "Select an option"}
</Text>
</TouchableOpacity>
<Modal visible={isModalVisible} transparent animationType="slide">
<View style={styles.modalBackground}>
<View style={styles.modalContent}>
<FlatList
data={data}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item }) => (
<TouchableOpacity
style={styles.option}
onPress={() => handleSelect(item)}
>
<Text style={styles.optionText}>{item}</Text>
</TouchableOpacity>
)}
/>
<TouchableOpacity style={styles.closeButton} onPress={toggleModal}>
<Text style={styles.closeText}>Close</Text>
</TouchableOpacity>
</View>
</View>
</Modal>
</View>
);
};
const styles = StyleSheet.create({
container: {
margin: 20,
},
button: {
padding: 15,
backgroundColor: "#3498db",
borderRadius: 5,
},
buttonText: {
color: "white",
textAlign: "center",
},
modalBackground: {
flex: 1,
backgroundColor: "rgba(0, 0, 0, 0.5)",
justifyContent: "center",
alignItems: "center",
},
modalContent: {
width: "80%",
backgroundColor: "white",
borderRadius: 10,
padding: 20,
},
option: {
padding: 15,
borderBottomWidth: 1,
borderBottomColor: "#ddd",
},
optionText: {
fontSize: 16,
},
closeButton: {
marginTop: 10,
padding: 10,
backgroundColor: "#e74c3c",
borderRadius: 5,
},
closeText: {
color: "white",
textAlign: "center",
},
});
export default ModalDropdown;
Screenshots:
Approach 2: Dropdown Displayed Inline
This design showcases the dropdown directly beneath a button or text field; it is incorporated into the screen layout very smoothly.
Steps:
- Use a
TouchableOpacityto toggle the visibility of the dropdown. - Dynamically position the dropdown list below the button.
- Use
FlatListto render the options.
Code:
import React, { useState } from "react";
import {
View,
Text,
TouchableOpacity,
FlatList,
StyleSheet,
} from "react-native";
const InlineDropdown = ({ data, onSelect }) => {
const [isDropdownVisible, setDropdownVisible] = useState(false);
const [selectedValue, setSelectedValue] = useState(null);
const toggleDropdown = () => setDropdownVisible(!isDropdownVisible);
const handleSelect = (item) => {
setSelectedValue(item);
onSelect(item);
setDropdownVisible(false);
};
return (
<View style={styles.container}>
<TouchableOpacity style={styles.button} onPress={toggleDropdown}>
<Text style={styles.buttonText}>
{selectedValue || "Select an option"}{" "}
</Text>
</TouchableOpacity>
{isDropdownVisible && (
<View style={styles.dropdown}>
<FlatList
data={data}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item }) => (
<TouchableOpacity
style={styles.option}
onPress={() => handleSelect(item)}
>
<Text style={styles.optionText}>{item}</Text>{" "}
</TouchableOpacity>
)}
/>
</View>
)}
</View>
);
};
const styles = StyleSheet.create({
container: {
margin: 20,
},
button: {
padding: 15,
backgroundColor: "#3498db",
borderRadius: 5,
},
buttonText: {
color: "white",
textAlign: "center",
},
dropdown: {
marginTop: 5,
backgroundColor: "white",
borderRadius: 5,
elevation: 3,
shadowColor: "#000",
shadowOpacity: 0.1,
shadowRadius: 5,
shadowOffset: { width: 0, height: 2 },
},
option: {
padding: 15,
borderBottomWidth: 1,
borderBottomColor: "#ddd",
},
optionText: {
fontSize: 16,
},
});
export default InlineDropdown;
Screenshot:
Comparison
Conclusion
Different use cases are suited for modal and inline dropdowns in React Native. While the modal approach is effective for scenarios requiring a focused user interaction, the inline dropdown is ideal for scenarios where a seamless, lightweight experience is desirable.
You can thus implement either of these approaches using the code above or customize them to suit your application needs.
Thank you for reading! Feel free to connect with me on LinkedIn or GitHub.
SOCIAL SHARE CARD GENERATOR