React native Question posted in
The official React Native documentation can be found here.

How to modify Notifier in React Native?

I have problem with react-native-Notifier. I am trying to show notification using Notifier. If there are any better libraries, you can recommend. My problem is with the notch on the phone. By the time notification is showing up, it’s hidden by notch.

https://phpout.com/wp-content/uploads/2024/02/oXvMo.png

And code snippet. How can I solve this ?

Notifier.showNotification({
                    title: "Error",
                    description: message,
                    Component: NotifierComponents.Alert,
                    showEasing: Easing.bounce,
                    componentProps:{
                        alertType: "error",
                        
                    },
                    containerStyle:{
                    },
                    duration: 4000,
                    showAnimationDuration: 800,
                    
                });
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Found an solution. If somebody will have same problem just use CustomSafeAreaView as a part of ContainerComponent.

    const CustomSafeAreaView: React.FC<CustomSafeAreaViewProps> = ({ children, style }) => {
    return (
      <SafeAreaView
        style={{
          flex: 1,
          paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
          ...(style || {}),
        }}
      >
        {children}
      </SafeAreaView>
    );
  };
  
  export default CustomSafeAreaView;

    export const NotifySuccess = (title: string, message: string) : void => {
    Notifier.showNotification({
        title: title,
        description: message,
        Component: NotifierComponents.Alert,
        componentProps:{
            alertType: 'success',
            ContainerComponent: CustomSafeAreaView,
        },

  2. 0

    Use prop translucentStatusBar={true} in options, It adds additional top padding that equals to StatusBar.currentHeight. (Android Only)
    Hope it works, or you can consider this react-native-flash-message

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search