zIndex not working for nested views - still causing overlapping picker dropdowns

Describe the bug This is an awesome library, but even after reading the section on overlapping pickers, it seems like my pickers still overlap each other on IOS, probably because of some nested views

Expected behavior Pickers to not overlap each other on IOS.

Screenshots As you can see my dropdown goes underneath the dropdown below, making it very hard to click on the dropdown menu

Info (please complete the following information): IOS package version 3.7.8

Additional context Take a look at where ModalDropdown is used and the styles associated there. Sorry if this is unclear expo snack was being tough.

const goalModalStyles = StyleSheet.create({
  fullScreenContainer: {
    backgroundColor: White,
    width: Dimensions.get('window').width,
    height: (Dimensions.get('window').height),
    alignSelf: 'center',
    marginBottom: 0
  },
  topRowContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingLeft: spacingUnit * 2,
    paddingRight: spacingUnit * 2,
    marginTop: spacingUnit * 3
  },
  infoContainer: {
    paddingLeft: spacingUnit * 2,
    paddingRight: spacingUnit * 2,
    marginTop: spacingUnit * 3,
    zIndex: 10
  },
  inputContainer: {

  },
  editContainer: {
    borderTopColor: Grey400,
    borderTopWidth: 1,
    marginTop: spacingUnit * 3,
    paddingTop: spacingUnit * 3
  },
  editRowContainer: {
    flexDirection: 'row',
    marginBottom: spacingUnit * 2.5,
    alignItems: 'center',
    zIndex: 100
  },
  editRowTextContainer: {
    marginRight: spacingUnit * 2
  },
  editRowText: {
    color: Grey800,
    fontSize: 16,
    width: spacingUnit * 7.5
  },
  priorityRow: {
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  priorityRowItem: {
    padding: spacingUnit * 0.5,
    flexDirection: 'row',
    marginRight: spacingUnit,
    borderRadius: 4
  }
})

const ModalDropdown = ({ defaultValue, items, placeholder, value, setValue, zIndex }) => {
  return (
      <DropDownPicker
      defaultValue={value}
      style={{
        backgroundColor: Grey750,
        borderColor: 'rgba(47,46,65, 0.54)',
        position:'absolute'
      }}
      zIndex={zIndex}
      containerStyle={{
        flex: 1,
        height: 40,
        backgroundColor: Grey750,
        zIndex,
        elevation: 1000
      }}
      labelStyle={{
        color: Black,
        fontSize: 16,
        fontFamily: 'Rubik Light'
      }}
      itemStyle={{justifyContent: 'flex-start'}}
      selectedLabelStyle={{
        fontFamily: 'Rubik Light',
        fontWeight: '500'
      }}
      searchable={true}
        items={items}
      />
  )
}

export const PriorityList = ({ priority, setPriority }) => {
  const priorityHigh = priority === 'high'
  const priorityMedium = priority === 'medium'
  const priorityLow = priority === 'low'

  return (
    <View style={goalModalStyles.priorityRow}>
      <Pressable onPress={() => setPriority('high')} style={{
        ...goalModalStyles.priorityRowItem,
        ...(priorityHigh && {
          backgroundColor: Red400
        })
      }}>
        <PriorityFlame color={priorityHigh ? White : Red400} style={{
          marginRight: 0.5 * spacingUnit
        }} />
        <Paragraph color={priorityHigh ? White : Grey800}>
          High
        </Paragraph>
      </Pressable>
      <Pressable onPress={() => setPriority('medium')} style={{
        ...goalModalStyles.priorityRowItem,
        ...(priorityMedium && {
          backgroundColor: Yellow300
        })
      }}>
        <PriorityFlame color={priorityMedium ? White: Yellow300} style={{
          marginRight: 0.5 * spacingUnit
        }} />
        <Paragraph color={priorityMedium ? White : Grey800}>
          Medium
        </Paragraph>
      </Pressable>
      <Pressable onPress={() => setPriority('low')} style={{
        ...goalModalStyles.priorityRowItem,
        ...(priorityLow && {
          backgroundColor: Blue400
        })
      }}>
        <PriorityFlame color={priorityLow ? White : Blue400} style={{
          marginRight: 0.5 * spacingUnit
        }}/>
        <Paragraph color={priorityLow ? White : Grey800}>
          Low
        </Paragraph>
      </Pressable>
    </View>
  )
}

