calintamas / react-native-toast-message

Animated toast message component for React Native
MIT License
1.72k stars 262 forks source link

Setup with react-native-router-flux #193

Open n3rd253 opened 3 years ago

n3rd253 commented 3 years ago

Hi,

I'm looking for a way to render the toast over the top of the navigation elements with react-native-router-flux, similar to how its described for react-navigation https://github.com/calintamas/react-native-toast-message#how-to-render-the-toast-when-using-react-navigation

I have implemented this library react-native-router-flux, but toast is not showing.? Couldn't find any issues/instructions for this.

    var unsubscribeFromMessages = messaging().onMessage(async(message) => {
      console.log("MESSAGE RECEIVED", message); <-- Here I get console log from FCM (with valid title and body) but no toast displays
      Toast.show({
        text1: message.notification?.title,
        text2: message.notification?.body,
        type: 'success'
      });   
    })

<Container> 
 <Toast ref={(ref) => Toast.setRef(ref)} type="success" position="top" />
          <Router>          
              <Stack key="root" hideNavBar>
                <Tabs
                  key="tabbar"
                  swipeEnabled
                  type="replace"
                  showLabel={true}              
                >
                ...
</Container>

Thanks

facurueda commented 3 years ago

Captura de Pantalla 2021-05-17 a la(s) 19 39 50

`

      <Router>          
          <Stack key="root" hideNavBar>
            <Tabs
              key="tabbar"
              swipeEnabled
              type="replace"
              showLabel={true}              
            >
            ...

<Toast ref={(ref) => Toast.setRef(ref)} type="success" position="top" /> `

You must put the Toast component last

PopBot commented 3 years ago

Thanks for the tip @facurueda ! Been spending quite a while on this problem.