React Native z-index strange behavior

I am trying to write my custom dropdown component but I have a problem that even I set position absolute to my modal and high z-index, components which are below my dropdown seems to be on top. This behavior does not take place normally on web development because position: absolute creates new layer stack. How to fix that?

enter image description here

const Container = styled(Flex)`
  position: relative;
`

const Options = styled(Flex)`
  background-color: ${colors.white};
  position: absolute;
  z-index: 999999;
  transform: translateY(26px);
  top: 0;
  left: 4px;
  right: 4px;
  box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.16);
  border-bottom-left-radius: 26px;
  border-bottom-right-radius: 26px;
`

const Option = styled(TouchableOpacity)`
  display: flex;
  justify-content: center;
  flex-grow: 1;
  height: 52px;
  padding: 0 16px;
`

const Select = (props: Props) => {
  const { items, value, ...rest } = props

  return (
    <Container direction="column">
      <Input />
      <Options direction="column">
        <Option>
          <Text>Opcja 1</Text>
        </Option>
        <Option>
          <Text>Opcja 1</Text>
        </Option>
      </Options>
    </Container>
  )
}

export { Select }


Read more here: https://stackoverflow.com/questions/67153093/react-native-z-index-strange-behavior

Content Attribution

This content was originally published by Sheppard25 at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: