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.
Please use TouchableOpacity
instead of TouchableHighlight
TouchableHighlight
Highlight the background when you click