Popup sizes doesnt reflect current device width

[anniewey]

For your context, my app was forced to portrait orientation with android:screenOrientation="portrait".
If user first launch the app from horizontal orientation phone system, the popup size is taking the horizontal orientation as device width despite my app is in portrait orientation.

Below is my usage:

Popup.show({
        type: 'confirm',
        iconEnabled: false,
        title: 'Hello',
        bodyComponent: () => {
          return (
            <View>
              <Text>
                Some title here
              </Text>
              <Text>
                Some text here
              </Text>
            </View>
          );
        },
        buttonText: 'OK',
        confirmText: 'Later',
        bounciness: 0,
        okButtonStyle: { backgroundColor: Colour.Blue },
        confirmButtonStyle: { marginTop: 0 },
        callback: () => {
         //callback
          Popup.hide();
        },
        cancelCallback: () => {
          //cancel callback
          Popup.hide();
        },
      });

[sekizlipenguen]

Hi, to help us better understand the issue you're experiencing with the popup not adjusting properly in portrait mode, could you please provide a screenshot or a short video? This would help clarify the behavior and make it easier for us to troubleshoot the problem accurately. Thanks!

[sekizlipenguen]

We may have resolved your issue with this commit, but we’d appreciate it if you could install and test it before the update is released.

[anniewey]

@sekizlipenguen thanks for the fix! i'll use patch-package to apply the fix and try it out first.
btw the removeEventListener is deprecated, so i changed to these instead

diff --git a/node_modules/react-native-popup-confirm-toast/src/main/Popup.js b/node_modules/react-native-popup-confirm-toast/src/main/Popup.js
index d021614..54218aa 100644
--- a/node_modules/react-native-popup-confirm-toast/src/main/Popup.js
+++ b/node_modules/react-native-popup-confirm-toast/src/main/Popup.js
@@ -52,6 +52,12 @@ class Popup extends Component {
 
     this.state = this.defaultState;
 
+    this.dimensionListener = Dimensions.addEventListener('change', this.updateDimensions);
+
+  }
+
+  componentWillUnmount() {
+    this.dimensionListener?.remove();
   }
 
   static show({...config}) {
@@ -152,6 +158,17 @@ class Popup extends Component {
     }
   }
 
+  updateDimensions = () => {
+    setTimeout(() => {
+      const {height, width} = Platform.OS === 'android'
+          ? Dimensions.get('screen')
+          : Dimensions.get('window');
+      this.height = height;
+      this.width = width;
+      this.setState({});
+    }, 100);
+  };
+
   render() {
     const {title, type, textBody, buttonEnabled, buttonText, confirmText, callback, cancelCallback, background, iconEnabled, iconHeaderStyle, start} = this.state;
     const {bodyComponent, containerStyle, modalContainerStyle, positionPopup, positionView, opacity, bodyComponentForce} = this.state;

[sekizlipenguen]

Yes, you're right, and that's why I've made some updates for improvement. You can check it out at the link below:

ef557dd

class Popup extends Component {
  constructor(props) {
    super(props);
    this.updateDimensions = this.updateDimensions.bind(this);
  }

  componentDidMount() {
    this.dimensionsSubscription = Dimensions.addEventListener('change', this.updateDimensions);
  }

  componentWillUnmount() {
    this.dimensionsSubscription?.remove();
  }
}

[anniewey]

hi @sekizlipenguen i've tried above code but i still couldn't solve the issue. i still facing the same overflow pop up, causing the bottom view on my app not press-able. i've attached image here for ur reference

I've tried applying containerStyle directly on one of my popup (for testing) with same listener Dimensions.addEventListener('change', ()=> {}), it able to restrict the white window pop up to portrait width view but the overlay black background still the same as in the above image.

[sekizlipenguen]

"I didn’t understand anything from the image you sent. If the issue is the modal being stuck behind other elements, this could be because you didn’t wrap at the very top in app.js. It may help to check the heading titled 'Example Provider.'"

[anniewey]

@sekizlipenguen Sorry i couldn't share original image due to company content. I've updated less blurry image here. But lemme clarify.
The pop up is already at top in App.js. The problem that i facing is only when user launch app from horizontal orientation using a tablet. The problem that i suspect is that the Popup component width didn't change dynamically based on on screen size.

Flow:

1. Device orientation - horizontal
2. Launch app
3. App change from horizontal to portrait view due to forced android:screenOrientation="portrait"

But popup is shown using the width from horizontal view. Hence the below screenshot image. The popup is stretched horizontally and overflow on the right. You can see the popup size from its black overlay.

Hope you understand better now:

Red box - popup component
Yellow box - screen in portrait view

[sekizlipenguen]

I suggest running Orientation.lockToPortrait(); within app.js, as it may resolve the issue on the Android side; it seems Android is having trouble detecting the orientation correctly.

import Orientation from 'react-native-orientation-locker';

https://www.npmjs.com/package/react-native-orientation-locker

[anniewey]

Unfortunately that didn't work either.