Why my toast message didn't show in my expo react native app?

[coolben54]

Hello

When I added react-native-toast-message in my react native project app. it was work fine. It was one year ago.

Now toasted message does not appear and I don't understand why ? I don't know when the problem were coming but I don't found a solution ... I use expo and react native for web to build web, android and iOS app. I think my problem come from expo migration (from 48 or 49 to 50) without to be sure ...

If a create a new blank project that works. I try to install react-native-root-siblings without result ... I have this problem on expo go (android and iOS) and on native apps (android and iOS)

This is my package.json :

{
  "name": "test",
  "version": "1.31.0",
  "main": "expo-router/entry",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "publish": "standard-version && expo publish"
  },
  "dependencies": {
    "@expo/metro-runtime": "~3.2.1",
    "@react-native-async-storage/async-storage": "1.23.1",
    "@react-native-community/datetimepicker": "8.0.1",
    "@react-native-picker/picker": "2.7.5",
    "@react-navigation/drawer": "^6.6.9",
    "@react-navigation/native": "^6.1.10",
    "axios": "^1.6.7",
    "expo": "~51.0.21",
    "expo-clipboard": "~6.0.3",
    "expo-constants": "~16.0.2",
    "expo-device": "~6.0.2",
    "expo-document-picker": "~12.0.2",
    "expo-image-picker": "~15.0.7",
    "expo-linking": "~6.3.1",
    "expo-notifications": "~0.28.10",
    "expo-router": "~3.5.18",
    "expo-secure-store": "~13.0.2",
    "expo-sharing": "~12.0.1",
    "expo-sms": "~12.0.1",
    "expo-status-bar": "~1.12.1",
    "expo-store": "^0.0.0",
    "expo-task-manager": "~11.8.2",
    "moment": "^2.30.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.50.1",
    "react-native": "0.74.3",
    "react-native-contacts": "^7.0.8",
    "react-native-gesture-handler": "~2.16.1",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-modal-datetime-picker": "^17.1.0",
    "react-native-multiple-select": "^0.5.12",
    "react-native-paper": "^5.12.3",
    "react-native-reanimated": "~3.10.1",
    "react-native-root-siblings": "^5.0.1",
    "react-native-root-toast": "^3.5.1",
    "react-native-safe-area-context": "4.10.5",
    "react-native-screens": "3.31.1",
    "react-native-simple-radio-button": "^2.7.4",
    "react-native-web": "~0.19.6",
    "standard-version-expo": "^1.0.3"
  },
  "devDependencies": {
    "@babel/core": "^7.24.0",
    "@types/react": "~18.2.79",
    "@types/react-native-simple-radio-button": "^2.7.7",
    "babel-plugin-react-native-web": "^0.19.10",
    "typescript": "^5.1.3"
  },
  "private": true
}

In my app_layout.tsx :

import { Pressable, Text } from "react-native";
import { RootSiblingParent } from "react-native-root-siblings";
import Toast from "react-native-root-toast";

export default function Layout() {

    const testToast = () => {
        console.log("testToast")
        let toast = Toast.show('It is OK ! that work !', {
            duration: Toast.durations.LONG,
        });
    }

    return <RootSiblingParent>
        <Pressable onPress={testToast} style={{ justifyContent: "center", padding: 10, margin: 40, borderWidth: 1, borderStyle: "solid", borderColor: "blue" }}>
            <Text style={{ fontSize: 24, textAlign: "center" }}>test 3</Text>
        </Pressable>
        <Toast visible={true} >Hello !</Toast>

    </RootSiblingParent>
}

I tested also this code :

import { RootSiblingParent } from "react-native-root-siblings";
import Toast from "react-native-root-toast";

export default function Layout() {
    return <RootSiblingParent>
        <Toast visible={true} >Hello !</Toast>
    </RootSiblingParent>
}

Can you help me ?

[coolben54]

I fixed my problem by removing both packages : react-native-root-siblings and react-native-root-toast and installing react-native-root-toast Now it work on expo go. I will test on native apps in few days.

[Kruutus]

I fixed my problem by removing both packages : react-native-root-siblings and react-native-root-toast and installing react-native-root-toast Now it work on expo go. I will test on native apps in few days.

@coolben54 you are my hero, this solved it.