feat: add `ScrollViewMarker` experimental component by kkafar · Pull Request #3674 · software-mansion/react-native-screens

kkafar · 2026-02-21T16:03:17Z

Description

This PR adds a PoC of ScrollViewMarker experimental native component.

It is introduced to handle two responsibilities:

Configuration of ScrollView (in particular edge effects)

I want to move these configuration options off the "screen components",
and have a single component that can be used to configure the ScrollView.
Detection of ScrollView in native view hierarchy

Currently, both we & UIKit employ very simple "first descendant chain" heuristics
to detect the presence of ScrollView in the view hierarchy & use it as
"content ScrollView". This sometimes works, but it is very easy to break by
user code.

Now, user will be required to wrap the ScrollView in our component, so this
is an additional step, but it will allow us to robustly detect the presence
of ScrollView.

There is open question of what do we do, if there are multiple ScrollViews
a user want to configure. There can be only a single "content ScrollView".
Atm. I think that reasonable approach is to have non-required isContentScrollView
property with true as default value, and if there are multiple ScrollView instances,
we can throw an error asking to set this property to false for all, but the
actual "content ScrollView". We should decide on default value of isContentScrollView
based on what we estimate as more frequent use case.

Alternatively, we can expose two components: ScrollViewMarker & ContentScrollViewMarker,
which will handle that prop configuration for the user? Let's discuss below.

Beside adding a component I've also implemented basic support for scroll edge effects
configuration.

RNSScrollViewSeeking protocol is introduced. Other component can implement it to be
notified when ScrollViewMarker is attached to view hierarchy. Currently it is not
used anywhere & it's shape is not final, but it serves PoC purposes.

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

Caveats

a84419e

Similarly to iOS, I use UIManagerListener.didMountItems to detect a
moment when the view hierarchy is assembled.

[!caution]
I've tested & views are created in bottom-up order -> that means the
ScrolLViewMarker will usually be created BEFORE e.g. a StackHost,
therefore its UIManagerListener listener will be added first -> it
will be called before listener of StackHost. If for some reason order
of view creation changes, e.g. ScrollViewMarker will be rendered in
consecutive render, the order here will also change.

Visual documentation

N/A

Test plan

It's rather hard to test this component in isolation & somehow observe an effect
in JS. If someone has an idea - let me know.

Right now, I've introduced test-svm-configures-scroll-view, which uses
StackContainer to make scroll edge effects visible, but mostly this test is about prepared environment for testing on native side. Especially on Android, where there are no edge effects.

Checklist

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

It is still to be decided how ownership model will work

It uses `StackContainer`, but I don't see a way to test this component in full isolation right now. Can we come up with something?

Similarly to iOS, I use UIManagerListener.didMountItems to detect a moment when the view hierarchy is assembled. > [!caution] > I've tested & views are created in bottom-up order -> that means the > `ScrolLViewMarker` will usually be created BEFORE e.g. a `StackHost`, > therefore its `UIManagerListener` listener will be added first -> it > will be called before listener of `StackHost`. If for some reason order > of view creation changes, e.g. `ScrollViewMarker` will be rendered in > consecutive render, the order here will also change.

kkafar

Notes for reviewers

kkafar · 2026-02-23T14:36:40Z

ios/gamma/scroll-view-marker/RNSScrollViewMarkerComponentView.mm

