React-native-router-flux: Need to support iPhone 12 status bar height

[HackingGate]

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.

[SuperBesse]

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

[karuzo17]

For me the solution is not working, as well.

[shiqkuangsan]

the tabbar gets the same problem.

[HackingGate]

the tabbar gets the same problem.

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

[shiqkuangsan]

the tabbar gets the same problem.

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

thankU, it is resolved

[Ilario17]

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

[shiqkuangsan]

@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]

@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]

@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]

@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]

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]

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

[psppro26]

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

[Zakyyy]

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

[syanbo]

1. 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)
  );
})();

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

[projects-leocan]

@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]

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]

Has this been solved?

[mklb]

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

[aksonov]

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

[HackingGate]

@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]

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.
pakcage.json { "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]

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

[HackingGate]

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

[aksonov]

Should be fixed with 4.3.0