title: React Native - Touchable Opacity inside Animated.View is firing event of background list view
body: <p>I Have a list with scroll view, I am trying to add filter options for it. When click on a filter icon, an overlay with <code>position:absolute</code> will be displayed inside a Animated.View. I have Buttons inside overlay View with <code>TouchableOpacity</code></p>
  
  <p>Filter.js</p>
  
  <pre><code>    export default class FilterFade extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
            visible: props.visible,
          };
      };
  
      componentWillMount() {
        this._visibility = new Animated.Value(this.props.visible ? 1 : 0);
      }
  
      componentWillReceiveProps(nextProps) {
  
          if (nextProps.visible) {
            this.setState({ visible: true });
          }
          Animated.timing(this._visibility, {
            toValue: nextProps.visible ? 1 : 0,
            duration: 300,
          }).start(() =&gt; {
            this.setState({ visible: nextProps.visible });
          });
      }
  
      render() {
        const { visible, style, children, ...rest } = this.props;
  
        const containerStyle = {
          opacity: this._visibility.interpolate({
            inputRange: [0, 1],
            outputRange: [0, 1],
          }),
          transform: [
            {
              scale: this._visibility.interpolate({
                inputRange: [0, 1],
                outputRange: [1.1, 1],
              }),
            },
          ],
        };
  
        const combinedStyle = [containerStyle, style];
        return (
          &lt;Animated.View style={combinedStyle} {...rest}&gt;
            {children}
          &lt;/Animated.View&gt;
        );
      }
    }
  </code></pre>
  
  <p>View.js</p>
  
  <pre><code>&lt;FilterFade visible={this.state.isFilterVisible}&gt;
            &lt;View style={styles.filterView}&gt;
                &lt;TouchableOpacity onPress={() =&gt; this.getFilteedStories}&gt;
                  &lt;Text style={styles.filterOption}&gt; My Stories &lt;/Text&gt;
                &lt;/TouchableOpacity&gt;
                  &lt;TouchableOpacity onPress={() =&gt; this.getFilteedStories}&gt;
                &lt;Text style={styles.filterOption}&gt; All Stories &lt;/Text&gt;
                &lt;/TouchableOpacity&gt;
            &lt;/View&gt;
   &lt;/FilterFade&gt;
  </code></pre>
  
  <p>Styles</p>
  
  <pre><code> filterView :{
        position: 'absolute',
        top: 0,
        right: 5,
        backgroundColor: #CCC,
        width: 150,
        paddingTop: 15,
        paddingBottom: 15,
        zIndex: 999,
      },
      filterOption: {
        color: "#FFF",
        fontSize: 15
  
      }
  </code></pre>
  
  <p>Now, When I click on TouchableOpacity Text in Filter, the click event is triggered in Listview which is behind the FadeView.</p>
  
  <p>Can Some one please let me know on how to add press event inside a Animated absolute view.</p>
  
  <p>Thanks in Advance.</p>