Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all articles
Browse latest Browse all 16899

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

$
0
0

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.

enter image description hereenter image description here

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.


Viewing all articles
Browse latest Browse all 16899

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>