how to use with expo app routes?

[wallacerenan]

How to use with expo app routes?

[rbpolim]

Same here

How can I wrap the Toast component like a provider?

[felipe-bergamaschi]

@wallacerenan @rbpolim

You need to create a _layout file in the root of your project and add the component to it. example:

 // _layout.tsx
 import { Stack } from 'expo-router';
import Toast from 'react-native-toast-message';

export default function Layout() {
  return (
    <>
      <Stack />

      <Toast />
    </>
  )
}

[ShaneKeney]

@felipe-bergamaschi I am doing the above in my root _layout.tsx. However, one behavior I am seeing that wasn't an issue before is the Toast message when triggered is showing behind screen modals instead of showing above them.

e.g. of a nested navigator _layout.tsx:

    <Stack screenOptions={{ headerShown: false, gestureEnabled: false }}>
      <Stack.Screen name="ideaMachine" />
      <Stack.Screen name="editName" options={{ presentation: 'modal' }} />
      <Stack.Screen name="editMood" options={{ presentation: 'modal' }} />
      <Stack.Screen name="editInterest" options={{ presentation: 'modal' }} />
      <Stack.Screen name="ideaDetails" options={{ presentation: 'modal' }} />
      <Stack.Screen name="editGroup" options={{ presentation: 'modal' }} />
      <Stack.Screen name="addPeople" options={{ presentation: 'modal', gestureEnabled: true }} />
      <Stack.Screen name="addGroup" options={{ presentation: 'modal' }} />
      <Stack.Screen name="addGroupPeople" options={{ presentation: 'modal' }} />
      <Stack.Screen name="addGroupPeopleQR" options={{ presentation: 'modal' }} />
    </Stack>

ideaMachine in the Stack Navigator is a Tab Navigator with 3 Tabs.

Have you seen this issue at all or maybe I'm missing something here?

[felipe-bergamaschi]

@ShaneKeney In the documentation, it states that the Toast should be the last component of your application, as in the quote below.

Render the Toast component in your app's entry file, as the LAST CHILD in the View hierarchy (along with any other components that might be rendered there):

// app/_layout.tsx
import Toast from 'react-native-toast-message';
import { Stack } from 'expo-router';

export default function Layout(props) {
  return (
    <>
      <Stack>
        {/* ... */}
      </Stack>

      <Toast />
    </>
  );
}

I had tested this previously, and indeed, when the Toast component is above, this issue occurs. However, when it is the last component, the operation is normal.

[ShaneKeney]

@felipe-bergamaschi Cool and thank you. I'll test that out. I did find a workaround from scanning the changelog where I can put the same Toast component in the Modal Screen Component itself and everything works as expected. I'd much rather keep things dry and only need to specify it once.

[huanghanzhilian]

@ShaneKeney In the documentation, it states that the Toast should be the last component of your application, as in the quote below.

Render the Toast component in your app's entry file, as the LAST CHILD in the View hierarchy (along with any other components that might be rendered there):

// app/_layout.tsx
import Toast from 'react-native-toast-message';
import { Stack } from 'expo-router';

export default function Layout(props) {
  return (
    <>
      <Stack>
        {/* ... */}
      </Stack>

      <Toast />
    </>
  );
}

I had tested this previously, and indeed, when the Toast component is above, this issue occurs. However, when it is the last component, the operation is normal.

Thanks, here you helped me with my project: https://github.com/huanghanzhilian/c-shopping-rn