question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Header height too tall in portrait (iPhone X)

See original GitHub issue

I have gone through these following points

Issue Description

I’m new in react-native and using react-navigation with tabs using StackNavigator with headerMode: 'none', option and so the reason I want to customise my header by using the NativeBase in different screens.

node, npm, react-native, react and native-base version, expo version if used, xcode version

React Native Environment Info: System: OS: macOS 10.14 CPU: (4) x64 Intel® Core™ i5-5350U CPU @ 1.80GHz Memory: 513.89 MB / 8.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 8.12.0 - /usr/local/bin/node npm: 6.4.1 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0 Android SDK: API Levels: 21, 22, 23, 24, 25, 26, 27, 28 Build Tools: 27.0.3, 28.0.3 System Images: android-24 | Google Play Intel x86 Atom, android-25 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom IDEs: Android Studio: 3.2 AI-181.5540.7.32.5056338 Xcode: 10.0/10A255 - /usr/bin/xcodebuild npmPackages: react: 16.6.0-alpha.8af6728 => 16.6.0-alpha.8af6728 react-native: 0.57.4 => 0.57.4 npmGlobalPackages: create-react-native-app: 2.0.2 react-native-cli: 2.0.1 react-native-git-upgrade: 0.2.7 react-native-scripts: 2.0.1

package.json “dependencies”: { “native-base”: “^2.8.1”, “react-navigation”: “^2.18.2” }

Expected behaviour

Header height to be normal/standard in iPhoneX

Actual behaviour

Header height had ~3x from expected height

Steps to reproduce

screen shot 2018-11-15 at 1 05 41 pm

Is the bug present in both iOS and Android or in any one of them?

[iOS]

Any other additional info which would help us debug the issue quicker.

I looked into this issue https://github.com/GeekyAnts/NativeBase/issues/1823

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:6

github_iconTop GitHub Comments

2reactions
maronskicommented, Nov 15, 2018

My fault, I’m using <SafeAreaView>

Read more comments on GitHub >

github_iconTop Results From Across the Web

Header height too tall in landscape (iPhone X) #1823 - GitHub
In portrait, the height is fine. Rotating to landscape keeps same header height, which takes up too much space. Screenshot of emulator/device.
Read more >
height:100% is not 100% after rotating device - Apple Developer
Viewing that page on an iPhone with iOS 12.2+ will look fine, so rotate to landscape and then rotate back to portrait. A...
Read more >
What is the top bar height of iPhone X? - Stack Overflow
Typo: Navigation bar height as normal is 44pt. If you include the status bar then yes it's 88pt. – skensell. Nov 15, 2017...
Read more >
CSS fix for 100vh in mobile WebKit - Matt Smith
iPhone screen showing sticky footer below Safari browser's menu bar. The footer was hiding below Safari's menu bar. This is the 100vh bug...
Read more >
How to Design for IPhone X - Webdesigner Depot
But the display has a different height: the 812pt height is 145pt taller that 667pt of 4.7” displays. This additional height of iPhone...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found