openDrawerOffset increases right margin every open/close

[cameronmoreau]

A strange bug popped up after I updated from RN 0.49 to 0.55.2

What's wrong

When setting openDrawerOffset to anything other than 0, the content width becomes smaller than the container. This results in, every time the drawer is opened, the content width slowly shrinks. I added some screenshots as well.

I'm guessing it may be due to the rounding when calculating the offset? On iOS RCTView recently changed and this issue may have something to do with the error.

What's expected

When the drawer is open, content should match the width of the drawer and its openDrawerOffset

Made the background a different color so you can tell easily.

First open, you can see that the content width doesn't match the drawer

8th open, you can see it slowly shrinking

This is with 0 offset, no issues

My versions

"react": "^16.3.1",
"react-native": "^0.55.2",
"react-native-drawer": "^2.5.0",

[bteng22]

My team has also updated RN from 0.54.0 to 0.55.2 and is experiencing the same issue. Previously, it was working fine on 0.54.0.

We're using the same versions of the following packages as @cameronmoreau above:
"react": "^16.3.1",
"react-native": "^0.55.2",
"react-native-drawer": "^2.5.0",

This issue is only appearing on iOS, but it seems to work fine on Android devices.

Any extra insight would be super appreciated!

[longvo10]

I had the same problem with "react-native": "0.55.2",

[nppull]

same bug, RN 0.55.2 , ios 🤕 🤕 🤕 🤕

[patrickleemsantos]

Same with me, it happened after upgrade to RN 0.55.2 and for IOS only.

[foyarash]

Temporary fix for me was to remove the parallax tween handler

[hoangvuanhdevelopervn]

I have same problem, the width of drawer decrease after every open, only ios and type "overlay"

[rk85097]

Any solution here?? this is making it not useable... :/

[mtiziano]

I've fixed that issue in this PR #352

[roycclu]

@Numez the fix only works in development mode
I manually put in your two lines of "+ this._length = Math.round(tweenValue*2)/2;"
Worked on simulator.
When exported for distribution, error still occurs.

[mtiziano]

it works for me, @roycclu can you share Your Environment and How to reproduce?

[ryanmr]

I had this issue in my app after upgrading RN .54 -> .55. I can confirm the bug fix in your PR #352 fixes the issue for my app, at least in the iOS simulator.

As a temporary fix (modifying package source code is not an option for my development) I have temporarily switched iOS users to use the static drawer type option. I am looking forward to seeing your PR accepted soon though!

[JasonFehr]

Same problem.

I reverted to RN 0.54 to fix it, hope there's a bug fix soon!

[ItsNoHax]

@Numez Your fix only works on normal iPhone models, the PLUS models or iPhone X still have the problem.

[roycclu]

Okay, thanks for clarifying.
The issue I saw earlier with the fix is not due to simulator vs device.

It was due to iPhone X. Issue still exists on iPhone X

[mtiziano]

Yes @roycclu
Latest commit in #352 PR should be fine

[simonepauro]

Thank you @Numez working great on iPhone Plus and iPhone X!

[inspireui]

same issues

Thank @Numez for fixing but the PR is not worked for me on iPhoneX

[mgvictor7]

Same issue with iPhone Plus models and iPhone X using the PR #352

"react": "^16.2.0",
"react-native": "^0.55.4",
"react-native-drawer": "^2.5.0",

[jhonmer-araujo]

@hoangvuanhdevelopervn how did you fix this issue?

[Dimon70007]

same bug on "iphone 6s Plus" with [email protected] and that fix. I have seen the same bug when tried to change top/bottom/left/right styleProps through Animated.timing function in Animated.View and has fixed it when replace top/bottom/left/right with transform/translateX/translateY

[sdg9]

For what it's worth I did a git bisect between the react-native 0.54.x and 0.55.x and found that this commit in React Native is what causes the problem, at least when testing on iPhone X simulator. I don't have a solution yet.

[nguyenvanphuc2203]

use type="static" resolve this issue