feat(iOS, Tabs): integration with ScrollViewMarker by kkafar · Pull Request #4191 · software-mansion/react-native-screens

kkafar · 2026-06-18T15:27:30Z

Description

Integrates the ScrollViewMarker component with the Tabs special-effects system on iOS.

Until now, Tabs relied purely on a descendant-chain heuristic (RNSScrollViewFinder) to
locate the scroll view backing a tab screen. This PR lets a ScrollViewMarker explicitly
register its wrapped scroll view with the enclosing tab screen, so the content scroll view
is known precisely instead of being guessed. The heuristic is kept as a fallback when no
marker is present.

This integration is currently gated behind the RNS_GAMMA_ENABLED compilation flag and will
remain so until we are able to remove that flag.

Closes https://github.com/software-mansion/react-native-screens-labs/issues/1536
Closes https://github.com/software-mansion/react-native-screens-labs/issues/1537

Changes

RNSTabsScreenComponentView now conforms to RNSScrollViewSeeking. When a descendant
marker registers its scroll view, the screen forwards it to its view controller via
setContentScrollView:forEdge:NSDirectionalRectEdgeAll. On a tab change the
RNSTabBarController queries the child view controller for its content scroll view, so the
registered scroll view flows into the special-effects system automatically.
RNSTabsScreenViewController gains resolveContentScrollView, which prefers the explicitly
registered content scroll view (querying the bottom, then top edge) and falls back to the
RNSScrollViewFinder heuristic. The repeated-tab-selection scroll-to-top effect now uses it.
RNSScrollViewMarkerComponentView:
- walks the React superview chain (reactSuperview) when looking for a seeking ancestor,
  because at transaction-end time the RNSTabsScreenComponentView may not yet be attached to
  its parent (tab not selected, or registration runs too early);
- resets its registration state when it leaves the window, so it re-registers on
  re-attachment (e.g. switching back to a tab).
Cleanup in RNSTabsHostComponentView.
Added an integration test scenario exercising a marker inside Tabs.

Notes / limitations

Only the case where the ScrollViewMarker sits directly under Tabs (no Stack v4/v5 in
between) is handled here. Those compositions will be integrated in follow-up PRs.
With multiple ScrollViewMarkers under the same seeking ancestor there is currently a
potential race condition in which marker wins registration.

Visual docs

Edge effects

Important

Seemingly the edge effect is applied correctly no matter the integration with the scrollview marker. Likely UITabBarController uses some different logic to UIViewController.contentScrollView to detect scrollview, because even when I have had returned nil from the method, the edge effect had still been applied. Nevertheless, I decided to include this test case here, just to make sure it works. Also this allows us to test that different ScrollViewMarkers from different tab update the edge effect correctly on tab change.

before	after
ios-26-scroll-edge-effects-before.mov	ios-26-scroll-edge-effects-after.mov

Special effects

before	after
ios-26-tabs-special-effects-before.mov	ios-26-tabs-special-effects-after.mov

Test plan

Tested with the new integration scenario:

apps/src/tests/component-integration-tests/scroll-view-marker/test-svm-tabs-edge-effects/index.tsx
apps/src/tests/component-integration-tests/scroll-view-marker/test-svm-tabs-edge-effects/scenario-description.ts
registered in apps/src/tests/component-integration-tests/index.tsx as ScrollViewMarker

Steps (iOS, RNS_GAMMA_ENABLED=1):

Run FabricExample and open the component-integration tests.
Open ScrollViewMarker integration cases → Integration: SVM in Tabs - edge effects.
Scroll the list in each tab and confirm the scroll edge effect is applied per tab
(Home → hard, Second → soft).
Tap the currently selected tab again and confirm the list scrolls to top (repeated-tab
selection effect resolves the marker-registered scroll view).

Checklist

Included code example that can be used to test this change.
For visual changes, included screenshots / GIFs / recordings documenting the change.
For API changes, updated relevant public types.
Ensured that CI passes

There are a couple of important things here. First, note that we set the *contentScrollView* on the `RNSTabsScreenViewController`. This works, because on tab change the `RNSTabBarController` queries the child view controller for its *content scroll view*. Second - I've improved search method for `RNSScrollViewSeeking`, since at the moment of transaction end, the `RNSTabsScreenComponentView` is not yet attached to it's parent - it's either not currently selected or it's just too early. This way I give a change to find a seeking parent. Please note however, that if there were multiple `ScrillViewMarkers`, then we'd have a kind of race condition.

Thanks to how we've structured this beforehand, it was easy! There are things to note, however. First, this commit handles only case where the scrollview marker is under Tabs, but there is no Stack v4 or v5 between. These will be integrated separately in separate PRs.

