getting last toast along with native prompt

[ijharansari2020]

Last Toast is coming if permission related prompt open, tried to rename ref but no luck ..

[calintamas]

Hi @ijharansari2020, can you add a code sample (how is the toast set up, how is the prompt set up, etc)

[ijharansari2020]

Hi @ijharansari2020, can you add a code sample (how is the toast set up, how is the prompt set up, etc) have added this <Toast ref={(ref) => Toast.setRef(ref)} />

imported this import Toast from 'react-native-toast-message'; in https://www.npmjs.com/package/react-native-permissions

const data = await request(permission); request function opens native prompt

export const GetPermission = async (permission) => {
  try {
    const access = await check(permission);

    // console.log('access:', access);

    switch (access) {
      case RESULTS.UNAVAILABLE:
        return false;
      case RESULTS.DENIED:
        try {
          const data = await request(permission);
          // console.log('perData: ', data);
          switch (data) {
            case RESULTS.DENIED:
              Alert.alert(
                'PERMISSION DENIED',
                'Please provide location PERMISSION.\nSettings > Apps > Fubo > Permissions',
                // , [
                //   {
                //     text: 'Exit',
                //     onPress: () => {
                //       BackHandler.exitApp();
                //     }
                //   }
                // ]
                [
                  {
                    text: 'Change Permission',
                    onPress: () => {
                      openSettings();
                    }
                  },
                  // { text: 'Cancel', style: 'cancel' },
                  { text: 'OK', onPress: () => {} }
                ]
              );
              break;
            case RESULTS.BLOCKED:
              Alert.alert(
                'PERMISSION BLOCKED',
                'Pelase provide location PERMISSION.\nSettings > Apps > Fubo > Permissions',
                //  , [
                //     {
                //       text: 'Exit',
                //       onPress: () => {
                //         BackHandler.exitApp();
                //       }
                //     }
                //   ]
                [
                  {
                    text: 'Change Permission',
                    onPress: () => {
                      openSettings();
                    }
                  },
                  // { text: 'Cancel', style: 'cancel' },
                  { text: 'OK', onPress: () => {} }
                ]
              );
              break;
            default:
              break;
          }
          return data === RESULTS.GRANTED;
        } catch (err) {
          // console.info('err: ', err);
          return false;
        }
      case RESULTS.GRANTED:
        // console.log('The permission is granted', permission);
        return true;
      // break;
      case RESULTS.BLOCKED:
        Alert.alert(
          'PERMISSION BLOCKED',
          'Pelase provide location PERMISSION.\nSettings > Apps > Fubo > Permissions',
          // ,[
          //   {
          //     text: 'Exit',
          //     onPress: () => {
          //       BackHandler.exitApp();
          //     }
          //   }
          // ]
          [
            {
              text: 'Change Permission',
              onPress: () => {
                openSettings();
              }
            },
            // { text: 'Cancel', style: 'cancel' },
            { text: 'OK', onPress: () => {} }
          ]
        );
        return false;
      default:
        console.log('Failed to check permission');
        return false;
    }
  } catch (err) {
    console.error(err);
    return false;
  }
};

[calintamas]

Is the Toast component rendered inside the modal?

[ijharansari2020]

no normal page . whatever is last toast its coming

[calintamas]

My questions is: where are you rendering <Toast /> on app's Root?

[khelifioussama]

Is the Toast component rendered inside the modal?

Hello , There is a probleme rendering Toast inside modal ?

I am rendering the Toast inside a Custom Modal who is using the Screen with SafeAreaView as a child and I got Error : Cannot read property 'show' of null

[calintamas]

Yes, it should be rendered on app's entry point (along with everything that's rendered there, like navigation).

Also, when a Modal is visible and you trigger Toast.show(), it will show up behind the Modal (since that's where it is in the View hierarchy)

[ijharansari2020]

Yes, it should be rendered on app's entry point (along with everything that's rendered there, like navigation).

