Skip to content
This repository has been archived by the owner on Jan 30, 2021. It is now read-only.

Use nativeEvent.layout in onLayout, instead of buggy measureInWindow #42

Closed
wants to merge 1 commit into from
Closed

Use nativeEvent.layout in onLayout, instead of buggy measureInWindow #42

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 35 additions & 33 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,9 +137,16 @@ class SafeView extends Component {
);
}

_onLayout = (...args) => {
_onLayout = (info, ...args) => {
if (!this.view) return;
if (!info || !info.nativeEvent) {
if (this.props.onLayout) {
this.props.onLayout(...args);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we need to pass the info var through here. i'd call it e or event instead, also. to see why it's necessary to pass it through have a look at https://snack.expo.io/@notbrent/thrilled-pizza - run it and then look at logs, you'll see this:

screen shot 2018-09-19 at 12 26 43 pm

return;
}
}

const { layout } = info.nativeEvent;
const { isLandscape } = this.props;
const { orientation } = this.state;
const newOrientation = isLandscape ? 'landscape' : 'portrait';
Expand All @@ -150,42 +157,37 @@ class SafeView extends Component {
const WIDTH = isLandscape ? X_HEIGHT : X_WIDTH;
const HEIGHT = isLandscape ? X_WIDTH : X_HEIGHT;

this.view._component.measureInWindow((winX, winY, winWidth, winHeight) => {
if (!this.view) {
return;
}
let realY = winY;
let realX = winX;
let realY = layout.y;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this will give the x and y relative to the container, not the x and y relative to the entire window. we need to know the x/y relative to the window because that's the only way to know if the container overlaps with a safe area. again run https://snack.expo.io/@notbrent/thrilled-pizza and notice the logs for "nested" show x/y of 0,0 despite it not being in the top left of the screen.

let realX = layout.x;

if (realY >= HEIGHT) {
realY = realY % HEIGHT;
} else if (realY < 0) {
realY = realY % HEIGHT + HEIGHT;
}
if (realY >= HEIGHT) {
realY = realY % HEIGHT;
} else if (realY < 0) {
realY = (realY % HEIGHT) + HEIGHT;
}

if (realX >= WIDTH) {
realX = realX % WIDTH;
} else if (realX < 0) {
realX = realX % WIDTH + WIDTH;
}
if (realX >= WIDTH) {
realX = realX % WIDTH;
} else if (realX < 0) {
realX = (realX % WIDTH) + WIDTH;
}

const touchesTop = realY === 0;
const touchesBottom = realY + winHeight >= HEIGHT;
const touchesLeft = realX === 0;
const touchesRight = realX + winWidth >= WIDTH;

this.setState({
touchesTop,
touchesBottom,
touchesLeft,
touchesRight,
orientation: newOrientation,
viewWidth: winWidth,
viewHeight: winHeight,
});

if (this.props.onLayout) this.props.onLayout(...args);
const touchesTop = realY === 0;
const touchesBottom = realY + layout.height >= HEIGHT;
const touchesLeft = realX === 0;
const touchesRight = realX + layout.width >= WIDTH;

this.setState({
touchesTop,
touchesBottom,
touchesLeft,
touchesRight,
orientation: newOrientation,
viewWidth: layout.width,
viewHeight: layout.height
});

if (this.props.onLayout) this.props.onLayout(...args);
};

_getSafeAreaStyle = () => {
Expand Down