Need to support iPhone 12 status bar height #3720

HackingGate · 2020-11-12T10:34:32Z

Version

Tell us which versions you are using:

react-native-router-flux v4.2.0
react v16.13.1
react-native v0.63.0
Xcode 12.1

Expected behaviour

All notch iPhone use 44 height before iPhone 12. On iPhone 12/12 Pro/12 Pro Max it's 47. On iPhone 12 mini it's 50.

Actual behaviour

Status bar height became 20 on all iPhone 12 series.

Workaround I found

Upgrade react-navigation-stack to the latest 2.10.0 will fix.

Or add this to your project's package.json file.

  "resolutions": {
    "react-native-router-flux/**/react-navigation-stack": "^2.10.0"
  },

So far I found this workaround will break header and cause Actions.reset() to have a transition in my project.

The text was updated successfully, but these errors were encountered:

SuperBesse · 2020-11-17T15:58:11Z

Hi @HackingGate .
Thanks for tips but it's not working from my side. Can you publish a PR ?

karuzo17 · 2020-11-20T15:20:58Z

For me the solution is not working, as well.

shiqkuangsan · 2020-11-27T16:08:08Z

the tabbar gets the same problem.

HackingGate · 2020-11-27T16:26:58Z

the tabbar gets the same problem.

@shiqkuangsan
Adding the latest react-native-screens fixed tabbar here.

shiqkuangsan · 2020-11-30T08:21:11Z

the tabbar gets the same problem.

@shiqkuangsan
Adding the latest react-native-screens fixed tabbar here.

thankU, it is resolved

Ilario17 · 2020-12-10T09:54:49Z

@HackingGate I installed the latest version of react-native-screen (2.15.0) but the problem is still there.

shiqkuangsan · 2020-12-10T15:34:18Z

@HackingGate I installed the latest version of react-native-screen (2.15.0) but the problem is still there.

the problem occured because the version of react-navigation-stack in router-flux's dependency is old

Ilario17 · 2020-12-10T15:39:22Z

@shiqkuangsan I solved the problem by forcing react-native-router-flux to use "react-navigation-tabs": "2.10.1", but still on ipad pro it doesn't work.
This library should be updated to react-navigation 5.x

shiqkuangsan · 2020-12-10T15:47:11Z

@shiqkuangsan I solved the problem by forcing react-native-router-flux to use "react-navigation-tabs": "2.10.1", but still on ipad pro it doesn't work.
This library should be updated to react-navigation 5.x

thank U, I'll try your way and I'm gonna take a try to use router-flux v5 alpha ^_^

shiqkuangsan · 2020-12-10T16:06:11Z

@shiqkuangsan I solved the problem by forcing react-native-router-flux to use "react-navigation-tabs": "2.10.1", but still on ipad pro it doesn't work.
This library should be updated to react-navigation 5.x

yes. you're right !!

psppro26 · 2020-12-11T14:24:42Z

Same issue , the bottom bar work with the "react-navigation-tabs": "2.10.1" but the header is still broken.. did you find a fix ?

Ilario17 · 2020-12-11T14:26:27Z

@psppro26 try forcing to use "react-native-screens": "^ 2.15.0"

psppro26 · 2020-12-11T14:28:36Z

@Ilario17 im already on version "react-native-screens": "^2.16.1" ? i must downgrade ?

Zakyyy · 2020-12-22T12:45:14Z

@psppro26 did you downgrade ? and if yes, did it work?

syanbo · 2020-12-28T07:37:38Z

change react-native-safe-area-view

const isIPhoneX = (() => {
  if (Platform.OS === 'web') return false;

  const dimen = Dimensions.get('window');
  return (
    Platform.OS === 'ios'
    && !Platform.isPad
    && !Platform.isTVOS
    && (dimen.height === 780
      || dimen.width === 780
      || dimen.height === 812 || dimen.width === 812
      || dimen.height === 844 || dimen.width === 844
      || dimen.height === 896 || dimen.width === 896
      || dimen.height === 926 || dimen.width === 926)
  );
})();

patch-package react-native-safe-area-view

projects-leocan · 2021-02-01T10:25:49Z

@shiqkuangsan I solved the problem by forcing react-native-router-flux to use "react-navigation-tabs": "2.10.1", but still on ipad pro it doesn't work.
This library should be updated to react-navigation 5.x

yes. you're right !!

How can i update react-navigation to 5.x ? I have same problem please help me.

shiqkuangsan · 2021-02-12T16:28:48Z

add this to your package.json

"resolutions": {
    "react-native-router-flux/**/react-navigation-stack": "^2.10.2"，
    "react-native-router-flux/**/react-navigation-tabs": "^2.10.1"
  },

nica0012 · 2021-03-10T02:54:24Z

Has this been solved?

mklb · 2021-03-10T09:48:37Z

