React-native-navigation: Can't get overlay interceptTouchOutside option working

Created on 9 Apr 2020 · 6Comments · Source: wix/react-native-navigation

Issue Description

I have a little Notification overlay component similar to this one

When it appears, the scroll of the page below is blocked, on both ios and Android.

What did I do wrong?

Steps to Reproduce / Code Snippets / Screenshots

My Code :

const Notification: React.FC<NotificationProps> = (props) => {
    let { message, componentId } = props;

    const _translateY = useRef(new Animated.Value(_initTransY)).current;

    useEffect(() => {

        Animated.spring(
            _translateY,
            {
                toValue: _endTransY
            }
        ).start();

        setTimeout(
            ()=>{
                Animated.spring(
                    _translateY,
                    {
                        toValue: _initTransY
                    }
                ).start(
                    ()=>{ Navigation.dismissOverlay(props.componentId); }
                );
            },
            4000
        );

    }, []);

    return (
            <Animated.View style={[styles.root, { transform: [ { translateY: _translateY } ]}]}>
                <View style={styles.notifWrap}>
                    <Text style={styles.notifText}>{message}</Text>
                </View>
            </Animated.View>
    );
        // <SafeAreaView style={styles.sav}>
        // </SafeAreaView>
};

Notification.options = {
    layout: {
      componentBackgroundColor: 'transparent'
    },
    overlay: {
      interceptTouchOutside: false
    }
}

const styles = StyleSheet.create({
    // sav: {
    //     position : 'absolute',
    //     height: 80, 
    //     backgroundColor: 'red',
    // },
    root: {
        width: '100%',
        height: 80, 
        backgroundColor: 'red',
    },
    notifWrap: {
        height: 60,
        width: '100%',
        elevation: 2,
        backgroundColor: Colors.Bg07,
        alignItems: 'center',
        justifyContent: 'center',
    },
    notifText: {
        fontFamily: Fonts.RobotoRegular,
        color: Colors.Text04,
        textAlign: 'center',
        fontSize: 16,
    }
});

export default Notification;

The way I show the overlay:

export const showNotification = (str:string)=>{
  return Navigation.showOverlay({
    component: {
      name: Screens.Notification,
      passProps: {
        message: str
      },
      options: {
        overlay: {
          interceptTouchOutside: false,
        },
        layout: {
          backgroundColor: 'transparent',
          componentBackgroundColor: 'transparent',
          orientation: ['portrait']
        }
      }
    },
  });
}

@guyca do you see something here?