React Native tier

RnScrollView

A React Native scroll view with the `sx` props.

iOSReact Native ScrollViewAndroidReact Native ScrollViewReact Native tier — renders anywhere

RnScrollView on iOS — iOSReact Native ScrollView

RnScrollView on Android — AndroidReact Native ScrollView

Import

import {RnScrollView} from '@hzblj/kara-ui'

Props

React Native tier scroll container — the sibling of RnView/RnText. Use it when the subtree is React Native and native atoms are embedded through Island. For a screen that is native all the way down, reach for the ScrollView atom instead.

Also takes the React Native `sx` props, React Native’s RNScrollViewProps without 'contentContainerStyle' | 'horizontal' | 'style'.

Prop	Type	Default	Description
axis	'horizontal' \| 'vertical'	'vertical'	The scroll direction. `vertical` by default.
children	ReactNode	—	The scrolling content.
content	ResponsiveViewSx	—	Styles the scrolling content container — padding and gap belong here.
showsIndicators	boolean	true	Shows the scroll indicators. On by default.

axis'vertical'

'horizontal' | 'vertical'

The scroll direction. vertical by default.

children

ReactNode

The scrolling content.

content

ResponsiveViewSx

Styles the scrolling content container — padding and gap belong here.

showsIndicatorstrue

boolean

Shows the scroll indicators. On by default.

Platform notes

The scroll view a page full of Islands wants. Top-level sx styles the viewport, content the scrolling content — padding and gap belong there.