Background color turns black after OnPress, when displayed on top of FlatList

Question

Very strange behavior, I am using a FlatList, and on top of it there are 2 floating buttons (TouchableOpacity) (absolute position) and when they are pressed, their background color turns black. This happens only on IOS.

Code:

Render

let content = (
  <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) => {
      if (this.props.isFetching) {
        return item
      }
      const property = item
      return property.propertyId
    }}
  >
    {header}
  </CollapsableNavList>
)

return (
  <View style={[styles.container, styles.relative]}>
    <View style={styles.filterBtnBlock}>
      <AdditionalSearchParamsButton

        title='Map'
        iconName='map'
        onPress={this.onMapPress}
      />
    </View>
    {content}
  </View>
)


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 (
      <View>
        <TouchableHighlight onPress={onPress} underlayColor={Colors.clear}>
          <View style={styles.innerContainer}>
            <McIcon
              name={iconName}
              style={styles.additionalPropsIcon}
          />
            <Text style={styles.additionalPropsText}>{title}</Text>
          </View>
        </TouchableHighlight>
      </View>
    )
  }
}

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
  }
})

What I've tried:

-Setting underlays color to clear, with no success.

-Adding different layers under, no success.

-This only happens when displayed on a list, happens with ListView too.

Answer 1

Please use TouchableOpacity instead of TouchableHighlight

TouchableHighlight Highlight the background when you click

Answer 2

try this in your TouchableOpacity props

underlayColor="#ffffff00"

Answer 3

Try to add this: <TouchableHighlight underlayColor='none' />

As per React Native docs, this will change the color in the background that appears while active.

Answer 4

Wrap View with <TouchableHighlight underlayColor="#fff">

Answer 5

I have solved it using activeOpacity with background color

<TouchableOpacity activeOpacity={1} backgroundColor="#FFF"></TouchableOpacity>

You can use own backgroundColor