Copilot

Pull request overview

This PR aims to integrate iOS Tabs with ScrollViewMarker so that Tabs-related behaviors (e.g., resolving the “content” scroll view for special effects / edge-related behavior) work even when the scroll view isn’t discoverable via the existing first-descendant-chain heuristic. It also adds a new component-integration scenario in the example app to exercise ScrollViewMarker-in-Tabs behavior.

Changes:

Update iOS Tabs screen controller to resolve the content scroll view via a new helper method.
Add RNSScrollViewSeeking plumbing in RNSTabsScreenComponentView to receive marker-provided scroll views.
Add a new component-integration test scenario group + scenario for ScrollViewMarker in Tabs (iOS).

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
ios/tabs/screen/RNSTabsScreenViewController.mm	Adds a helper to resolve the content scroll view for repeated tab-selection behavior.
ios/tabs/screen/RNSTabsScreenComponentView.mm	Adds ScrollViewMarker “seeking” integration to pass a descendant scroll view upward.
ios/gamma/scroll-view-marker/RNSScrollViewMarkerComponentView.mm	Adjusts ancestor traversal to use React superview semantics and resets registration when removed from window.
apps/src/tests/component-integration-tests/scroll-view-marker/test-svm-tabs-edge-effects/scenario-description.ts	Introduces metadata for a new integration scenario.
apps/src/tests/component-integration-tests/scroll-view-marker/test-svm-tabs-edge-effects/index.tsx	Adds a new integration scenario app exercising ScrollViewMarker inside Tabs.
apps/src/tests/component-integration-tests/scroll-view-marker/index.ts	Registers the new ScrollViewMarker integration scenarios group.
apps/src/tests/component-integration-tests/index.tsx	Exposes the new ScrollViewMarker scenario group in the component-integration test menu.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

RNSTabsScreenComponentView stored the registered scroll view and its marker in ivars that were only ever assigned and nilled, never read. The marker was held strongly even though it lives inside the screen's own view subtree, adding a redundant strong edge to a descendant. Remove both ivars and their assignments; registerDescendantScrollView: now just forwards the scroll view to the controller.

Add a second ScrollViewMarker integration scenario covering the tab-repetition special effect with a Stack nested inside Tabs, and register it in the scenario group. HeuristicBreakingView is now an actual heuristic-breaking element (non-collapsable, zero-height view rendered before the marker) so both scenarios exercise the marker-based content-scroll-view registration path instead of falling back to the descendant-chain finder. Also drop unused imports left over in the edge-effects scenario.

Clarify that the scenario covers scroll edge effects specifically. Renames the directory, scenario key, and import symbol.

Copilot

Pull request overview

Copilot reviewed 9 out of 9 changed files in this pull request and generated 2 comments.

kligarski · 2026-06-23T06:40:34Z

