Commit c789812
authored
fix(iOS, Tabs):
## Description
Fixes `overrideScrollViewContentInsetAdjustmentBehavior` in managed tabs
on iOS, Fabric.
| before | after |
| --- | --- |
| <video
src="https://github.com/user-attachments/assets/c3ba2519-c710-4348-836c-b06d5ccb2c2e"
/> | <video
src="https://github.com/user-attachments/assets/d593dfcc-e758-406b-8a1c-d8ab89ac1303"
/> |
### Details
Previously, `overrideScrollViewBehaviorInFirstDescendantChainIfNeeded`
was called in `updateSelectedViewController` which is called when
`reactMountingTransactionDidMount`. This worked without any problems
with controlled tabs as tab changes happen only via
`updateSelectedViewController` in reaction to update from JS (the native
tab change is prevented by returning `NO` from
`tabBarController:shouldSelectViewController:` and appropriate event is
sent to JS).
In managed tabs, native tab change is not prevented and screen view
controller is selected immediately. Tab screen is temporarily empty
before content is mounted. When the content is mounted, it immediately
becomes visible. After transaction had been mounted, we would run
`overrideScrollViewBehaviorInFirstDescendantChainIfNeeded` but this was
too late - screen's content was already visible so overriding behavior
wouldn't change initial scroll position.
To provide a solution that will work in both control modes, we decided
to run `overrideScrollViewBehaviorInFirstDescendantChainIfNeeded`
exactly when child is mounted to tab screen. This works on Fabric
because children are mounted from bottom to top - when child is mounted
to tab screen, we're sure that the entire hierarchy below it already
exists.
### Paper
On Paper, due to the order of mounting children, we are unable to
consistently find and override scroll view behavior in time (when the
entire hierarchy is mounted under screen but before screen is shown).
The best solution I found (`dispatch_async` in `didUpdateReactSubviews`)
worked 50% of the time.
For now, we decided not to implement support for the prop on Paper.
Ticket to research Paper support:
software-mansion/react-native-screens-labs#283.
## Changes
- move finding ScrollView and applying behavior override + scroll edge
effects to `mountChildComponentView`
## Test code and steps to reproduce
Run `TestBottomTabs`. Change Tab4 to use transparent header on first
screen. Open Tab3, Tab4. ScrollViews should respect safe area insets.
Use controlled and managed bottom tabs, with and without freeze.
## Checklist
- [x] Included code example that can be used to test this change
- [x] Updated documentation
- [x] Ensured that CI passesoverrideScrollViewContentInsetAdjustmentBehavior in managed tabs (#3441)1 parent 1999a2b commit c789812
File tree
4 files changed
+10
-5
lines changed- ios/bottom-tabs
- host
- screen
- src/components/bottom-tabs
4 files changed
+10
-5
lines changed| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
162 | 162 | | |
163 | 163 | | |
164 | 164 | | |
165 | | - | |
166 | | - | |
| 165 | + | |
167 | 166 | | |
168 | 167 | | |
169 | 168 | | |
| |||
Lines changed: 7 additions & 0 deletions
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
456 | 456 | | |
457 | 457 | | |
458 | 458 | | |
| 459 | + | |
| 460 | + | |
| 461 | + | |
| 462 | + | |
| 463 | + | |
| 464 | + | |
| 465 | + | |
459 | 466 | | |
460 | 467 | | |
461 | 468 | | |
| |||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
265 | 265 | | |
266 | 266 | | |
267 | 267 | | |
268 | | - | |
269 | | - | |
270 | | - | |
271 | 268 | | |
272 | 269 | | |
273 | 270 | | |
| |||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
504 | 504 | | |
505 | 505 | | |
506 | 506 | | |
| 507 | + | |
| 508 | + | |
507 | 509 | | |
508 | 510 | | |
509 | 511 | | |
| |||
0 commit comments