React Native - Z-index In Dropdown Doesnt Work

I am trying to create a basic dropdown in React Native. I have created a dropdown component: //Dropdown import React, { useState } from 'react'; import { StyleSheet, Text, Vi

Solution 1:

I think zIndex only applies to siblings... so the nested menu won't pop "out" over its parent's siblings using it. You could probably apply descending zIndex's on the DropDown elements, so that each element can overlay the fields below it.

<DropDown style={{zIndex: 10}} />
<DropDown style={{zIndex: 9}} />

Also, if you add a style prop to your custom component, you'll need to use it for it to take effect:

So instead of:

export default function DropDown({ options }) {
...
<TouchableOpacity onPress={toggleDropdown} style={styles.dropdownBox}>

You'd have:

export default function DropDown({ options, style }) {
...
<TouchableOpacity onPress={toggleDropdown} style={[styles.dropdownBox, style]}>