View is not fully expanded if device rotate from portrait to landscape then back to portrait

[elmcapp]

Environment

https://user-images.githubusercontent.com/64275658/158262966-18547276-3f0f-45fc-ba17-bb75cc705ce1.mov

Description

When device start in portrait mode the page shows fully. When device rotate to landscape then back to portrait mode the bottom have of the screen seem to have extra padding or is not rending all the way down to all screen.

Reproducible Demo

Rotate device from portrait view to landscape view then back to portrait view

This issue started with v5.4.15.

[elmcapp]

I found a fix for the issue. Would be nice if @troZee could patch this for us. Go to file path: node_modules/react-native-pager-view/scr/utils.tsx comment out line 30 and 31

currently

export const childrenWithOverriddenStyle = (children?: ReactNode) => {
  // Override styles so that each page will fill the parent. Native component
  // will handle positioning of elements, so it's not important to offset
  // them correctly.
  return Children.map(children, (child) => {
    const { props } = child as ReactElement;
    const newProps = {
      ...props,
      style: [
        props.style,
        {
          position: 'absolute',
          flex:1,
          left: 0,
          top: 0,
          right: 0,
          bottom: 0,
          width: undefined,
          height: undefined,
        },
      ],
      collapsable: false,
    };
    return React.cloneElement(child as ReactElement, newProps);
  });
};

to

export const childrenWithOverriddenStyle = (children?: ReactNode) => {
  // Override styles so that each page will fill the parent. Native component
  // will handle positioning of elements, so it's not important to offset
  // them correctly.
  return Children.map(children, (child) => {
    const { props } = child as ReactElement;
    const newProps = {
      ...props,
      style: [
        props.style,
        {
          position: 'absolute',
          flex:1,
          left: 0,
          top: 0,
          right: 0,
          bottom: 0,
          // width: undefined,
          // height: undefined,
        },
      ],
      collapsable: false,
    };
    return React.cloneElement(child as ReactElement, newProps);
  });
};

solved my issue

[jason-vault]

Can confirm the same issue.

@elmcapp thanks for the legwork on pin pointing the issue!

In my case, reverting to 5.4.13 solved for me in the absence of a patch.

[vtoupet]

I found a fix for the issue. Would be nice if @troZee could patch this for us. Go to file path: node_modules/react-native-pager-view/scr/utils.tsx comment out line 30 and 31

currently

export const childrenWithOverriddenStyle = (children?: ReactNode) => {
  // Override styles so that each page will fill the parent. Native component
  // will handle positioning of elements, so it's not important to offset
  // them correctly.
  return Children.map(children, (child) => {
    const { props } = child as ReactElement;
    const newProps = {
      ...props,
      style: [
        props.style,
        {
          position: 'absolute',
          flex:1,
          left: 0,
          top: 0,
          right: 0,
          bottom: 0,
          width: undefined,
          height: undefined,
        },
      ],
      collapsable: false,
    };
    return React.cloneElement(child as ReactElement, newProps);
  });
};

to

export const childrenWithOverriddenStyle = (children?: ReactNode) => {
  // Override styles so that each page will fill the parent. Native component
  // will handle positioning of elements, so it's not important to offset
  // them correctly.
  return Children.map(children, (child) => {
    const { props } = child as ReactElement;
    const newProps = {
      ...props,
      style: [
        props.style,
        {
          position: 'absolute',
          flex:1,
          left: 0,
          top: 0,
          right: 0,
          bottom: 0,
          // width: undefined,
          // height: undefined,
        },
      ],
      collapsable: false,
    };
    return React.cloneElement(child as ReactElement, newProps);
  });
};

solved my issue

FYI it worked for me.

[andreialecu]

This should be fixed by #565

[tradebulls]

@andreialecu It does not fix for me with #565 . However my issue was resolved with the solution given by @elmcapp . Can we consider it as a fix?

[andreialecu]

#565 initially fixed it but it regressed again in #567

I'm working on a new fix in #580

[tradebulls]

@andreialecu Thanks for doing so 👍

[chandresh8187]

i have same issue in latest version of react-native-pager-view