carsonwah/react-native-push-notification-popup

A <NotificationPopup/> component for presenting your own push notification in react-native app

react-native-push-notification-popup's Issues

Popup in Background and Kill state do not appear

My notification popup appear in foreground state but notification popup do not appear in background and kill state of the app how can I do this? Help needed! Thanks

Support iPhone 14 Pro/Pro Max Dynamic Island

It is foreseeable that the current padding will not work under the new Dynamic Island design. Just to open an issue to track this first.

Supporting the new Dynamic Island animation will be quite difficult. So the current direction will be to support the new padding first at least.

BUG, On Android the pop up closes very fast after slide out

BUG, On Android the pop up closes very fast after slide out

Add more control

Really it's an amazing package i'm a big fan of it.
but you need to make some enhancement like:-

• you can make me change your component colors without make custom view.
• support multi notifications.
• make more than one theme and let user choose witch one to use.
• on single notification make a theme, and on multi use another theme.

Popup is not aligned to the center of the screen

Hi Awesome library for showing popups when app is in foreground. When I use the latest library its not centered, rather the whole ui is aligned to the left in ios simulator.

Can you add alignSelf: 'center' to the below code? am not familiar with how to do checkin to npm library, if you can suggest how to do I can do this as well.

const getAnimatedContainerStyle = ({containerSlideOffsetY, containerDragOffsetY, containerScale}) => {
// Map 0-1 value to translateY value
const slideInAnimationStyle = {
transform: [
{translateY: containerSlideOffsetY.interpolate(slideOffsetYToTranslatePixelMapping)},
{translateY: containerDragOffsetY},
{scale: containerScale},
],
alignSelf: 'center',
};

// Combine with original container style
const animatedContainerStyle = [
styles.popupContainer,
slideInAnimationStyle,
];

return animatedContainerStyle;
};

Thanks for creating it !

Thanks for creating this dude 👍 😄 🎉

Undefined is not a function evaluation (popup.show...)

Whenever I try to show the notification for the first time this error is shown up and after pressing ctrl+s the and by sending the notification again from firebase the notification will appear perfectly. I'm using functional components with hooks.
let popup = useRef();

can anybody tell me the issue please?

how to manually dismiss the popup?

I can't find a way to do this

Use globally

this is not an issue per say bit how can we use this globally
as opposite to on a particular screen. I am using react navigation lib
and i want this to be able to triggered irrespective of the screen the user is currently on

Show dynamic notification

I am new to react native , i have integrated one signal for push notification in my application and now i need to show notification when notification fired.

this is my notification function
onReceived(notification) {
console.log("Notification received: ", notification);
}

whenever i call this.popup.show() its shows me error

Does DefaultPopup body support html?

Hello there.
I'm having a problem with the default popup view. I was trying to push a html msg to my device but it doesn't support html in the body view. Will it becomes a feature in future?

action pop up

Hello !

thank you for this nice package!
We are building a chat app and would need to be able to have action from within the pop up.
We will try to make a pull request ASAP.
If you have any advices it would be most welcomed!

Best,

Customization props

In the https://www.npmjs.com/package/react-native-push-notification-popup, has customization props ready? This lib is nice if added customization. Please advise.

" null is not an object (evaluating '_this2.popup.show')"

Hi ,
Thanks for awesome library. I am using this but i am getting " null is not an object (evaluating '_this2.popup.show')" everytime when Popup shows. Along With

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

My App.js is
import NotificationPopup from 'react-native-push-notification-popup';
import { requestUserPermission, messagingMethods } from './src/utils/firebase'

