React-native-navigation: [v2] Where is the callback for interceptTouchOutside?

[stokesbga]

Issue Description

Documentation is kind of lacking with overlays. I see there is a flag for interceptTouchOutside, but pressing the background layout does not dismiss by default, nor does an event fire in any of the Navigation handlers. How can I dismiss by pressing on the layout background?

---

Environment

• React Native Navigation version: 2.0.2569
• React Native version: 0.57
• Platform(s) (iOS, Android, or both?): ios
• Device info (Simulator/Device? OS version? Debug/Release?): simulator

[stokesbga]

interceptTouchOutside just means you can put a transparent Touchable component in the background.

I just made my own overlay manually if anyone wants a similar feel to the old showLightBox
It's not perfect, but neither is RNN2 (pow pow)

Just remember you need to set interceptTouchOutside to true, and the layout backgroundColor to transparent.

import React, { Component } from "react";
import { Animated, TouchableWithoutFeedback, Dimensions } from "react-native";
import { Navigation } from "react-native-navigation";

const AnimatedTouchable = Animated.createAnimatedComponent(TouchableWithoutFeedback);
const deviceHeight = Dimensions.get("window").height;
const ANIM_DURATION = 100;

export default class ThrowbackOverlay extends Component {
  constructor(props) {
    super(props);

    this.state = {
      opacityBgAnim: new Animated.Value(0),
      opacityContentAnim: new Animated.Value(0),
      contentSlideAnim: new Animated.Value(deviceHeight / 4)
    };
  }

  componentDidMount() {
    Animated.parallel([
      Animated.timing(this.state.opacityBgAnim, {
        toValue: 1,
        duration: ANIM_DURATION,
        useNativeDriver: true
      }),
      Animated.timing(this.state.contentSlideAnim, {
        toValue: 0,
        duration: ANIM_DURATION,
        useNativeDriver: true
      }),
      Animated.timing(this.state.opacityContentAnim, {
        toValue: 1,
        duration: ANIM_DURATION,
        delay: ANIM_DURATION / 2,
        useNativeDriver: true
      })
    ]).start();
  }

  _dismissOverlay = () => {
    Animated.timing(this.state.opacityBgAnim, {
      toValue: 0,
      duration: ANIM_DURATION,
      useNativeDriver: true
    }).start(() => {
      Navigation.dismissOverlay(this.props.componentId);
    });
  };

  render() {
    return (
      <TouchableWithoutFeedback onPress={this._dismissOverlay} style={{ flex: 1 }}>
        <Animated.View
          style={{
            flex: 1,
            justifyContent: "center",
            alignItems: "center",
            backgroundColor: "#00000088",
            opacity: this.state.opacityBgAnim
          }}>
          <AnimatedTouchable
            onPress={() => {}}
            style={{
              opacity: this.state.opacityContentAnim,
              transform: [{ translateY: this.state.contentSlideAnim }]
            }}>
            {this.props.children}
          </AnimatedTouchable>
        </Animated.View>
      </TouchableWithoutFeedback>
    );
  }
}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

[stale[bot]]

The issue has been closed for inactivity.

[ahmadshahrour951]

@stokesbga you are a lifesaver!! thank you so much man! genuinely mean it..
@guyca and you too!! for being a hawk and the helping!