How to stop a global component being rendered on a particular screen?

Question

I'm using react-native-toast-notifications package for showing in-app notifications.

I'm trying to integrate it for showing notifications when a chat arrives. But this notification is also being displayed on the chat room screen where the one-to-one chat happens.

How can I prevent the notification being appeared on the chat room screen?

This is my provider component

<ToastProvider
  swipeEnabled={true}
  placement="top"
  duration={5000}
  animationType="zoom-in"
  animationDuration={300}
  renderType={{
    message_toast: (toast) => <ToastContainer toast={toast} />,
  }}
 >
   <SymbolsProvider>
     <Navigation />
   </SymbolsProvider>
 </ToastProvider>

I'm using the useToast() hook provided by the package to show notifications

const toast = useToast();
toast.show(socketMessage.username + " Sent a message", {
 position: "bottom",
 duration: 3000,
 style: toastStyle,
 type: "success",
});

Sent a message

This notification is appearing on the chat room screen also which should not be happening.

Answer 1

Here's an example base on the comment under the question:

import { ToastProvider } from 'react-native-toast-notifications'
import {NavigationContainer} from '@react-navigation/native'
import Screens from './screens/index'
export default function App() {
  return (
    <ToastProvider>
      <NavigationContainer>
        <Screens />
      </NavigationContainer>
    </ToastProvider>
  );
}

import React from 'react';
import {
  SafeAreaView,
  View,
  StyleSheet,
  TouchableOpacity,
  Text,
} from 'react-native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { useNavigation } from '@react-navigation/native';
import { useToast } from 'react-native-toast-notifications';

const Stack = createNativeStackNavigator();
const Drawer = createDrawerNavigator();

const ToastButton = ({ style}) => {
  const toast = useToast();
  const navigation = useNavigation();
  const navState = navigation.getState();
  console.log(navState.routeNames);
  const currentRoute = navState.routeNames[navState.index];
  const onPress = () => {
    if (currentRoute != 'Chat') toast.show('Toast from ' + currentRoute);
  };
  return (
    <TouchableOpacity style={[styles.container, style]} onPress={onPress}>
      <Text>Show Toast</Text>
    </TouchableOpacity>
  );
};

const HomeScreen = (props) => {
  return (
    <View style={styles.flex}>
      <ToastButton />
    </View>
  );
};
const ChatScreen = (props) => {
  return (
    <View style={styles.flex}>
      <ToastButton />
    </View>
  );
};

export default function ScreenIndex(props) {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <Drawer.Navigator useLegacyImplementation={true}>
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Chat" component={ChatScreen} />
      </Drawer.Navigator>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  flex: {
    flex: 1,
    backgroundColor: '#eef',
  },
});