+- (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
+{
+  [super mountChildComponentView:childComponentView index:index];
+}
+
+- (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
+{
+  [super unmountChildComponentView:childComponentView index:index];
+}


I've left these for easier debugging.

Copilot

Pull request overview

This PR introduces a new experimental ScrollViewMarker component for React Native Screens. The component serves two main purposes: (1) configuring ScrollView properties, particularly edge effects on iOS 26+, and (2) providing a robust way to detect ScrollViews in the native view hierarchy through an explicit marker pattern, replacing the fragile "first descendant chain" heuristics.

Changes:

Added ScrollViewMarker experimental component with TypeScript and native (iOS/Android) implementations
Implemented scroll edge effect configuration support for iOS 26+
Introduced RNSScrollViewSeeking protocol for ScrollView registration and discovery
Added test scenario to verify ScrollViewMarker functionality with StackContainer

Reviewed changes

Copilot reviewed 20 out of 21 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/fabric/gamma/ScrollViewMarkerNativeComponent.ts	Codegen native component spec defining props for scroll edge effects
src/experimental/types.ts	Exports ScrollViewMarker types to experimental API
src/experimental/index.ts	Exports ScrollViewMarker component to experimental API
src/components/gamma/scroll-view-marker/index.ts	Main export file for ScrollViewMarker module
src/components/gamma/scroll-view-marker/ScrollViewMarker.types.ts	TypeScript type definitions for component props
src/components/gamma/scroll-view-marker/ScrollViewMarker.tsx	React component implementation mapping props to native component
package.json	Registers native component class for iOS Fabric
ios/gamma/scroll-view-marker/RNSScrollViewMarkerComponentView.mm	iOS native implementation with edge effect application and ScrollView detection
ios/gamma/scroll-view-marker/RNSScrollViewMarkerComponentView.h	iOS header defining RNSScrollViewSeeking protocol
ios/conversion/RNSConversions.h	Updated header guards to include ScrollViewMarker conversions
ios/conversion/RNSConversions-Stack.h	Updated header guards for consistency
ios/conversion/RNSConversions-ScrollViewMarker.mm	Conversion functions for edge effect enums
ios/conversion/RNSConversions-ScrollViewMarker.h	Conversion function declarations
apps/src/tests/single-feature-tests/scroll-view-marker/test-svm-configures-scroll-view.tsx	Test scenario demonstrating ScrollViewMarker with StackContainer
apps/src/tests/single-feature-tests/scroll-view-marker/index.ts	Test scenario group registration
apps/src/shared/utils/color-generator.ts	Utility for generating sequential colors in tests
android/src/main/java/com/swmansion/rnscreens/gamma/scrollviewmarker/ScrollViewSeeking.kt	Android interface for ScrollView registration
android/src/main/java/com/swmansion/rnscreens/gamma/scrollviewmarker/ScrollViewMarkerViewManager.kt	Android ViewManager with iOS-only prop stubs
android/src/main/java/com/swmansion/rnscreens/gamma/scrollviewmarker/ScrollViewMarker.kt	Android native implementation with ScrollView detection
android/src/main/java/com/swmansion/rnscreens/RNScreensPackage.kt	Registers ScrollViewMarkerViewManager
FabricExample/ios/Podfile.lock	Updated dependency checksums

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

Copilot · 2026-02-23T14:45:01Z

android/src/main/java/com/swmansion/rnscreens/gamma/scrollviewmarker/ScrollViewSeeking.kt

+    // scrollView is a ViewGroup, because there is no universal ScrollView component on Android.
+    // It might a be ScrollView, NestedScrollView (different inheritance hierarchies) or any other
+    // ViewGroup that implements appropriate scrolling interfaces.
+    fun registerScrollView(maker: ScrollViewMarker, scrollView: ViewGroup)


The parameter name maker should be marker to correctly identify the ScrollViewMarker instance being registered.

Suggested change

fun registerScrollView(maker: ScrollViewMarker, scrollView: ViewGroup)

fun registerScrollView(marker: ScrollViewMarker, scrollView: ViewGroup)

Copilot · 2026-02-23T14:45:02Z

apps/src/tests/single-feature-tests/scroll-view-marker/index.ts

+import TestSvmDetectsScrollView from './test-svm-configures-scroll-view';
+
+const ScrollViewMarkerScenarioGroup: ScenarioGroup = {
+  name: 'ScrollViewMarker scenarios',
+  details: 'Scenarios related to ScrollViewMarker component',
+  scenarios: [TestSvmDetectsScrollView],


The imported constant name TestSvmDetectsScrollView does not match the actual scenario's name 'Basic functionality' or key 'test-svm-configures-scroll-view'. The import name suggests it's about detecting the scroll view, while the actual scenario key indicates it configures the scroll view. Consider renaming the import to match the scenario, such as TestSvmConfiguresScrollView.

Suggested change

import TestSvmDetectsScrollView from './test-svm-configures-scroll-view';

const ScrollViewMarkerScenarioGroup: ScenarioGroup = {

name: 'ScrollViewMarker scenarios',

details: 'Scenarios related to ScrollViewMarker component',

scenarios: [TestSvmDetectsScrollView],

import TestSvmConfiguresScrollView from './test-svm-configures-scroll-view';

const ScrollViewMarkerScenarioGroup: ScenarioGroup = {

name: 'ScrollViewMarker scenarios',

details: 'Scenarios related to ScrollViewMarker component',

scenarios: [TestSvmConfiguresScrollView],

Copilot · 2026-02-23T14:45:02Z

ios/gamma/scroll-view-marker/RNSScrollViewMarkerComponentView.mm

+- (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
+{
+  [super mountChildComponentView:childComponentView index:index];
+}
+
+- (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
+{
+  [super unmountChildComponentView:childComponentView index:index];
+}
+


These method overrides are empty and only call the superclass implementation without adding any additional logic. Consider removing them unless they're intended as placeholders for future implementation. Empty overrides add unnecessary code and can be confusing to maintainers.

Suggested change

- (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index

{

[super mountChildComponentView:childComponentView index:index];

}

- (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index

{

[super unmountChildComponentView:childComponentView index:index];

}

Copilot · 2026-02-23T14:45:03Z

ios/gamma/scroll-view-marker/RNSScrollViewMarkerComponentView.mm

+  // want to handle such case.
+  if (_needsEdgeEffectUpdate) {
+    _needsEdgeEffectUpdate = NO;
+    [self configureScrollView:[self findScrollView]];


The configureScrollView: method expects a nonnull UIScrollView parameter, but it's called with the result of findScrollView which can return nil (line 60-69). This creates a potential crash if findScrollView returns nil. Consider either making the parameter nullable and adding a nil check, or ensuring that findScrollView never returns nil before calling this method.

Suggested change

[self configureScrollView:[self findScrollView]];

UIScrollView *scrollView = [self findScrollView];

if (scrollView != nil) {

[self configureScrollView:scrollView];

}

Copilot · 2026-02-23T14:45:03Z

src/experimental/index.ts

 export { default as Split } from '../components/gamma/split';
 export { default as SafeAreaView } from '../components/safe-area/SafeAreaView';
+
+export { ScrollViewMarker } from '../components/gamma/scroll-view-marker/ScrollViewMarker';


ScrollViewMarker uses a named export while other experimental components like Stack and SafeAreaView use default exports. Consider changing this to a default export for consistency with the existing component export pattern in the experimental API.

Suggested change

export { ScrollViewMarker } from '../components/gamma/scroll-view-marker/ScrollViewMarker';

export { default as ScrollViewMarker } from '../components/gamma/scroll-view-marker/ScrollViewMarker';

kkafar added 12 commits February 20, 2026 18:20

Basic setup for ScrollViewMarker component

61ee732

Export types

32d2b41

PoC implementation on iOS

7400317

It is still to be decided how ownership model will work

Add some basic example

c410eb8

It uses `StackContainer`, but I don't see a way to test this component in full isolation right now. Can we come up with something?

Allow for passing style to ScrollViewMarkerProps

5062401

Update lockfile after adding new files

162d9eb

Add basic support for scroll edge effects

69ea950

Update example

d8fd359

Revert changes to RNSStackScreenComponentView

68e8e46

Update test

f99faa4

Fix example

e970c97

kkafar changed the title ~~[WIP] feat: add ScrollViewMarker experimental component~~ feat: add ScrollViewMarker experimental component Feb 23, 2026

kkafar added 3 commits February 23, 2026 15:24

Merge branch 'main' into @kkafar/content-scrollview-component

75a6133

Kotlinize implementation a bit

9b3ec59

Add sensible description for the test case

7d1553b

kkafar commented Feb 23, 2026

View reviewed changes

kkafar marked this pull request as ready for review February 23, 2026 14:37

kkafar requested review from Copilot, kligarski, kmichalikk and t0maboro and removed request for kligarski February 23, 2026 14:37

Copilot started reviewing on behalf of kkafar February 23, 2026 14:38 View session

Format Android

724b376

Copilot AI reviewed Feb 23, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Comments

feat: add `ScrollViewMarker` experimental component#3674

feat: add `ScrollViewMarker` experimental component#3674
kkafar wants to merge 16 commits intomainfrom
@kkafar/content-scrollview-component

kkafar commented Feb 21, 2026 •

edited

Loading

Uh oh!

kkafar left a comment

Uh oh!

kkafar Feb 23, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 23, 2026

Uh oh!

Copilot AI Feb 23, 2026

Uh oh!

Copilot AI Feb 23, 2026

Uh oh!

Copilot AI Feb 23, 2026

Uh oh!

Copilot AI Feb 23, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

	fun registerScrollView(maker: ScrollViewMarker, scrollView: ViewGroup)
	fun registerScrollView(marker: ScrollViewMarker, scrollView: ViewGroup)

-    [self configureScrollView:[self findScrollView]];
+    UIScrollView *scrollView = [self findScrollView];
+    if (scrollView != nil) {
+      [self configureScrollView:scrollView];
+    }

	export { ScrollViewMarker } from '../components/gamma/scroll-view-marker/ScrollViewMarker';
	export { default as ScrollViewMarker } from '../components/gamma/scroll-view-marker/ScrollViewMarker';

Uh oh!

Comments

Conversation

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

Uh oh!

Description

Caveats

Visual documentation

Test plan

Checklist

Uh oh!

kkafar left a comment

Choose a reason for hiding this comment

Uh oh!

kkafar Feb 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 23, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

kkafar commented Feb 21, 2026 •

edited

Loading