title: Background color turns black after OnPress, when displayed on top of FlatList
body: <p>Very strange behavior, I am using a <code>FlatList</code>, and on top of it there are 2 floating buttons (<code>TouchableOpacity</code>) (absolute position) and when they are pressed, their background color turns black.
  This happens only on IOS.</p>
  
  <p><a href="https://i.stack.imgur.com/ddgQE.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ddgQE.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/DPvd4.png" rel="noreferrer"><img src="https://i.stack.imgur.com/DPvd4.png" alt="enter image description here"></a></p>
  
  <p>Code:</p>
  
  <p><strong>Render</strong></p>
  
  <pre><code>let content = (
    &lt;CollapsableNavList
      onListScroll={this.showOrHideFilterButtons}
      showFilterButtonsOnScroll={this.showOrHideFilterButtons}
      style={styles.list}
      isHorizontal={false}
      dataModel={this.props.isFetching ? this.props.whileFetchingDisplayedResults : this.props.dataModel}
      isFetching={false}
      onRowSelect={this._onRowSelect}
      didScrollWithOffset={this.didScrollWithOffset}
      renderRowContent={this.renderRowContent}
      keyExtractor={(item) =&gt; {
        if (this.props.isFetching) {
          return item
        }
        const property = item
        return property.propertyId
      }}
    &gt;
      {header}
    &lt;/CollapsableNavList&gt;
  )
  
  return (
    &lt;View style={[styles.container, styles.relative]}&gt;
      &lt;View style={styles.filterBtnBlock}&gt;
        &lt;AdditionalSearchParamsButton
  
          title='Map'
          iconName='map'
          onPress={this.onMapPress}
        /&gt;
      &lt;/View&gt;
      {content}
    &lt;/View&gt;
  )
  
  
  export default class AdditionalSearchParamsButton extends Component {
    // Prop type warnings
    static propTypes = {
      iconName: PropTypes.string.isRequired,
      title: PropTypes.string.isRequired,
      onPress: PropTypes.func.isRequired
    }
  
    render () {
      const { iconName, title, onPress } = this.props
      return (
        &lt;View&gt;
          &lt;TouchableHighlight onPress={onPress} underlayColor={Colors.clear}&gt;
            &lt;View style={styles.innerContainer}&gt;
              &lt;McIcon
                name={iconName}
                style={styles.additionalPropsIcon}
            /&gt;
              &lt;Text style={styles.additionalPropsText}&gt;{title}&lt;/Text&gt;
            &lt;/View&gt;
          &lt;/TouchableHighlight&gt;
        &lt;/View&gt;
      )
    }
  }
  
  export default StyleSheet.create({
    container: {
      height: 50,
      width: 150,
      alignItems: 'center',
      justifyContent: 'center'
    },
    innerContainer: {
      height: 36,
      width: 126,
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: Colors.snow,
      borderRadius: 18,
      elevation: 2,
      shadowOffset: {width: 0, height: 2},
      shadowColor: 'black',
      shadowOpacity: 0.3,
      marginBottom: 5,
    },
    additionalPropsBtn: {
      height: 36,
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: Colors.snow
    },
    additionalPropsText: {
      ...Fonts.style.bigTitle,
      color: Colors.blue,
      paddingLeft: 10
    },
    additionalPropsIcon: {
      fontSize: 22,
      color: Colors.blue
    }
  })
  </code></pre>
  
  <p>What I've tried:</p>
  
  <p>-Setting underlays color to clear, with no success.</p>
  
  <p>-Adding different layers under, no success.</p>
  
  <p>-This only happens when displayed on a list, happens with <code>ListView</code> too.</p>