ScrollView Stable WINMACLNX

A container that enables scrolling for its children.

Import

import { ScrollView } from 'veloxkit'

Basic usage

<ScrollView style={{ flex: 1 }}>
  {items.map(item => (
    <View key={item.id} style={{ padding: 16, borderBottomWidth: 1, borderBottomColor: '#2A2A3A' }}>
      <Text>{item.title}</Text>
    </View>
  ))}
</ScrollView>

Props

Prop	Type	Default	Description
`horizontal`	`boolean`	`false`	Horizontal scroll direction
`showsScrollIndicator`	`boolean`	`true`	Show scrollbar
`onScroll`	`(e: ScrollEvent) => void`	—	Scroll position callback
`scrollEventThrottle`	`number`	`16`	ms between scroll events
`onScrollBeginDrag`	`() => void`	—	—
`onScrollEndDrag`	`() => void`	—	—
`onMomentumScrollEnd`	`() => void`	—	—
`contentContainerStyle`	`ViewStyle`	—	Styles for inner content container
`keyboardDismissMode`	`'none' \| 'on-drag'`	`'none'`	Dismiss keyboard on scroll
`bounces`	`boolean`	`true` (macOS)	Rubber-band bounce at edges
`style`	`ViewStyle`	—	Outer container style

Scroll to position

const scrollRef = useRef<ScrollViewRef>(null)
 
<ScrollView ref={scrollRef}>
  {/* content */}
</ScrollView>
 
// Scroll programmatically
scrollRef.current?.scrollTo({ y: 0, animated: true })
scrollRef.current?.scrollToEnd({ animated: true })

Performance note

For large lists (100+ items), prefer VirtualizedList over ScrollView. ScrollView renders all children at once.

TextInput Image