Would love to see a fix as well. Tried everything above with npm and npm-force-resolutions.. did not work :(

aksonov · 2021-03-10T10:40:53Z

Please help me to reproduce issue. I've just installed Example/react-native project and saw status bar height normally

HackingGate · 2021-03-10T11:33:08Z

@aksonov
Are you using iPhone 12 Simulator? (Xcode 12.1+)
I can reproduce with a clean clone.

commit 8318411
Example/react-native
Xcode 12.4 (12D4e)
iPhone 12 iOS 14.4 Simulator

HackingGate · 2021-03-10T12:19:11Z

For users of RNRF v4.2.0

Use Xcode 12.0 or lower to publish your app. You app will use Display Zoom on iPhone 12 series. No extra test needed.
https://hacknicity.medium.com/how-ios-apps-adapt-to-the-various-iphone-12-screen-sizes-e45c021e1b8b

If you don't like Display Zoom. Use my workaround. Here's a complete pakcage.json file that work with commit 8318411, Example/react-native project, iPhone 12 iOS 14.4 Simulator.
But the workaround could raise other issues. That's why I didn't create a PR.
Please test your app before publish.

{
  "name": "Example",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.10",
    "react": "16.13.1",
    "react-native": "0.63.0",
    "react-native-button": "^3.0.1",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-message-bar": "^2.0.10",
    "react-native-reanimated": "^1.9.0",
    "react-native-router-flux": "^4.2.0",
    "react-native-safe-area-context": "^3.2.0",
    "react-native-screens": "^2.18.1"
  },
  "devDependencies": {
    "@babel/core": "^7.10.4",
    "@babel/runtime": "^7.10.4",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.1.0",
    "eslint": "^7.4.0",
    "jest": "^26.1.0",
    "metro-react-native-babel-preset": "^0.60.0",
    "react-test-renderer": "16.13.1"
  },
  "resolutions": {
    "react-native-router-flux/**/react-navigation-stack": "^2.10.2",
    "react-native-router-flux/**/react-navigation-tabs": "^2.10.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

For maintainers and contributors

Fix this issue could be a pain. My suggestion is to develop/test/release RNRF v5 instead of spending time on this issue.

aksonov · 2021-03-10T14:05:59Z

@HackingGate thanks! I've tried numerous ways suggested in React Navigation GitHub (react-navigation/react-navigation#8972 (comment)), but finally used your setup. Please check 4.3.0 version

HackingGate · 2021-03-10T15:16:45Z

@aksonov
It is solved! The Example/react-native project works good enough.

aksonov · 2021-03-24T07:24:14Z

Should be fixed with 4.3.0

aksonov closed this as completed Mar 24, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Need to support iPhone 12 status bar height #3720

Need to support iPhone 12 status bar height #3720

HackingGate commented Nov 12, 2020 •

edited

Loading

SuperBesse commented Nov 17, 2020

karuzo17 commented Nov 20, 2020

shiqkuangsan commented Nov 27, 2020

HackingGate commented Nov 27, 2020

shiqkuangsan commented Nov 30, 2020

Ilario17 commented Dec 10, 2020

shiqkuangsan commented Dec 10, 2020

Ilario17 commented Dec 10, 2020 •

edited

Loading

shiqkuangsan commented Dec 10, 2020

shiqkuangsan commented Dec 10, 2020

psppro26 commented Dec 11, 2020

Ilario17 commented Dec 11, 2020

psppro26 commented Dec 11, 2020

Zakyyy commented Dec 22, 2020

syanbo commented Dec 28, 2020 •

edited

Loading

projects-leocan commented Feb 1, 2021

shiqkuangsan commented Feb 12, 2021 •

edited

Loading

nica0012 commented Mar 10, 2021

mklb commented Mar 10, 2021

aksonov commented Mar 10, 2021

HackingGate commented Mar 10, 2021

HackingGate commented Mar 10, 2021 •

edited

Loading

aksonov commented Mar 10, 2021 •

edited

Loading

HackingGate commented Mar 10, 2021

aksonov commented Mar 24, 2021

Need to support iPhone 12 status bar height #3720

Need to support iPhone 12 status bar height #3720

Comments

HackingGate commented Nov 12, 2020 • edited Loading

Version

Expected behaviour

Actual behaviour

Workaround I found

SuperBesse commented Nov 17, 2020

karuzo17 commented Nov 20, 2020

shiqkuangsan commented Nov 27, 2020

HackingGate commented Nov 27, 2020

shiqkuangsan commented Nov 30, 2020

Ilario17 commented Dec 10, 2020

shiqkuangsan commented Dec 10, 2020

Ilario17 commented Dec 10, 2020 • edited Loading

shiqkuangsan commented Dec 10, 2020

shiqkuangsan commented Dec 10, 2020

psppro26 commented Dec 11, 2020

Ilario17 commented Dec 11, 2020

psppro26 commented Dec 11, 2020

Zakyyy commented Dec 22, 2020

syanbo commented Dec 28, 2020 • edited Loading

projects-leocan commented Feb 1, 2021

shiqkuangsan commented Feb 12, 2021 • edited Loading

nica0012 commented Mar 10, 2021

mklb commented Mar 10, 2021

aksonov commented Mar 10, 2021

HackingGate commented Mar 10, 2021

HackingGate commented Mar 10, 2021 • edited Loading

For users of RNRF v4.2.0

For maintainers and contributors

aksonov commented Mar 10, 2021 • edited Loading

HackingGate commented Mar 10, 2021

aksonov commented Mar 24, 2021

HackingGate commented Nov 12, 2020 •

edited

Loading

Ilario17 commented Dec 10, 2020 •

edited

Loading

syanbo commented Dec 28, 2020 •

edited

Loading

shiqkuangsan commented Feb 12, 2021 •

edited

Loading

HackingGate commented Mar 10, 2021 •

edited

Loading

aksonov commented Mar 10, 2021 •

edited

Loading