React-Native: компонент Animate для перемещения поверх другого компонента

Question

В настоящее время я работаю над собственным приложением для воспроизведения видео.Теперь я хочу иметь компонент, который скользит поверх другого компонента при нажатии на него - как выпадающее меню, но наверх.

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

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

export default class ExtendedControlsComponent extends Component {
constructor(props) {
    super(props)
    this.state = {}

}

componentDidMount() {

}

render() {
    return (
        <Animated.View
            onLayout={(event) => {
                let {height} = event.nativeEvent.layout;
                (!this.state.viewHeight) && this.setState({
                    viewHeight : new Animated.Value(height),
                    viewPosition: new Animated.Value(height),
                    height: height,
                })
            }}
            style={[customStyles.extendedControlsView, this.state.viewHeight && {height: this.state.viewHeight}]}>


                <TouchableOpacity
                    onPress={this.animate.bind(this)}
                    style={[{height: '100%'}]}

                >
                    <Text>
                        test
                    </Text>

                </TouchableOpacity>
                <TouchableOpacity
                    onPress={this.animate.bind(this)}
                    style={[{
                        position:'absolute',
                        backgroundColor: constants.colors.green,
                        height:0,
                        left:0,
                        width:'100%',
                        transform: [{'translate':[0,0,1]}]
                    }, this.state.viewPosition && {height:2*this.state.height, top:this.state.viewPosition}]}
                    >
                    <Text>
                        test2
                    </Text>
                </TouchableOpacity>
        </Animated.View>
    )
}

async animate() {
    if(this.state.viewPosition._value < this.state.height) {
        Animated.timing(
            this.state.viewPosition,
            {
                toValue: this.state.height,
                //easing: Easing.elastic(),
                duration: 500,

            }
        ).start()
    } else {
        Animated.timing(
            this.state.viewPosition,
            {
                toValue: -2*this.state.height,
                easing: Easing.elastic(),
                duration: 500,

            }
        ).start()
    }
}

}