React NativeSurfaces

Scroll Area

Custom scrollbar with optional chrome container. Import from @intelli/ui-native. Use onPress and style instead of DOM events and className.

Web version

Installnpx @intellihelper/cli@latest add @native/scroll-area

Usage

From an Expo or React Native app, wrap the tree in ThemeProvider.

import { ThemeProvider } from "@/components/ui/native/theme";
import { ScrollArea } from "@/components/ui/native/scroll-area";

export function Example() {
  return (
    <ThemeProvider theme="mono" followSystem>
      <ScrollArea>Scroll Area</ScrollArea>
    </ThemeProvider>
  );
}

Platform notes

This component is implemented in packages/ui-native. Preview it on a device with pnpm native from the monorepo (Expo Go).

Optional peers: expo-blur for real frost, react-native-safe-area-context for sheet/dialog insets.

Source: ui-native components on GitHub

9:41

Row 1

Row 2

Row 3

Row 4

Row 5

Row 6

Row 7

Row 8

Row 9

Row 10

Row 11

Row 12

iPhone preview — same APIs as @intelli/ui-native