export default class App extends Component {
constructor(props) {
super(props);
this.state = {};
}
componentDidMount() {
requestUserPermission();
messagingMethods(this.props, (remoteMessage) => {
console.log('working call back', remoteMessage)
this.popup.show({
onPress: function () { console.log('Pressed') },
appIconSource: require('./src/assets/icons/logo.png'),
appTitle: 'Some App',
timeText: 'Now',
title: 'Hello World',
body: 'This is a sample message.\nTesting emoji 😀',
slideOutTime: 5000
});
});
}
render() {
return (


<>

{/* <View style={{ position: 'absolute', top: -20 }}> /}
<NotificationPopup
ref={ref => this.popup = ref}
/>
{/ */}

        <StatusBar backgroundColor={COLOR.BLACK} barStyle="light-content" />
      </>
    </ActionSheetProvider>
  </Provider >
);

}
}
Thanks in advance. Please revert asap.
Shashi

Pop-up is too low on Android

Hi there,

We found that the pop-up is too low on Android if not using the translucent statusbar. In our case, we switched from managing the statusbar with the component to letting Android manage it. We then saw that the pop-up was rendered with a top margin of approx. 1x the height of the statusbar. This is caused by:

react-native-push-notification-popup/src/views/DefaultPopup.js

Line 14 in 614575e

StatusBar.currentHeight + 10); // Just to add a bit more padding

Setting this to 0 manually fixes the issue. Unfortunately it seems that this is not configurable, so we had do copy the whole file just to make this adjustment. Is this something that could be fixed?

Display multiple popups?

Hey!
Just found this awesome library, thank you for this!

Is there any way to display more than 1 notification popup?

Android not working.

Hi, thank you for your contribution of this library. It works perfect on iOS, but it seems like nothing happened in android emulator after this.pop.show()

Thank you!

How to use this with functional component?

So I figured using functional component with this approach, but no avail, and this is how i am doing it :

//createRef
const popup = useRef()

//componentDidMount
useEffect(() => {
    popup.show({
          appIconSource: require("./assets/icon.png"),
          appTitle: "Some App",
          timeText: "Now",
          title: "Hello World",
          body: "This is a sample message.\nTesting emoji 😀",
          slideOutTime: 5000
        });
  }, [])


//at the bottom of Components
<NotificationPopup ref={popup} />

I don't know where I am going wrong, the error says :
undefined is not a function (near '...popup.show...')

How to show the Notification in any screen with by calling this.popup.show() Method only once at particular screen

Hi, thanks for the awesome module. My requirement is, In my app i'm using chat functionality i need to show the notification type messages by calling this.popup.show() once in screen and need to get notification message in anywhere in the Application. Can you please suggest me how to fix it.

onPress don´t work with react-navigation

I am using this plugin with react-navigation and the push notification from OneSignal, all is fine but the function onPress not works.

`
import NotificationPopup from 'react-native-push-notification-popup';

//**Execute when a notification is received
onReceived = notification => {
console.log("Notification received: ", notification)

//Show Push Notification Popup
const pushMessage = notification.payload.title 
const link = notification.payload.additionalData.noticia

notification.isAppInFocus == true 
  && this.popup.show({
    onPress: () => NavigationService.navigate('NoteContainer', { link }), //With function() the same, not works 
    appIconSource: require('./assets/icon.png'),
    appTitle: 'UNOTV',
    timeText: 'Ahora',
    title: pushMessage
  })

}

render() {

return (
  <MainContainer>
    <StatusBar backgroundColor="#FAFAFA" barStyle="dark-content" />
    
    /** The pop-pup display very well but the onPress function and Pan gestures not works
    <NotificationPopup ref={ref => this.popup = ref} />
    
   //App container with use of react native Context
    <NotificationsContext.Provider value={this.state}>
      <AppContainer 
        ref={navigatorRef => {
          NavigationService.setTopLevelNavigator(navigatorRef)
        }}
      />
    </NotificationsContext.Provider>

  </MainContainer>
)

}
`

Screen is locked after dismissing the popup

Now the conditional rendering does not include the outer full-screen container, which blocks the screen even when the popup is not presented.

Thanks @dan-mahoney-aquicore for reporting this issue.

Hide / disable popup on certain components

Hi, first of all thanks for a great module.

Is it possible to hide the popup sometimes, for example when you get a message notification while you're already on the messages screen / component?

Cheers.