Installation

pnpmnpmyarnbun
pnpm dlx bna-ui add parallax-scrollview
Copy

Usage

Copyimport { ParallaxScrollView } from '@/components/ui/parallax-scrollview';
import { Image } from 'expo-image';

Copy<ParallaxScrollView
  headerHeight={300}
  headerImage={
    <Image
      source={{ uri: 'https://example.com/header-image.jpg' }}
      style={{ width: '100%', height: '100%' }}
      contentFit='cover'
    />
  }
>
  <Text>Your scrollable content goes here...</Text>
</ParallaxScrollView>

Examples

API Reference

ParallaxScrollView

The main component that provides parallax scrolling functionality.

Animation Behavior

The ParallaxScrollView component provides smooth parallax animations:

• Transform: Header moves at different speeds during scroll
• Scale: Header scales up when pulled down (over-scroll)
• Performance: Uses native driver for 60fps animations
• Responsive: Adapts to different screen sizes and orientations

Scroll Effects

• Pull Down: Header scales up to 2x when over-scrolling
• Scroll Up: Header translates upward at 0.5x scroll speed
• Scale Down: Header maintains aspect ratio during transformations

Accessibility

The ParallaxScrollView component follows accessibility best practices:

• Maintains scroll accessibility for screen readers
• Preserves focus management during animations
• Supports reduced motion preferences
• Compatible with VoiceOver and TalkBack

Performance Tips

• Use optimized images with appropriate resolutions
• Consider lazy loading for heavy content
• Use scrollEventThrottle={16} for smooth animations
• Implement proper image caching strategies

Common Use Cases

• Profile screens with hero images
• Article headers with featured images
• Product detail pages
• Landing pages with hero sections
• Photo gallery headers
• Settings pages with branded headers