React Native tier

RnFlatList

React Native lists for rows that host native views.

iOSReact Native FlatListAndroidReact Native FlatListReact Native tier — renders anywhere

RnFlatList on iOS — iOSReact Native FlatList

RnFlatList on Android — AndroidReact Native FlatList

Import

import {RnFlatList, RnSectionList} from '@hzblj/kara-ui'

Props

Top-level sx styles the viewport; content styles the scrolling content container, so padding and gap belong there — the same split as RnScrollView. removeClippedSubviews is off unless you turn it on: Android's default would detach a row's host before it has measured itself, and the row would stay empty.

Also takes the React Native `sx` props, Omit<RNFlatListProps<TItem>, 'contentContainerStyle' | 'style'>.

Prop	Type	Description
content	ResponsiveViewSx	Styles the scrolling content container — padding and gap belong here.

content

ResponsiveViewSx

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

RnSectionList

Top-level sx styles the viewport; content styles the scrolling content container, so padding and gap belong there — the same split as RnScrollView and RnFlatList. removeClippedSubviews is off unless you turn it on, as in RnFlatList: Android's default would leave rows with hosts in them empty.

Also takes the React Native `sx` props, Omit<RNSectionListProps<TItem, TSection>, 'contentContainerStyle' | 'style'>.

Prop	Type	Description
content	ResponsiveViewSx	Styles the scrolling content container — padding and gap belong here.

content

ResponsiveViewSx

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

Platform notes

The list to reach for when rows host native views: cells stay in normal flow, so a hosted view stays where the layout put it.
RnSectionList is the sectioned sibling. Its sticky headers are off by default.