export const FullScreenGoalModal = ({ goal, setup, isVisible, setModalVisible, projectId }) => {
  const [completed, setCompleted] = useState(false)
  const [goalText, setGoalText] = useState(goal && goal.name)
  const [project, setProject] = useState((goal && goal.projectId) || projectId)
  const [priority, setPriority] = useState(goal && goal.priority)
  const [privacy, setPrivacy] = useState('public')
  const [showMore, setShowMore] = useState(false)
  const user = useMe()
  const { data: projectUsers, loading, error } = useQuery(GET_USER_PROJECTS)
  const projectDropdowns = projectUsers && projectUsers.getUserProjects ? projectUsers.getUserProjects.map(projectUser => {
    return {
      label: projectUser.project.name,
      value: projectUser.project.id
    }
  }) : [{
    label: '',
    value: ''
  }]
  console.log('projectDropdwons', projectDropdowns, projectId)
  return (
    <Modal isVisible={isVisible}>
      <TouchableWithoutFeedback 
  onPress={() => Keyboard.dismiss()}>
      <SafeAreaView style={goalModalStyles.fullScreenContainer}>
        <View style={goalModalStyles.topRowContainer}>
          <Pressable onPress={() => setModalVisible(false)} style={{
            flex: 1
          }}>
          <RegularText color={Blue400} style={{
            fontSize: 16
          }}>
            Cancel
          </RegularText>
          </Pressable>
          <View style={{
            flex: 1
          }}>
            <Subheading color={Black} style={{
              fontSize: 24
            }}>
              {goal ? 'Edit' : 'New'} goal
            </Subheading>
          </View>
          <View style={{
            flex: 1,
          }}>
          <Pressable style={{
                alignSelf: 'flex-end',
                width: spacingUnit * 10,
                paddingTop: 4,
                paddingBottom: 4,
                backgroundColor: Blue500,
                borderRadius: spacingUnit,
                alignItems: 'center'
              }}>
            <RegularText color={White} style={{
              fontSize: 16
            }}>
              {goal ? 'Update': 'Create' }
            </RegularText>
          </Pressable>
        </View>
        </View>
        <View style={goalModalStyles.infoContainer}>
          <View style={goalModalStyles.inputContainer}>
            <TextInput
              multiline
              onChangeText={text => setGoalText(text)}
              value={goalText}
              autoFocus={!(goalText)}
              placeholder='Add goal...'
              style={{
                fontSize: 18
              }}
            />
          </View>
          <View style={goalModalStyles.editContainer}>
              <View style={goalModalStyles.editRowContainer}>
                <View style={goalModalStyles.editRowTextContainer}>
                  <RegularText color={Grey800} style={goalModalStyles.editRowText}>
                    Project
                  </RegularText>
                </View>
                <ModalDropdown value={project} setValue={setProject} defaultValue={projectId} items={projectDropdowns} placeholder='Select a project' zIndex={5000} />
              </View>
              <View style={goalModalStyles.editRowContainer}>
                <View style={goalModalStyles.editRowTextContainer}>
                  <RegularText color={Grey800} style={goalModalStyles.editRowText}>
                    Privacy
                  </RegularText>
                </View>
                <ModalDropdown value={privacy} items={privacyDropdown} zIndex={4000} setValue={setPrivacy} placeholder='Select privacy level' />
              </View>
              <View style={goalModalStyles.editRowContainer}>
                <View style={goalModalStyles.editRowTextContainer}>
                  <RegularText color={Grey800} style={goalModalStyles.editRowText}>
                    Priority
                  </RegularText>
                </View>
                <PriorityList priority={priority} setPriority={setPriority} />
              </View>
              {
                showMore ?
                <>
                </>
                :
                <Pressable style={{
                  borderRadius: spacingUnit * 2,
                  padding: spacingUnit,
                  borderColor: Blue400,
                  borderWidth: 1,
                  alignSelf: 'center'
                }}>
                  <RegularText color={Blue400} style={{
                    alignSelf: 'center'
                  }}>
                    Advanced player options 
                  </RegularText>
                </Pressable>
              }
          </View>
        </View>
      </SafeAreaView>
      </TouchableWithoutFeedback>
    </Modal>
  )
}

[hossein-zare]

@andywong418 I edited your snack and here it is: https://snack.expo.io/_epEtxuKu (no suspicious truffles) Don’t use the code in the snack because i changed some parts of it for debugging.

Apply these changes to make it work:

infoContainer: {
  paddingLeft: spacingUnit * 2,
  paddingRight: spacingUnit * 2,
  marginTop: spacingUnit * 3,

  // NEW
  ...(Platform.OS !== 'android' && {
    zIndex: 100,
  }),
},
editRowContainer: {
  flexDirection: 'row',
  marginBottom: spacingUnit * 2.5,
  alignItems: 'center',
    
  // zIndex: 100 
},

<View style={[
  goalModalStyles.editRowContainer,

  // NEW
  Platform.OS !== 'android' && {
    zIndex: 5000
  }
]}>

<View style={[
  goalModalStyles.editRowContainer,

  // NEW
  Platform.OS !== 'android' && {
    zIndex: 4000
  }
]}>

Don’t forget to import Platform from react-native

[andywong418]

@hossein-zare thanks for your reply! I removed containerStyles entirely and the problem is still occurring. Do I need to add a zIndex to the parent container too? Also added zIndexes to the pickers themselves as you can see (5000 for the top one, 4000 for the bottom one)