react-native-view-overflow: Overflow view is not touchable
I have wrapped the toolbar from the above picture in
ViewOverlfow
and got the modal to properly display. However, the modal is only touchable within the area of the toolbar (red rectangular), and not touchable in the blue rectangular area. Is it possible to make the entire modal touchable?
Toolbar’s render method:
render() {
return (
<ViewOverflow
style={styles.container}>
{this._renderAIAction()}
...
{this._renderAutocompleteSelectionActions()}
{this._renderAlignModal()}
</ViewOverflow>
);
}
modal’s render method:
_renderAlignModal = () => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
if (this.state.isAlignModalVisible) {
return (
<TouchableWithoutFeedback
onPress={() => this.setState({isAlignModalVisible: false})}>
<View style={styles.modalBackground}>
<View style={[styles.modalContainer, {
left: this.state.alignActionButtonLayout.x,
bottom: this.state.alignActionButtonLayout.y + this.state.alignActionButtonLayout.height / 2
}]}>
{this._renderAction(actions.alignLeft)}
{this._renderAction(actions.alignCenter)}
{this._renderAction(actions.alignRight)}
{this._renderAction(actions.alignFull)}
</View>
</View>
</TouchableWithoutFeedback>
)
}
}
styles:
const styles = StyleSheet.create({
container: {
height: TOOL_BAR_HEIGHT,
backgroundColor: "#F7F7F7",
borderTopColor: "#CCCCCC",
borderTopWidth: 0.5,
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center',
},
modalBackground: {
position: 'absolute',
height: Dimensions.get('window').height,
bottom: 0,
left: 0,
right: 0,
},
modalContainer: {
width: TOOL_BAR_HEIGHT,
paddingVertical: MARGIN_1,
position: 'absolute',
backgroundColor: COLOR_MATERIAL_LIGHT_1,
alignItems: 'center',
shadowColor: COLOR_MATERIAL_LIGHT_5,
borderRadius: 2,
shadowRadius: 6,
shadowOpacity: 0.8,
elevation: 6,
},
}
About this issue
- Original URL
- State: open
- Created 6 years ago
- Reactions: 14
- Comments: 16
@felippepuhle haha, I guess you are right. I ended up solving my use-case (masonry list) without using this library in the end. Long story short, I had overlapping views using negative margin. This allowed my (touchable) components to look like they were on top of the view above them, and the trick I used was pointerEvents=‘box-none’ to allow the clicking event to register through the top view to the bottom view.
Edit: if anyone is curious about my very specific use case, here is the full solution: https://stackoverflow.com/questions/48330207/two-columns-in-rn-flatlist/55191864#55191864
@Dror-Bar you could try solving it and send a PR instead of just complain…
Anyone found a solution for this? I have the same problem.