react-native-view-overflow: Overflow view is not touchable

1528230775974 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

Most upvoted comments

@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.