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.