+import type { ScenarioDescription } from '@apps/tests/shared/helpers';
+
+export const scenarioDescription: ScenarioDescription = {
+  name: 'Integration: SVM in Tabs - edge effects',


nit: do we need the "Integration:" in the name if it's already in component integration tests directory? Applies to both test screens.

kligarski · 2026-06-23T07:22:07Z

+  if (auto sv = [self contentScrollViewForEdge:NSDirectionalRectEdgeBottom]; sv != nil) {
+    return sv;
+  }
+  if (auto sv = [self contentScrollViewForEdge:NSDirectionalRectEdgeTop]; sv != nil) {
+    return sv;
+  }


Is there a reason why we check bottom and then top edge in this order or is it arbitrarily chosen? It would be nice to have a comment here.

No, I don't think there is. There might be once we add possibility to specify multiple scrollviews (different scrollviews for different edges), but it is not yet supported.

kligarski · 2026-06-23T07:35:33Z

+{
+  [super didMoveToWindow];
+  if (self.window == nil) {
+    _hasAttemptedRegistration = NO;


The marker immediately re-registers the scroll view after any mounting transaction:

Screen.Recording.2026-06-23.at.09.33.35.mov

Should we gate registration with window != nil check maybe?

That won't do unfortunately. But I think I'll try to organise the registration in a bit different manner.

t0maboro · 2026-06-23T08:00:30Z

I'm seeing some inconsistency: after the 1st tab switch, scrollToTop isn't working, after subsequent switches it started working

stack-svm-tabs.mov

t0maboro · 2026-06-23T07:54:29Z

+  return <TabsContainer routeConfigs={TABS_ROUTE_CONFIGS} />;
+}
+
+function StackTabScreen() {


aren't we missing export or is this intentional?

we are coming back to state where we will export only App() (now it should be renamed) and default export createScenario()
#4201

LKuchno

I left a few comments with suggested changes to better align with our current test and scenario structures. Also changes corresponding to new export/import PR#4201 changes were propose. Some comments include open questions regarding the correct naming conventions.

LKuchno · 2026-06-23T09:56:37Z

+  return <TabsContainer routeConfigs={TABS_ROUTE_CONFIGS} />;
+}
+
+function StackTabScreen() {


we are coming back to state where we will export only App() (now it should be renamed) and default export createScenario()
#4201

LKuchno · 2026-06-23T11:34:28Z

+
+- [ ] There should be two tabs: `Home` and `Second`.
+- [ ] `Home` tab should be selected.
+- [ ] `Hard` scroll-edge-effect should be applied (opqaue background of tab bar).


Maybe we can expand a bit on what is expected for Hard:

Suggested change

- [ ] `Hard` scroll-edge-effect should be applied (opqaue background of tab bar).

- [ ] `Hard` scroll-edge-effect should be applied (opaque background of tab bar with a hard cutoff and dividing line).

Dividing line? I haven't noticed such. Will take another look later 😄

It's actually taken from 'hard' scroll-edge-effect documentation I interpret it as visible cutoff tab bar 😅

Co-authored-by: Krzysztof Ligarski <63918941+kligarski@users.noreply.github.com> Co-authored-by: lkuchno <45803783+LKuchno@users.noreply.github.com>

kmichalikk · 2026-06-24T09:12:16Z

+
+## Prerequisites
+
+iOS: simulator with iOS 26+ is enough,


kmichalikk · 2026-06-24T09:12:26Z

+- [ ] There should be two tabs: `Home` and `Stack`.
+- [ ] `Home` tab should be selected.
+
+2. Scrolldown a bit.


nit: scroll down

kkafar added 5 commits June 18, 2026 17:29

start: @kkafar/svm-tabs-integration

da9650d

Add integration test with tabs

e5f2666

Cleanup in RNSTabsHostComponentView

93ed840

kkafar force-pushed the @kkafar/svm-tabs-integration branch from e94b623 to 93ed840 Compare June 18, 2026 15:30

kkafar requested a review from Copilot June 18, 2026 16:18

Copilot started reviewing on behalf of kkafar June 18, 2026 16:19 View session

Copilot AI reviewed Jun 18, 2026

View reviewed changes

kkafar added 3 commits June 22, 2026 12:00

test(Tabs): rename SVM edge-effects scenario to scroll-edge-effects

b2faa93

Clarify that the scenario covers scroll edge effects specifically. Renames the directory, scenario key, and import symbol.

kkafar requested review from Copilot, kligarski, kmichalikk, sgaczol and t0maboro June 22, 2026 12:21

kkafar marked this pull request as ready for review June 22, 2026 12:21

Copilot started reviewing on behalf of kkafar June 22, 2026 12:22 View session

Copilot AI reviewed Jun 22, 2026

View reviewed changes

Comment thread ...s/component-integration-tests/scroll-view-marker/test-svm-tabs-scroll-edge-effects/index.tsx Outdated

Comment thread ...component-integration-tests/scroll-view-marker/test-stack-svm-tabs-special-effects/index.tsx

kkafar added 5 commits June 22, 2026 15:07

Add scenario description for the scroll-edge-effects test

9cb43ba

Update scenario description

108d473

Update scenario

d82e05d

Add scenario for the special-effects test

3fc79b9

type imports

5375a8e

kligarski reviewed Jun 23, 2026

View reviewed changes

t0maboro approved these changes Jun 23, 2026

View reviewed changes

LKuchno requested changes Jun 23, 2026

View reviewed changes

Apply suggestions from code review

00e06b8

Co-authored-by: Krzysztof Ligarski <63918941+kligarski@users.noreply.github.com> Co-authored-by: lkuchno <45803783+LKuchno@users.noreply.github.com>

kmichalikk approved these changes Jun 24, 2026

View reviewed changes

	- [ ] `Hard` scroll-edge-effect should be applied (opqaue background of tab bar).
	- [ ] `Hard` scroll-edge-effect should be applied (opaque background of tab bar with a hard cutoff and dividing line).

Uh oh!

Conversation

kkafar commented Jun 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changes

Notes / limitations

Visual docs

Edge effects

Special effects

Test plan

Checklist

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

t0maboro commented Jun 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

LKuchno left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

kkafar commented Jun 18, 2026 •

edited

Loading

t0maboro commented Jun 23, 2026 •

edited

Loading