Popup is not aligned to the center of the screen

[Yokesh]

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;
};

[Carson Wah]

Hi @mailyokesh , sorry for the trouble. The popup currently should expand to fill the screen horizontally.

Can you provide a screen capture for this issue?

[Yokesh]

Your library is awesome for the purpose of throwing popup in ios when app is in foreground. Thanks a lot.

How Notification Popup is configured in render
<Provider store={this.store} style={{backgroundColor: 'black'}}>

<NotificationPopup style={{padding: 10, alignContent: 'center', alignSelf: 'center'}} ref={ref => this.popup = ref} />
{videoIntro}
{appNavigator}

This is from a iphone 8 simulator. I see the same in other version of iphone as well
"react-native-push-notification-popup": "^1.1.1",
"react-native": "0.56.0",
Xcode: Version 10.0 (10A255)

[Carson Wah]

Thanks for the report! Definitely some style issues in the library. My bad.

I will fix it and together add the support of tablet width in the next version. But I am too busy to do it this week. If you are in an urgent, you may:

1. Directly edit your node_modules package, or
2. Fork this library and edit and set package.json to point to your repo, or
3. After you fork and edit, send here a pull request to update the library😃

You can try adding {left:8, right: 8} in the style of popupContainer. See if it fixes the problem.

[Tomas Zaicevas]

Adding left:8, right:8 fixed the problem for me. Thanks!

[thanhnq1umc]

Adding alignSelf: 'center' in popupContainer style also fixed the problem.

[Carson Wah]

Fixed in release v1.2.0.

Thanks for the contributions!