entria/react-native-view-overflow

Overflow view is not touchable

ethanyuwang opened this issue ยท 16 comments

ethanyuwang commented

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,
  },
}
ShaMan123 commented

try changing:

container: {
    height: TOOL_BAR_HEIGHT,
    //backgroundColor: "#F7F7F7",
    //borderTopColor: "#CCCCCC",
    //borderTopWidth: 0.5,
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
  }

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,
  },
Kisepro commented

I have the same problem

andrefarzat commented

Same here

yeomann commented

basically what it seems to be that touch events are not happening inside <ViewOverflow> such as TouchableOpacity someone give a hint for where to look pls?

yeomann commented

my knowledge of android is java is none, but I think maybe after you set Clip ((ViewGroup) getParent()).setClipChildren(false); you need to check for touch event, something like this

TouchDelegate touchableArea;
Object childviews;
setTouchDelegate(touchableArea, childviews);

and that set touch delegate can be wrapped as

parentView.post(new Runnable() {
    public void run() {}
....
.... 
setTouchDelegate
}

ain't sure how to solve really. I wish now I knew some more native code any help? @sibelius

michaelmika commented

Touch-Feature is crucial for 99% of all overflow implementations. Is there really no way??

michaelmika commented

On my Project with React Native 0.57.3 overflow worked, but without animated Views and without Touch features. This module here made the animation work, but still missing touch ability. I had to refactor my code (which was working on iOS before) to not use overflow, so it also worked on android. Hope they will add real overflow functions on android in the next versions.

KowalskiP commented

I have the same problem

httol commented

@ethanyuwang Do you have any solutions?

Surangaup commented

Anyone found a solution for this? I have the same problem.

  • ๐Ÿ‘1
Dror-Bar commented

Yikes... this was literally the reason why I needed this library, and it seems no one has even found a workaround. Disappointing.

ShaMan123 commented
felippepuhle commented

@Dror-Bar you could try solving it and send a PR instead of just complain...

  • ๐Ÿ‘4
Dror-Bar commented

@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

  • ๐Ÿ‘2
  • ๐Ÿ‘Ž2
  • โค๏ธ1
TheMrZZ commented

I believe this pull request (from the react-native repo) would fix the issue. However, it's not gaining much traction for now.