Toastify Message showed behind React-Native Full Width Modal

[dcnc336]

I made ToastifyProvider like this

import React, { createContext, useContext, useState } from 'react';
import ToastManager, { Toast } from 'toastify-react-native';

// Create a context to manage toast state
const ToastContext = createContext<{
    showToast: (type:string, message: string) => void;
  }>({
    showToast: () => {},
  });

// Create a ToastProvider component
export const ToastProvider = ({ children }:any) => {

    const showToast = (type: string, message: string) => {
        switch(type) {
            case 'success':
                return Toast.success(message);
            case 'warn':
                return Toast.warn(message);
            case 'error':
                return Toast.error(message);
            default:
                break;
        }
    };

    return (
        <ToastContext.Provider value={{ showToast }}>
            {children}
            <ToastManager 
                width={307}
                height={58}
                animationStyle="rightInOut"
                duration={2000}
            />
        </ToastContext.Provider>
    );
};

// Create a custom hook to use the ToastProvider context
export const useToast = () => {
    return useContext(ToastContext);
};

And This is my App.tsx code

function App(): JSX.Element {
  return (
    <NativeBaseProvider>
      <ToastProvider>
        <NavigationContainer>
          <Stack.Navigator initialRouteName="Login">
            <Stack.Screen
              name='Login'
              component={TestLogin}
              options={{ headerShown: false }}
            />
            <Stack.Screen
              name="Valve"
              component={Valve}
              options={{
                title: "Valves",
                headerShown: false
              }}
            />
          </Stack.Navigator>
        </NavigationContainer>
      </ToastProvider>
    </NativeBaseProvider>
  );
}

And I am using FullScreen Modal in Valve Screen Component, but Toastify message showed behind Modal
Can anyone help me to show alert on React-Native Modal?

[zahidalidev]

@dcnc336 you to have pas ToastManager inside the Modal as well like explained in this issue

[dcnc336]

Hi @zahidalidev , Thank you for your answer, I checked the issue and tried that, but it not helped for me, I commented my issue on there, Please check and help me

[zahidalidev]

@dcnc336 I can see your are using ToastManager only once as a provider, but to show the toast at the top of the Modal, you have use ToastManager as a child to that Modal as well, for example.
If it still does not work, please provide your modal component's code as well, thanks.

<Modal>
// So you should use the ToastManager in provider and also here inside the Modal as well, use ToastManager like this, because to show the toast over the modal it should be provded as its children as well.
<ToastManager 
        width={307}
        height={58}
        animationStyle="rightInOut"
        duration={2000}
    />
</Modal>

[dcnc336]

Hi @zahidalidev , I added ToastManager, so It seems I am using concurently the ToastManager for both inside and outside of Modal
Here is code

      <Modal>
         <View
            style={{
              width: '100%',
              height: '100%',
              backgroundColor: 'white',
            }}
        >
          <View>
              <Image source={ModalImg} alt='' style={styles.modalImg} />
          </View>
          <View>
            <View style={styles.searchView}>
              <View style={styles.buttonStyleX}>
                <Text style={styles.modalText}>Device ID</Text>
                <Input
                    variant='outline'
                    placeholder='_x_x_x_x_'
                    onChangeText={(value) => setMachineName(value)}
                    style={{
                        height: 50,
                        fontSize: 20,
                        color: 'black',
                        fontFamily: 'sans-serif',
                    }}
                />
              </View>
              <View style={styles.buttonStyleX}>
                <Text style={styles.modalText}>Nickname</Text>
                <Input
                    variant='outline'
                    placeholder='bleach, soap, water, etc...'
                    onChangeText={(value) => setNickName(value)}
                    style={{
                        height: 50,
                        fontSize: 20,
                        color: 'black',
                        fontFamily: 'sans-serif',
                    }}
                />
              </View>
            </View>
          </View>
          <View style={styles.CaptionText}>
            <View
              style={{
                  marginTop: 20,
                  marginLeft: 20,
                  marginRight: 20,
                  display: 'flex',
                  flexDirection: 'row',
                  justifyContent: 'center',
                  gap: 40,
              }}
            >
              <Pressable onPress={addValve}>
                  <Text style={styles.buttonStyle}>Add</Text>
              </Pressable>
              <Pressable onPress={formatValues}>
                  <Text style={styles.buttonStyle}>Close</Text>
              </Pressable>
            </View>
          </View>
        </View>
        <ToastManager 
           width={307}
           height={58}
           animationStyle="rightInOut"
           duration={2000}
        />
    </Modal>

And then, I processed follow steps

• click button to show modal
• show toastify alert on modal
• close modal

After do it, toastify alert not showed on backdrop. Can you please try with my process?

[zahidalidev]

@dcnc336 Thanks, let me try.

[dcnc336]

Thank you @zahidalidev ! I will very look forward your reply