Toast not showing on RN v0.72.4 about react-native-toast-message HOT 6 CLOSED

@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

from react-native-toast-message.

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

from react-native-toast-message.

@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>
    </>
  );
}

from react-native-toast-message.

@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

from react-native-toast-message.

@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. :)

from react-native-toast-message.

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

from react-native-toast-message.