Also, when a Modal is visible and you trigger Toast.show(), it will show up behind the Modal (since that's where it is in the View hierarchy)

im not calling Toast.show() but it comes when there is Native prompt

[calintamas]

The answer above was to @khelifioussama's question.

@ijharansari2020 where are you rendering ? Make sure it's not being wrapped by anything rather than the main View container

[Angelinodc71]

Something very similar happens to me, I get the last message by logging in with Google. @calintamas I have a separate component:

export function errorToast(title: string='Error', message?: string, position: any='top') { Toast.show({ type: 'error', position: position, visibilityTime: 3000, text1: title, text2: message, }); }

And I call it on other screens like this: errorToast('Introduce un número de teléfono valido', '');

[developmentFlykube]

Same issue here, has anyone managed to fix it?

[calintamas]

@Angelinodc71 @developmentFlykube Can you post the code to reproduce the issue? The code where the Toast instance is rendered

[developmentFlykube]

Hey dude, here is in my App.tsx, on the main render: ` return (

  <View style={{ backgroundColor: "#0000", width: "100%", height: "100%" }}>

    <NavigationContainer
      ref={GlobalVariables.navigationRef}
      onReady={() => this.state.routeNameRef.current = GlobalVariables.navigationRef.current.getCurrentRoute().name}
      onStateChange={() => {
        const previousRouteName = this.state.routeNameRef.current;
        const currentRouteName = GlobalVariables.navigationRef.current.getCurrentRoute().name;
        console.log("Current: " + currentRouteName);
        console.log("Previous: " + previousRouteName);
        // Save the current route name for later comparision
        this.state.routeNameRef.current = currentRouteName;
        GlobalVariables.current_route = currentRouteName;
        // SAVE DATA INTO THE STORE
        this.props.getNavigationRoute(currentRouteName, previousRouteName);
      }}
    >
      <AuthStack />
    </NavigationContainer>

    <Toast ref={(ref) => Toast.setRef(ref)} />

  </View>
);

`

Here I have a global function to create a toast wherever i need it:

export function errorToast(title: string='Error', message?: string, position: any='top') { Toast.show({ type: 'error', position: position, visibilityTime: 3000, text1: title, text2: message, }); }

This is the way I call it:

errorToast('Please, select a drink'); Thanks for the answer!

[calintamas]

@developmentFlykube make sure to render the Toast inside NavigationContainer https://github.com/calintamas/react-native-toast-message#how-to-render-the-toast-when-using-react-navigation

[spolesciuc]

Hey! I have a similar problem. On android when calling the native Share module. Toast sticks out. Toast is created in the NavigationContainer

[calintamas]

I'll take a look as soon as I can

[aravi365]

Any updates or workarounds for this issue? It appears random only, like Not on every android device but on many!

[sshapoval]

Hello! I have the same issue. My NavigationContainer looks like this <NavigationContainer ref={navigationRef}> <RootStackNavigator /> <Toast config={toastConfig} ref={ref => Toast.setRef(ref)} /> </NavigationContainer>

[zetamorph]

same

[chernandezq]

same issue

[shabith]

Hi @aravi365, do we have a solution for this? I have implemented it by following this - https://github.com/calintamas/react-native-toast-message#how-to-render-the-toast-when-using-react-navigation and I'm facing this issue.

Whenever I navigate to the next screen, I'm getting my old toast message appearing on the screen.

[Md-Mudassir47]

same issue @calintamas

[calintamas]

Fixed in v2.0.0. Read the complete changelog.

Docs on how to render the Toast - Quick start.

If you find any issues with the v2 implementation, feel free to reopen this issue. Thanks!

[Md-Mudassir47]

@calintamas still facing the same issue even after the upgrade.

[slatqh]

Don't know if it's make sense to anybody, but I just downgrade to 2.0.0 version and it solve that issue for me, without braking any existing functionality in our project.

[ahmadsyed]

Having this same issue in v2.1.1 and in 2.0.0. Are there any workaround ?

[israr-shaikh]

Best hack found. Kindly follow the below steps to handle it.

Toast.hide();
setTimeout(() => {
  --- call native prompt here ---
}, 500);

This will help to tackle the issue.

[rohitiziss]

Any solution, I am facing the same issue. Thanks in advance

[Thaimay]

Solution by Mathieu Creusot, here is the patch: 0eb3a01

This solution work for me. Thanks, here the patch-package.

react-native-toast-message+2.2.0.patch