Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

onLayout height does not capture border #23994

Closed
CyberMew opened this issue Mar 18, 2019 · 3 comments
Closed

onLayout height does not capture border #23994

CyberMew opened this issue Mar 18, 2019 · 3 comments
Labels
Bug Resolution: Locked This issue was locked by the bot.

Comments

@CyberMew
Copy link

🐛 Bug Report

onLayout is providing incorrect values, resulting in my animated height value to be inaccurate.
Screenshot 2019-03-18 at 4 08 36 PM
^ Screenshot had a +10 bottom padding, if I remove it, the last line of text is cut in half for sure.

To Reproduce

Please look at code example. Download it and run it on iOS simulator. The react/native version does not matter.

Look at where the red box bottom is at, in relation to the bottom text. Now click on the bold title to close the panel and click on it to open it again.

Observe the screw up.

Observe the code in ./components/Panel.js especially setMaxHeight and setMinHeight which are the onLayout functions.

Expected Behavior

Screenshot 2019-03-18 at 4 08 31 PM

^ I expect to see this and not a shorten/cut off text.

Code Example

https://github.com/CyberMew/rnbug

Environment

React Native Environment Info:
System:
OS: macOS 10.14.3
CPU: (12) x64 Intel(R) Core(TM) i7-8700B CPU @ 3.20GHz
Memory: 9.64 GB / 32.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.15.1 - /usr/local/bin/node
npm: 6.4.1 - /usr/local/bin/npm
SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
IDEs:
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.3 => 16.8.3
react-native: 0.59.1 => 0.59.1
npmGlobalPackages:
react-native-cli: 2.0.1

@CyberMew
Copy link
Author

The workaround is to either manually compensate for the borderWidth by adding that amount when expanding the panel, or remove borderWidth: 2 totally. Not good.

@dulmandakh
Copy link
Contributor

@CyberMew you can have borderWidth constant and use it to calculate the layout. I'm afraid that it won't be fixed, because it'll be breaking change for other apps that relies on current implementation.

@CyberMew
Copy link
Author

Is this “quirk” (and probably others we don’t know about) documented or is this something we will have to come across and debug/workaround ourselves?

@facebook facebook locked as resolved and limited conversation to collaborators Mar 19, 2020
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Mar 19, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Bug Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests

3 participants