fix: calculate values of useHeaderHeight natively #1802
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…DidLayoutSubviews call
|
Will this also mitigate the issue with the jumping header on Android when using bottom tabs? |
|
Hi @hirbod, I think it should, but as this PR is still in an early state I cannot guarantee that. If this problem is strictly related to the value that is represented by the |
…move detection of layout to RNScreensNavigationController
8 tasks
|
That’s such good news @tboba, this dynamic calculation of the header size works also correctly on iOS modals? |
|
@outaTiME I looked onto that and it looks like header height is not being calculated on full screen modal - I already know why! I'll make a patch tomorrow for that 👍 |
tboba
changed the title
WoLewicki
reviewed
Aug 4, 2023
android/src/main/java/com/swmansion/rnscreens/ScreenContainer.kt
Outdated
Show resolved
Hide resolved
|
@tboba great work, thank you! I just tested the new |
|
Hi @ha3, thanks for letting us know! ❤️ It looks like 
However, as I tested 
As we're now thinking about changing the implementation of |
8 tasks
…header height in NativeStackView
…ismisses Finally, a long-debated topic has met its end. I've managed to dive deeper how NativeStackView is currently storing values and reduces the amount of calls to `calculateHeaderHeightIsModal` on iOS. In case when bugs related to the `use(Re)animatedHeaderHeight` hook will occur in the future, we should consider looking into this commit in case when there will be a need to increase amount of calls to this method. This change has been tested on ScreensExample/TestsExample iOS environment, including nested stacks.
|
/cc @kkafar @WoLewicki could you please take a quick look into those changes? I've removed 3 of 5 calls to |
WoLewicki
reviewed
Aug 18, 2023
android/src/main/java/com/swmansion/rnscreens/ScreenContainer.kt
Outdated
Show resolved
Hide resolved
kkafar
reviewed
Aug 21, 2023
1 task
## Description Currently, on Android side it looks like we're using `useSafeAreaInsets` hook from `react-native-safe-area-context` improperly. This hook is sending proper status bar height only if there's option `statusBarTranslucent` set to true. Thus, we should use y-axis position of the frame - `useSafeAreaFrame` is giving us this option with its `y` value. This change is a part of ongoing work in Pull Request #1802 that implements `use(Re)animatedHeaderHeight` hook. ## Changes - Added a statement that checks if `statusBarTranslucent` option is set to true for Android. - Refactorized a logic for getting status bar height and moved it to new function. ## Screenshots / GIFs ### Before <img width="1505" alt="Screenshot 2023-08-21 at 10 22 13" src="https://github.com/software-mansion/react-native-screens/assets/23281839/b504115f-5fc6-44d7-b82b-9a49ac19be86"> We can see the correct value (from `react-native-safe-area-context` perspective) is being reported wrongly by useSafeAreaInsets after reporting initial inset. This probably occurs because of the ViewGroup being layout after sending initial metrics. ### After <img width="1427" alt="Screenshot 2023-08-21 at 11 23 28" src="https://github.com/software-mansion/react-native-screens/assets/23281839/2e75da8f-bd86-449f-ab1f-ce533a622f93"> iOS devices are not impacted because of this change. You can use `Test1844` to test the changes. ## Checklist - [x] Ensured that CI passes
kkafar
approved these changes
Aug 21, 2023
renovate bot
referenced
this pull request
in valora-inc/wallet
Nov 2, 2023
[](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [react-native-screens](https://togithub.com/software-mansion/react-native-screens) | [`^3.25.0` -> `^3.26.0`](https://renovatebot.com/diffs/npm/react-native-screens/3.25.0/3.26.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>software-mansion/react-native-screens (react-native-screens)</summary> ### [`v3.26.0`](https://togithub.com/software-mansion/react-native-screens/releases/tag/3.26.0) [Compare Source](https://togithub.com/software-mansion/react-native-screens/compare/3.25.0...3.26.0) Minor release adding new useAnimatedHeaderHeight and useReanimatedHeaderHeight hooks, providing fixes for search bar and introducing internal changes. *Please note that new hooks introduced in this release are fully functional on Paper, on Fabric there are few edge cases we are still working on*. #### What's Changed #### 🐛 Bug fixes - Change implementation of `headerConfig` prop on Android by [@​tboba](https://togithub.com/tboba) in [https://github.com/software-mansion/react-native-screens/pull/1883](https://togithub.com/software-mansion/react-native-screens/pull/1883) - Change elements visibility on search bar open by [@​tboba](https://togithub.com/tboba) in [https://github.com/software-mansion/react-native-screens/pull/1903](https://togithub.com/software-mansion/react-native-screens/pull/1903) - Fix positioning of large header and search bar by [@​tboba](https://togithub.com/tboba) in [https://github.com/software-mansion/react-native-screens/pull/1895](https://togithub.com/software-mansion/react-native-screens/pull/1895) - Change implementation of calculating status bar, refactor methods used on header height change by [@​tboba](https://togithub.com/tboba) in [https://github.com/software-mansion/react-native-screens/pull/1917](https://togithub.com/software-mansion/react-native-screens/pull/1917) - Fix calculating header height when changing status/action bar visibility by [@​tboba](https://togithub.com/tboba) in [https://github.com/software-mansion/react-native-screens/pull/1922](https://togithub.com/software-mansion/react-native-screens/pull/1922) - Allow Reanimated Screen to check large header by [@​tboba](https://togithub.com/tboba) in [https://github.com/software-mansion/react-native-screens/pull/1915](https://togithub.com/software-mansion/react-native-screens/pull/1915) - Fix issue when emptying nav stack on Windows by [@​chrisglein](https://togithub.com/chrisglein) in [https://github.com/software-mansion/react-native-screens/pull/1890](https://togithub.com/software-mansion/react-native-screens/pull/1890) - Update podspec to use install_modules_dependencies by [@​cipolleschi](https://togithub.com/cipolleschi) in [https://github.com/software-mansion/react-native-screens/pull/1920](https://togithub.com/software-mansion/react-native-screens/pull/1920) - Remove MaxPerm args from JVM invocation by [@​kkafar](https://togithub.com/kkafar) in [https://github.com/software-mansion/react-native-screens/pull/1888](https://togithub.com/software-mansion/react-native-screens/pull/1888) #### 👍 Improvements - Calculate values of useHeaderHeight natively by [@​tboba](https://togithub.com/tboba) in [https://github.com/software-mansion/react-native-screens/pull/1802](https://togithub.com/software-mansion/react-native-screens/pull/1802) - Allow for different fragment types inside ScreenContainer by [@​kkafar](https://togithub.com/kkafar) in [https://github.com/software-mansion/react-native-screens/pull/1887](https://togithub.com/software-mansion/react-native-screens/pull/1887) - Add focused states on page transitions by [@​tboba](https://togithub.com/tboba) in [https://github.com/software-mansion/react-native-screens/pull/1894](https://togithub.com/software-mansion/react-native-screens/pull/1894) #### 🔢 Miscellaneous - **Create FUNDING.yml by [@​aleqsio](https://togithub.com/aleqsio) in [https://github.com/software-mansion/react-native-screens/pull/1886](https://togithub.com/software-mansion/react-native-screens/pull/1886)** - Migrate from deprecated `RCTEventEmitter` by [@​kkafar](https://togithub.com/kkafar) in [https://github.com/software-mansion/react-native-screens/pull/1867](https://togithub.com/software-mansion/react-native-screens/pull/1867) - Use `require` syntax for resolution of all native components by [@​kkafar](https://togithub.com/kkafar) in [https://github.com/software-mansion/react-native-screens/pull/1909](https://togithub.com/software-mansion/react-native-screens/pull/1909) - Run Android e2e with JDK 17 by [@​kkafar](https://togithub.com/kkafar) in [https://github.com/software-mansion/react-native-screens/pull/1892](https://togithub.com/software-mansion/react-native-screens/pull/1892) - Put timelimit on execution of each workflow by [@​kkafar](https://togithub.com/kkafar) in [https://github.com/software-mansion/react-native-screens/pull/1893](https://togithub.com/software-mansion/react-native-screens/pull/1893) - Trigger e2e tests on JS-only changes by [@​kkafar](https://togithub.com/kkafar) in [https://github.com/software-mansion/react-native-screens/pull/1910](https://togithub.com/software-mansion/react-native-screens/pull/1910) - Update deprecated expo install instructions to `npx expo install` by [@​GabrieldosSantosOliveira](https://togithub.com/GabrieldosSantosOliveira) in [https://github.com/software-mansion/react-native-screens/pull/1899](https://togithub.com/software-mansion/react-native-screens/pull/1899) - Bump activesupport from 6.1.7.3 to 7.0.7.2 in /TestsExample by [@​dependabot](https://togithub.com/dependabot) in [https://github.com/software-mansion/react-native-screens/pull/1877](https://togithub.com/software-mansion/react-native-screens/pull/1877) - Update deps & RN in example apps after release by [@​kkafar](https://togithub.com/kkafar) in [https://github.com/software-mansion/react-native-screens/pull/1878](https://togithub.com/software-mansion/react-native-screens/pull/1878) - Migrate `Example` app & e2e tests to RN 0.72.4 by [@​kkafar](https://togithub.com/kkafar) in [https://github.com/software-mansion/react-native-screens/pull/1880](https://togithub.com/software-mansion/react-native-screens/pull/1880) - Bump library deps to recent versions (including RN) by [@​kkafar](https://togithub.com/kkafar) in [https://github.com/software-mansion/react-native-screens/pull/1881](https://togithub.com/software-mansion/react-native-screens/pull/1881) - Bump library native Android deps & config by [@​kkafar](https://togithub.com/kkafar) in [https://github.com/software-mansion/react-native-screens/pull/1891](https://togithub.com/software-mansion/react-native-screens/pull/1891) #### New Contributors - [@​chrisglein](https://togithub.com/chrisglein) made their first contribution in [https://github.com/software-mansion/react-native-screens/pull/1890](https://togithub.com/software-mansion/react-native-screens/pull/1890) - [@​GabrieldosSantosOliveira](https://togithub.com/GabrieldosSantosOliveira) made their first contribution in [https://github.com/software-mansion/react-native-screens/pull/1899](https://togithub.com/software-mansion/react-native-screens/pull/1899) - [@​cipolleschi](https://togithub.com/cipolleschi) made their first contribution in [https://github.com/software-mansion/react-native-screens/pull/1920](https://togithub.com/software-mansion/react-native-screens/pull/1920) **Full Changelog**: software-mansion/react-native-screens@3.25.0...3.26.0 </details> --- ### Configuration 📅 **Schedule**: Branch creation - "after 5pm,every weekend" in timezone America/Los_Angeles, Automerge - "after 5pm,every weekend" in timezone America/Los_Angeles. 🚦 **Automerge**: Enabled. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://developer.mend.io/github/valora-inc/wallet). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy4xOS4yIiwidXBkYXRlZEluVmVyIjoiMzcuMTkuMiIsInRhcmdldEJyYW5jaCI6Im1haW4ifQ==--> --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: valora-bot <[email protected]> Co-authored-by: Silas Boyd-Wickizer <[email protected]> Co-authored-by: Silas Boyd-Wickizer <[email protected]>
ja1ns
pushed a commit
to WiseOwlTech/react-native-screens
that referenced
this pull request
Oct 9, 2024
](https://renovatebot.com){kind=link}
) ## Description Currently, `useHeaderHeight()` hook returns default values, hard-coded in JS code. It uses `react-native-safe-area-context` under the hood to calculate top inset of the status bar and returns a header height `56` (for android) or `64` (for iOS). This PR introduces new `useAnimatedHeaderHeight` hook that calculates header height on each layout change. ## Changes - Added support for calculating header height dynamically on the old / new architecture for Android and iOS. - Added event that is being executed on header height change. - Added new `useAnimatedHeaderHeight` hook for getting header height that is being calculated dynamically. ## Screenshots / GIFs ### Before https://github.com/software-mansion/react-native-screens/assets/23281839/1e129ce8-cc62-4333-a6d8-f7283f018441 ### After https://github.com/software-mansion/react-native-screens/assets/23281839/5c11f371-c3f7-4eda-9969-4eb02f9de26a ## Test code and steps to reproduce See `Test1802` in `TestsExample` or `FabricTestExample`. There's also `Test1802b` included. It's a reproduction for an issue software-mansion#1671 which shows that issue should be fixed after this change. ## Checklist - [X] Included code example that can be used to test this change - [X] Updated TS types - [X] Updated documentation: - [X] https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md - [X] https://github.com/software-mansion/react-native-screens/blob/main/native-stack/README.md - [X] https://github.com/software-mansion/react-native-screens/blob/main/src/types.tsx - [x] Ensured that CI passes
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Currently,
useHeaderHeight()hook returns default values, hard-coded in JS code. It usesreact-native-safe-area-contextunder the hood to calculate top inset of the status bar and returns a header height56(for android) or64(for iOS).This PR introduces new
useAnimatedHeaderHeighthook that calculates header height on each layout change.Changes
useAnimatedHeaderHeighthook for getting header height that is being calculated dynamically.Screenshots / GIFs
Before
Dynamic.useHeaderHeight.-.BEFORE.mp4
After
Dynamic.useHeaderHeight.-.AFTER.mp4
Test code and steps to reproduce
See
Test1802inTestsExampleorFabricTestExample.There's also
Test1802bincluded. It's a reproduction for an issue #1671 which shows that issue should be fixed after this change.Checklist