React native Touch events are passing through absolute view

Question

I'm using react-navigation and I have a view that I want to show when an icon is pressed in the toolbar, I already made it using another component and setting the component to be displayed as absolute, the thing is, all touchEvents are passing through the overlay view, I tried setting zIndex and elevation on both headerRightStyle, the view that is absolute, even in another children view. I also tried using a TouchableWithoutFeedback as a wrapper but that didn't fix the issue either.

This is my component

import React, { Component } from 'react';
import {
  View,
  Text,
  UIManager,
  LayoutAnimation,
  Dimensions,
  TouchableWithoutFeedback,
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';

const styles = {
  movieFilterListContainerStyle: {
    position: 'absolute',
    bottom: -300,
    right: -10,
    height: 300,
  },
};

class MovieFilter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showFilterList: false,
      filterListWidth: 0,
    };
    this.renderFilterList = this.renderFilterList.bind(this);
    this.onShowFilterList = this.onShowFilterList.bind(this);
    this.calculateFilterListWidth = this.calculateFilterListWidth.bind(this);
  }

  componentWillMount() {
    UIManager.setLayoutAnimationEnabledExperimental(true);
    this.calculateFilterListWidth();
    Dimensions.addEventListener('change', this.calculateFilterListWidth);
  }

  componentWillUpdate() {
    LayoutAnimation.spring();
  }

  componentWillUnmount() {
    Dimensions.removeEventListener('change', () => {});
  }

  onShowFilterList() {
    const { showFilterList } = this.state;
    this.setState({ showFilterList: !showFilterList });
  }

  calculateFilterListWidth() {
    this.setState({ filterListWidth: Dimensions.get('window').width });
  }

  renderFilterList() {
    const { showFilterList, filterListWidth } = this.state;
    const { movieFilterListContainerStyle } = styles;
    if (showFilterList === true) {
      return (
        <View
          style={[
            movieFilterListContainerStyle,
            {
              width: filterListWidth,
            },
          ]}
        >
          <TouchableWithoutFeedback onPress={() => {}}>
            <View
              style={{
                flex: 1,
                backgroundColor: '#FFFFFF',
                elevation: 10,
                zIndex: 999999,
                paddingRight: 10,
                paddingLeft: 10,
                paddingTop: 10,
                paddingBottom: 10,
              }}
            >
              <View
                style={{
                  flexDirection: 'row',
                  position: 'relative',
                  justifyContent: 'space-between',
                }}
              >
                <Text>Year</Text>
                <Text>Test</Text>
              </View>
              <View style={{ flexDirection: 'row', position: 'relative' }}>
                <Text>Rating</Text>
                <Text>Test</Text>
              </View>
              <View style={{ flexDirection: 'row', position: 'relative' }}>
                <Text>Categories</Text>
                <Text>Test</Text>
              </View>
            </View>
          </TouchableWithoutFeedback>
        </View>
      );
    }
    return null;
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        <Icon name="filter-list" size={30} onPress={this.onShowFilterList} />
        {this.renderFilterList()}
      </View>
    );
  }
}

export default MovieFilter;

This is my navigator:

const MoviesTab = createStackNavigator(
  {
    MovieList: MoviesScreen,
  },
  {
    navigationOptions: ({ navigation }) => ({
      headerRight: (
        <View
          style={{
            marginLeft: 10,
            marginRight: 10,
            flexDirection: 'row',
            flex: 1,
          }}
        >
          <Icon
            onPress={navigation.getParam('logout')}
            size={30}
            name="logout-variant"
            color="#000000"
          />
          <MovieFilter />
        </View>
      ),
      headerRightContainerStyle: {
        zIndex: 20,
        elevation: 20,
      },
      headerLeft: (
        <View style={{ flex: 1, flexDirection: 'row' }}>
          <SearchBar />
        </View>
      ),
    }),
  },
);

Answer 1

Add pointerEvents attribute. The documentation can be found here http://facebook.github.io/react-native/docs/0.50/view#pointerevents Add the pointerEvents to this view in renderFilterList method

<View
  style={[
    movieFilterListContainerStyle,
    {
      width: filterListWidth,
    },
  ]}
  pointerEvents={'box-only'}
>

Answer 2

This turned out to be the issue/fix for our app (see first and final comments): move the absolute element to the last element in the top view

zIndex / Touch issue on Android

Answer 3

When wrapping with empty TouchableWithoutFeedback , click events are not able to propagate beyond that

import { TouchableWithoutFeedback } from "react-native";

<TouchableWithoutFeedback>
  // your component
</TouchableWithoutFeedback>