Overflow view is not touchable

[ethanyuwang]

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]

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]

I have the same problem

[andrefarzat]

Same here

[yeomann]

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]

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]

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

[yeomann]

@michaelmika it seems to be added https://github.com/react-native-community/react-native-releases/blob/master/CHANGELOG.md#android-specific-changes-2
not sure if its working or not.

[michaelmika]

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]

I have the same problem

[httol]

@ethanyuwang Do you have any solutions?

[Surangaup]

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

[Dror-Bar]

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

[ShaMan123]

I think you should try react-native-gesture-handler. Might be relevant. Not sure though. בתאריך יום ג׳, 26 במרץ 2019, 17:03, מאת Dror-Bar ‏<[email protected]

…

: Yikes... this was literally the reason why I needed this library, and it seems no one has even found a workaround. Disappointing. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#32 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AgwLcVynLMO80yA7yI0gS3-nnctWGgmvks5vajbagaJpZM4UbhFe> .

[felippepuhle]

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

[Dror-Bar]

@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

[TheMrZZ]

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