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.