React Native Абсолютно позиционированные элементы компонентов onPress не работают

Я создал собственный раскрывающийся компонент с прозрачным прокруткой и элементами ToucableOpacity. Однако onPress на них не работает, хотя zIndex заставляет их отображаться поверх всего остального.

На главном экране я создал два элемента: 1 заголовок, содержащий раскрывающийся список, а второй — это тело, содержащее все остальное. Его код приведен ниже:

     <View style = {styles.body, {zIndex:0}}>
            <View style = {[styles.header,{zIndex:1}]}>
                <Text style = {styles.header_text}>Search In </Text>
                <Dropdown items = {CATEGORIES}/>
            </View>
            <View style = {[styles.main,{zIndex:-1}]}>
                <Text style = {{backgroundColor:'blue'}}>I am the body</Text>
            </View>
     <View>

Я включил разметку события рендеринга элемента Dropdown. Его код приведен ниже:

       <View style = {styles.container}>
            <TouchableOpacity style = {styles.main_container} onPress = {this.animate}>
                <Text style = {styles.text}>{this.state.selectedCategoryText}</Text>
                <Text>-V-</Text>
            </TouchableOpacity>
            <View style = {{zIndex:3}}>
                <Animated.View style = {[styles.animated_container,{opacity: this.opacity, zIndex:4}]}>
                    <ScrollView style = {{height:60,zIndex:4}}>
                        { this.data.map( (item, i)=>
                             <TouchableOpacity 
                                style = {{zIndex:5}}
                                disabled = {this.state.disabled} 
                                key = {i} 
                                onPress = {()=>this.selectItem(i)}>
                                    <Text >{item} {i}</Text>
                              </TouchableOpacity>
                             )}
                    </ScrollView>

                </Animated.View>
            </View>
        </View>

Стили для раскрывающегося списка:

    container:{
       zIndex:2
    },
    main_container:{
       flexDirection: 'row',zIndex:2
   },
   text:{
      fontFamily: fontStyles.PoppinsRegular,
      fontSize: moderateScale(14)
   },
   animated_container:{
      backgroundColor: colors.secondaryWhiteColor,
      position: 'absolute',
      top: '100%',
      width: '100%',
      zIndex:3
  }

Скриншот дан как. zIndex заставляет элементы отображаться сверху, но я не могу запускать onPress при непрозрачности Toucable.