Nativebase: Setting Toast style marginBottom still blocks elements below it

[zwerg44]

Issue Description

I have a custom bottom navigation bar, and toasts with marginBottm block it.

Toast.show({
  text: "Done!",
  duration: 4000,
  style: { marginBottom: 50 }
});

My environment:

• node: 10.15.1
• yarn: 1.10.1
• react: 16.6.3
• react-native: 0.57.8
• native-base: 2.10.0

My device:

• not using expo or emulator
• real device, xiaomi mi5s
• device os: Android 9 (lineage os)

Additional info

I looked through the code and the existed closed issues: #2089 #1342 #2059.

The @SupriyaKalghatgi 's solution is kind of working at ios only, because of getTop method returning 30 pixels, as a bottom position for ToastContainer's Animated.View.

I think the proper solution wholud be:

• or adding pointerEvents="box-none" to Animated.View
• or adding separate prop for Animated.View styles

Workaround

Currently I using this workaround to monkey-patch ToastContainer
(I using closure at bottom option, to change it dynamically)

import { Toast } from 'native-base';

const CONTAINER_STYLE = { bottom: 0 };

export function showToast(opts, containerStyle) {
    CONTAINER_STYLE.bottom = (containerStyle && containerStyle.bottom) || 0;
    if (!Toast.toastInstance._root.patched) {
        const me = Toast.toastInstance._root;
        me.patched = true;
        me.getToastStyle = () => ({
            position: 'absolute',
            opacity: me.state.fadeAnim,
            width: '100%',
            elevation: 9,
            paddingHorizontal: 0,
            top: undefined,
            bottom: CONTAINER_STYLE.bottom,
        });
    }
    return Toast.show(opts);
}

[AnandK1100]

I'm also facing the same issue

[tonypee]

same

[PlabanJr]

Please check out our latest release v2.12.5.

[jphchen]

why is this closed? same issue using native-base v2.13.8

[jphchen]

if you allow for custom position for the Toast to show then i probably would not use the marginBottom style that's causing this issue, the top/bottom position is either blocking the mobile bottom tab menu or the top menu

[felix-lambert]

same

[frey-sw]

And another same.

As far as i debugged. The problem its found on the class ToastContainer.js ln 166: this.closeModal.bind(this, reason);

That binding its not calling the function closeModal, the responsible on destrying the main container of the toast.
n-b version: 2.13.13

I had to fix it copying the library and using my patched version.

This its not closed