ThemeScroller

A themed ScrollView component that provides consistent styling and behavior with automatic light/dark mode support.

Import

import ThemeScroller, { AnimatedScrollView } from '@/components/ThemeScroller';

Features

Automatic light/dark mode adaptation
Hidden vertical scroll indicator
Built-in bottom spacing
Optional header space for fixed headers
Support for animated scrolling events
Customizable via Tailwind classes

Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	Required	Content to display
`className`	`string`	`''`	Additional Tailwind classes
`onScroll`	`Function`	—	Scroll event handler
`contentContainerStyle`	`any`	—	Styles for content container
`scrollEventThrottle`	`number`	`16`	Scroll event throttle rate
`headerSpace`	`boolean`	`false`	Add space for fixed header
`...props`	`ScrollViewProps`	—	Additional ScrollView props

Basic Usage

// Basic usage
<ThemeScroller>
  <ThemedText>Scrollable content here</ThemedText>
  {/* More content */}
</ThemeScroller>
 
// With header space and custom className
<ThemeScroller 
  headerSpace 
  className="pb-4"
>
  <ThemedText className="text-lg mb-4">
    Content with space for a fixed header
  </ThemedText>
  {/* More content */}
</ThemeScroller>
 
// With scroll event handling
<ThemeScroller
  onScroll={handleScroll}
  scrollEventThrottle={8}
  contentContainerStyle={{ paddingBottom: 40 }}
>
  <ThemedText>Scroll-tracked content</ThemedText>
  {/* More content */}
</ThemeScroller>
 
// Using the AnimatedScrollView
<AnimatedScrollView
  onScroll={Animated.event(
    [{ nativeEvent: { contentOffset: { y: scrollY } } }],
    { useNativeDriver: true }
  )}
  className="bg-light-primary dark:bg-dark-primary"
>
  <ThemedText>Content for animated scrolling effects</ThemedText>
  {/* More content */}
</AnimatedScrollView>

ThemeScroller

ThemeScroller

Import

Features

Props

Basic Usage

On this page