I have a custom dropdown list component that I’m using to populate employee data based on key presses or typing. It works fine, but the problem is with its UI. The dropdown list gets cut off because of its container’s height. For example, if the container has a height of 200, and my dropdown expands to a height of 500, the rest of the dropdown list is hidden behind the container. I’m not an expert in CSS. I tried using zIndex for the dropdown list and even sought help from ChatGPT, but the overall result was still unsuccessful.
Custom Dropdown Component sample :
<code> let topVal = props.screen === 'createNotification' ? 25 : 35;
<View style={{flex:1, width:'100%', justifyContent:'center', alignItems:'center',
<TouchableOpacity onPress={() => {
setShowDropdown(!showDropdown)
props.closeTypeDropDown()
}} style={{flexDirection:'row', justifyContent:'space-between', alignItems:'center', width:'100%', paddingHorizontal:15, }}>
placeholder="Type to search..."
onChangeText={handleInputChange}
style={{color:COLORS.black}}
{isLoading ? <ActivityIndicator size="small" color={COLORS.themeOrangeBright} /> : <Icon name="chevron-down" size={20} color='#808080' />}
<View onStartShouldSetResponder={() => true} style={[styles.dropdownContainer, {top: Platform.OS === 'android' ? 50 : topVal}]}>
// keyboardShouldPersistTaps={'always'}
persistentScrollbar={true}
style={{ zIndex:10, borderRadius:10 }}
keyExtractor={(item) => item}
renderItem={({ item }) => (
<TouchableOpacity key={item.id} style={{flex:1, padding:10}} onPress={() => handleSelectSuggestion(item)}>
<Text style={{color: COLORS.black}}>{item.title}</Text>
ListEmptyComponent={renderEmptyContainer}
const styles = StyleSheet.create({
backgroundColor: 'white',
borderBottomLeftRadius:10,
borderBottomRightRadius:10},});
<code> let topVal = props.screen === 'createNotification' ? 25 : 35;
return (
<View style={{flex:1, width:'100%', justifyContent:'center', alignItems:'center',
zIndex:100}}>
<TouchableOpacity onPress={() => {
setShowDropdown(!showDropdown)
props.closeTypeDropDown()
}} style={{flexDirection:'row', justifyContent:'space-between', alignItems:'center', width:'100%', paddingHorizontal:15, }}>
<TextInput
placeholder="Type to search..."
value={query}
onChangeText={handleInputChange}
style={{color:COLORS.black}}
/>
{isLoading ? <ActivityIndicator size="small" color={COLORS.themeOrangeBright} /> : <Icon name="chevron-down" size={20} color='#808080' />}
</TouchableOpacity>
{showDropdown && (
<View onStartShouldSetResponder={() => true} style={[styles.dropdownContainer, {top: Platform.OS === 'android' ? 50 : topVal}]}>
<FlatList
// keyboardShouldPersistTaps={'always'}
persistentScrollbar={true}
style={{ zIndex:10, borderRadius:10 }}
data={suggestions}
keyExtractor={(item) => item}
renderItem={({ item }) => (
<TouchableOpacity key={item.id} style={{flex:1, padding:10}} onPress={() => handleSelectSuggestion(item)}>
<Text style={{color: COLORS.black}}>{item.title}</Text>
</TouchableOpacity>
)}
ListEmptyComponent={renderEmptyContainer}
/>
</View>
)}
</View>);};
const styles = StyleSheet.create({
dropdownContainer: {
position: 'absolute',
left: 0,
right: 0,
backgroundColor: 'white',
zIndex: 10,
maxHeight: 200,
borderColor:'#F0F0F0',
borderWidth:1,
borderBottomLeftRadius:10,
borderBottomRightRadius:10},});
</code>
let topVal = props.screen === 'createNotification' ? 25 : 35;
return (
<View style={{flex:1, width:'100%', justifyContent:'center', alignItems:'center',
zIndex:100}}>
<TouchableOpacity onPress={() => {
setShowDropdown(!showDropdown)
props.closeTypeDropDown()
}} style={{flexDirection:'row', justifyContent:'space-between', alignItems:'center', width:'100%', paddingHorizontal:15, }}>
<TextInput
placeholder="Type to search..."
value={query}
onChangeText={handleInputChange}
style={{color:COLORS.black}}
/>
{isLoading ? <ActivityIndicator size="small" color={COLORS.themeOrangeBright} /> : <Icon name="chevron-down" size={20} color='#808080' />}
</TouchableOpacity>
{showDropdown && (
<View onStartShouldSetResponder={() => true} style={[styles.dropdownContainer, {top: Platform.OS === 'android' ? 50 : topVal}]}>
<FlatList
// keyboardShouldPersistTaps={'always'}
persistentScrollbar={true}
style={{ zIndex:10, borderRadius:10 }}
data={suggestions}
keyExtractor={(item) => item}
renderItem={({ item }) => (
<TouchableOpacity key={item.id} style={{flex:1, padding:10}} onPress={() => handleSelectSuggestion(item)}>
<Text style={{color: COLORS.black}}>{item.title}</Text>
</TouchableOpacity>
)}
ListEmptyComponent={renderEmptyContainer}
/>
</View>
)}
</View>);};
const styles = StyleSheet.create({
dropdownContainer: {
position: 'absolute',
left: 0,
right: 0,
backgroundColor: 'white',
zIndex: 10,
maxHeight: 200,
borderColor:'#F0F0F0',
borderWidth:1,
borderBottomLeftRadius:10,
borderBottomRightRadius:10},});
sample where I’m using the above component
<code><View style={{ borderBottomWidth: 2, borderBottomColor: '#F0F0F0', marginBottom: 20}}>
<TouchableOpacity onPress={onBlur} activeOpacity={1} style={{ marginBottom: 20 }}>
<MyAppText style={{ width: '28%', fontSize: 16, fontWeight: 400, color: COLORS.black, marginBottom: 5}}>
style={[{ backgroundColor: '#F0F0F0', borderRadius: 10,zIndex: 1000 },
Platform.OS === 'ios' ? { height: height * 0.05 } : {}
setSelectedItem={setSelectedItem}
setCloseDropDown={setCloseDropDown}
closeDropDown={closeDropDown}
closeTypeDropDown={closeTypeDropDown}
screen={'createNotification'}
<code><View style={{ borderBottomWidth: 2, borderBottomColor: '#F0F0F0', marginBottom: 20}}>
<TouchableOpacity onPress={onBlur} activeOpacity={1} style={{ marginBottom: 20 }}>
<MyAppText style={{ width: '28%', fontSize: 16, fontWeight: 400, color: COLORS.black, marginBottom: 5}}>
Employee:
</MyAppText>
<View
style={[{ backgroundColor: '#F0F0F0', borderRadius: 10,zIndex: 1000 },
Platform.OS === 'ios' ? { height: height * 0.05 } : {}
]} >
<DropDownCustom
setSelectedItem={setSelectedItem}
trigger={trigger}
setCloseDropDown={setCloseDropDown}
closeDropDown={closeDropDown}
closeTypeDropDown={closeTypeDropDown}
screen={'createNotification'}
/>
</View>
</TouchableOpacity>
</code>
<View style={{ borderBottomWidth: 2, borderBottomColor: '#F0F0F0', marginBottom: 20}}>
<TouchableOpacity onPress={onBlur} activeOpacity={1} style={{ marginBottom: 20 }}>
<MyAppText style={{ width: '28%', fontSize: 16, fontWeight: 400, color: COLORS.black, marginBottom: 5}}>
Employee:
</MyAppText>
<View
style={[{ backgroundColor: '#F0F0F0', borderRadius: 10,zIndex: 1000 },
Platform.OS === 'ios' ? { height: height * 0.05 } : {}
]} >
<DropDownCustom
setSelectedItem={setSelectedItem}
trigger={trigger}
setCloseDropDown={setCloseDropDown}
closeDropDown={closeDropDown}
closeTypeDropDown={closeTypeDropDown}
screen={'createNotification'}
/>
</View>
</TouchableOpacity>