Toast not showing on RN v0.72.4

[jmada]

Describe the bug The library isn't working on RN v0.72.4, it doesn't show the "toast" dialog.

Steps to reproduce Steps to reproduce the behavior: Just following the the quick start -> https://github.com/calintamas/react-native-toast-message/blob/main/docs/quick-start.md

Expected behavior It should show the toast dialog like the example.

Screenshots Nothing to add.

Code sample

// Foo.jsx
import Toast from 'react-native-toast-message';
import { Button } from 'react-native'

export function Foo(props) {
  const showToast = () => {
    Toast.show({
      type: 'success',
      text1: 'Hello',
      text2: 'This is some something 👋'
    });
  }

  return (
    <Button
      title='Show toast'
      onPress={showToast}
    />
  )
}

Environment (please complete the following information):

• OS: Android
• react-native-toast-message version: 2.1.6
• react-native version: 0.72.4

Additional context Nothing to add.

[Alan-Graton]

Same over here:

App.tsx

import { StatusBar } from "expo-status-bar";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { RootSiblingParent } from "react-native-root-siblings";
// Screens
import { Home } from "./src/screens/Home/Home";
// Styles
import Toast from "react-native-toast-message";

export default function App() {
  return (
    <>
      <SafeAreaProvider>
        <RootSiblingParent>
          <Toast />
          <Home />
          <StatusBar style="inverted" />
        </RootSiblingParent>
      </SafeAreaProvider>
    </>
  );
}

Home.tsx(calling Toast)

import { Toast } from "react-native-toast-message/lib/src/Toast";

export function Home() {
function handleCreate(task: string): void {
    if (tasks.find((el) => el.description === task)) {
      // FIXME: Toast not displaying
      Toast.show({
        type: "error",
        text1: "Opa!",
        text2: "Você já cadastrou uma tarefa igual a essa",
      });
      return;
    }

    setTasks((prev) => [...prev, { description: task, status: "unchecked" }]);
  }
  {...}
}

Environment

• Windows 10
• react-native version: 0.72.5
• react-native-toast-message: ^2.1.6

[KaviduAloka]

@jmada @Alan-Graton try adding <Toast /> in the bottom of StackNavigation

export default function App() {
  return (
    <>
      <SafeAreaProvider>
        <RootSiblingParent>
          <Home />
          <StatusBar style="inverted" />
          <Toast />  //  in the bottom of other components
        </RootSiblingParent>
      </SafeAreaProvider>
    </>
  );
}

[Alan-Graton]

@jmada @Alan-Graton try adding <Toast /> in the bottom of StackNavigation

export default function App() {
  return (
    <>
      <SafeAreaProvider>
        <RootSiblingParent>
          <Home />
          <StatusBar style="inverted" />
          <Toast />  //  in the bottom of other components
        </RootSiblingParent>
      </SafeAreaProvider>
    </>
  );
}

@KaviduAloka Thanks for the tip, will give a try

[gemasaputera]

I faced the same problem, any updates for this issue ?

  return (
<>
    <ContextProvider>
      <Navigation />
      <Button title="Sign out" onPress={signOut} />
    </ContextProvider>
    <Toast />
</>
  );

I've added in the bottom of my App.tsx

[jeetvani]

@jmada @Alan-Graton try adding <Toast /> in the bottom of StackNavigation

export default function App() {
  return (
    <>
      <SafeAreaProvider>
        <RootSiblingParent>
          <Home />
          <StatusBar style="inverted" />
          <Toast />  //  in the bottom of other components
        </RootSiblingParent>
      </SafeAreaProvider>
    </>
  );
}

Works For Me

[jmada]

@jmada @Alan-Graton try adding <Toast /> in the bottom of StackNavigation

export default function App() {
  return (
    <>
      <SafeAreaProvider>
        <RootSiblingParent>
          <Home />
          <StatusBar style="inverted" />
          <Toast />  //  in the bottom of other components
        </RootSiblingParent>
      </SafeAreaProvider>
    </>
  );
}

Worked for me! Thank you so much. I'm closing the issue. :)