can't set root with react native navigation (rn - v 62.2)

[rishav-ss]

with react native navigation, android toast is showing inside sidemenu component.
May be default sidemenu is at the top level (as root) so it is showing inside sidemenu from any other component..
Any Help?

[sunnylqm]

magicismight/react-native-root-siblings#52 (comment)

[rishav-ss]

@sunnylqm not working, toast still inside sidemenu not on homescreen

[sunnylqm]

Can post your code？

[rishav-ss]

let sibling = new RootSiblings(<Container {...props}/>);
container -

<Animated.View style={[Styles.toastView,
        {backgroundColor:background}, isBottom ? Styles.bottom : Styles.top, {borderRadius},
        { transform: [{ translateX: animatedXValue }] }]}>
          { position === "top" && 
        <View style={[Styles.spaceTop]}/>}
         <View style={Styles.innerView}>
           <Text numberOfLines={1} style={[Styles.toastText, textStyle]}>
              {message}
            </Text>
           {Object.keys(button).length > 0 && <Button {...button} />}
         </View>
         { position === "bottom" && <View style={[Styles.spaceBottom]}/>}
      </Animated.View>

[rishav-ss]

this is working on login/signup screen, but after login inside home screen. There is sidemenu/drawer component which is already on Top layer of Home screen.

Whenever I am calling toast in Home screen and sliding a little drawer, toast is showing inside drawer menu not on home

[sunnylqm]

Did you see my link above and use RootSiblingParent?

[rishav-ss]

Yes I have applied that, still toast is showing inside drawer . I wanted it in Home screen not inside drawer screen

[rishav-ss]

For reproducing -
clone wix/react-ntive-navigation example

1. call react native root toast on app.js or default screen (It seems to work fine)
2. call root toast on home (any screen with drawer enabled)(It does not work will be shown inside sidemenu)

[rishav-ss]

@sunnylqm similar issue #93

[sunnylqm]

Maybe you need to inject RootSiblingParent into each page component. And maybe build a HOC or base component to reuse the logic.

[skychx]

Maybe you need to inject RootSiblingParent into each page component. And maybe build a HOC or base component to reuse the logic.

Finally I inject RootSiblingParent into each page component to fix this issue in react-native-navigation

[JesseWeb]

Maybe you need to inject RootSiblingParent into each page component. And maybe build a HOC or base component to reuse the logic.

Finally I inject RootSiblingParent into each page component to fix this issue in react-native-navigation

man that's hardcore for my 100 screens application.

[skychx]

Maybe you need to inject RootSiblingParent into each page component. And maybe build a HOC or base component to reuse the logic.

Finally I inject RootSiblingParent into each page component to fix this issue in react-native-navigation

man that's hardcore for my 100 screens application.

Hi, the method I just described is effective, but not elegant. After our team evaluated it, we simulated toast using Navigation.showOverlay, we've been live for two months now and it works fine (PS: we have over 200 screens)

[shadow-boy]

just use 'react-native-toast-hybrid' to replace the module