Scroll

Scroll provides versatile vertical and horizontal scrolling components with built-in theme integration, and flexible styling options. It supports both regular and animated variants (VScroll, HScroll, AnimatedVScroll, AnimatedHScroll) with customizable animations and scroll behavior.

Import

import { VScroll, HScroll, AnimatedVScroll, AnimatedHScroll } from 'rnc-theme';

Basic Usage

Vertical Scroll

<VScroll padding="lg" backgroundColor="surface">
  <Text>Content that scrolls vertically</Text>
  <Text>More content...</Text>
  <Text>Even more content...</Text>
</VScroll>

Horizontal Scroll

<HScroll padding="md" showsHorizontalScrollIndicator={false}>
  <View style={{ width: 200, height: 100 }}>
    <Text>Item 1</Text>
  </View>
  <View style={{ width: 200, height: 100 }}>
    <Text>Item 2</Text>
  </View>
  <View style={{ width: 200, height: 100 }}>
    <Text>Item 3</Text>
  </View>
</HScroll>

Animated Vertical Scroll

import { useSharedValue, useAnimatedScrollHandler } from 'react-native-reanimated';

const MyComponent = () => {
  const scrollY = useSharedValue(0);

  const scrollHandler = useAnimatedScrollHandler({
    onScroll: (event) => {
      scrollY.value = event.contentOffset.y;
    },
  });

  return (
    <AnimatedVScroll
      padding="lg"
      backgroundColor="surface"
      onScroll={scrollHandler}
      scrollEventThrottle={16}
    >
      <Text>Animated scroll content</Text>
      <Text>More content...</Text>
    </AnimatedVScroll>
  );
};

Animated Horizontal Scroll

import { useSharedValue, useAnimatedScrollHandler } from 'react-native-reanimated';

const MyComponent = () => {
  const scrollX = useSharedValue(0);

  const scrollHandler = useAnimatedScrollHandler({
    onScroll: (event) => {
      scrollX.value = event.contentOffset.x;
    },
  });

  return (
    <AnimatedHScroll
      padding="md"
      onScroll={scrollHandler}
      showsHorizontalScrollIndicator={false}
    >
      <View style={{ width: 200, height: 100 }}>
        <Text>Animated Item 1</Text>
      </View>
      <View style={{ width: 200, height: 100 }}>
        <Text>Animated Item 2</Text>
      </View>
    </AnimatedHScroll>
  );
};

Themed Scroll

<VScroll
  themed={true}
  borderRadius="lg"
  padding="xl"
  margin="md"
>
  <Text>Themed scroll view with background</Text>
</VScroll>

Props

ScrollProps (VScroll, HScroll, AnimatedVScroll & AnimatedHScroll)

Prop	Type	Default	Description
children	React.ReactNode	-	Content to be scrolled
padding	keyof Theme['spacing']	-	Internal padding using theme spacing
margin	keyof Theme['spacing']	-	External margin using theme spacing
backgroundColor	keyof Theme['colors']	-	Background color from theme
borderRadius	keyof Theme['components']['borderRadius']	-	Border radius from theme
themed	boolean	false	Apply theme background color
...props	ScrollViewProps	-	All React Native ScrollView props

Component Variants

Component	Description	Use Case
VScroll	Vertical scrolling container	Lists, articles, forms
HScroll	Horizontal scrolling container	Carousels, tabs, galleries
AnimatedVScroll	Animated vertical scrolling with Reanimated	Complex animations, parallax effects
AnimatedHScroll	Animated horizontal scrolling with Reanimated	Interactive carousels, gesture-driven UI

Examples

Content Lists

const NewsArticles = ({ articles }) => {
  return (
    <VScroll
      padding="lg"
      backgroundColor="background"
      themed={true}
      showsVerticalScrollIndicator={false}
    >
      {articles.map((article, index) => (
        <Card key={index} margin="sm">
          <Text style={{ fontSize: 18, fontWeight: 'bold' }}>
            {article.title}
          </Text>
          <Text style={{ marginTop: 8 }}>
            {article.excerpt}
          </Text>
        </Card>
      ))}
    </VScroll>
  );
};

Horizontal Galleries

const ImageGallery = ({ images }) => {
  return (
    <HScroll
      padding="md"
      showsHorizontalScrollIndicator={false}
      contentContainerStyle={{ paddingHorizontal: 16 }}
    >
      {images.map((image, index) => (
        <View
          key={index}
          style={{
            width: 250,
            height: 150,
            marginRight: 12,
            borderRadius: 8,
            overflow: 'hidden'
          }}
        >
          <Image source={{ uri: image.url }} style={{ flex: 1 }} />
        </View>
      ))}
    </HScroll>
  );
};

Animated Parallax Header

import { useSharedValue, useAnimatedScrollHandler, useAnimatedStyle, interpolate } from 'react-native-reanimated';

const ParallaxHeader = ({ data }) => {
  const scrollY = useSharedValue(0);
  const HEADER_HEIGHT = 200;

  const scrollHandler = useAnimatedScrollHandler({
    onScroll: (event) => {
      scrollY.value = event.contentOffset.y;
    },
  });

  const headerAnimatedStyle = useAnimatedStyle(() => {
    const translateY = interpolate(
      scrollY.value,
      [0, HEADER_HEIGHT],
      [0, -HEADER_HEIGHT / 2],
      'clamp'
    );

    const opacity = interpolate(
      scrollY.value,
      [0, HEADER_HEIGHT],
      [1, 0],
      'clamp'
    );

    return {
      transform: [{ translateY }],
      opacity,
    };
  });

  return (
    <View style={{ flex: 1 }}>
      <Animated.View
        style={[
          {
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            height: HEADER_HEIGHT,
            backgroundColor: '#007AFF',
            zIndex: 1,
          },
          headerAnimatedStyle,
        ]}
      >
        <Text style={{ color: 'white', fontSize: 24, padding: 20 }}>
          Parallax Header
        </Text>
      </Animated.View>

      <AnimatedVScroll
        onScroll={scrollHandler}
        scrollEventThrottle={16}
        contentContainerStyle={{ paddingTop: HEADER_HEIGHT }}
      >
        {data.map((item, index) => (
          <View key={index} style={{ padding: 20, backgroundColor: 'white' }}>
            <Text style={{ fontSize: 18 }}>{item.title}</Text>
            <Text style={{ marginTop: 8, color: '#666' }}>
              {item.description}
            </Text>
          </View>
        ))}
      </AnimatedVScroll>
    </View>
  );
};

Animated Horizontal Carousel

import { useSharedValue, useAnimatedScrollHandler, useAnimatedStyle, interpolate } from 'react-native-reanimated';

const AnimatedCarousel = ({ items }) => {
  const scrollX = useSharedValue(0);
  const ITEM_WIDTH = 300;
  const ITEM_SPACING = 20;

  const scrollHandler = useAnimatedScrollHandler({
    onScroll: (event) => {
      scrollX.value = event.contentOffset.x;
    },
  });

  const CarouselItem = ({ item, index }) => {
    const animatedStyle = useAnimatedStyle(() => {
      const inputRange = [
        (index - 1) * (ITEM_WIDTH + ITEM_SPACING),
        index * (ITEM_WIDTH + ITEM_SPACING),
        (index + 1) * (ITEM_WIDTH + ITEM_SPACING),
      ];

      const scale = interpolate(
        scrollX.value,
        inputRange,
        [0.8, 1, 0.8],
        'clamp'
      );

      const opacity = interpolate(
        scrollX.value,
        inputRange,
        [0.6, 1, 0.6],
        'clamp'
      );

      return {
        transform: [{ scale }],
        opacity,
      };
    });

    return (
      <Animated.View
        style={[
          {
            width: ITEM_WIDTH,
            height: 200,
            marginHorizontal: ITEM_SPACING / 2,
            backgroundColor: '#f0f0f0',
            borderRadius: 12,
            padding: 20,
            justifyContent: 'center',
            alignItems: 'center',
          },
          animatedStyle,
        ]}
      >
        <Text style={{ fontSize: 18, fontWeight: 'bold' }}>
          {item.title}
        </Text>
        <Text style={{ marginTop: 8, textAlign: 'center' }}>
          {item.description}
        </Text>
      </Animated.View>
    );
  };

  return (
    <AnimatedHScroll
      onScroll={scrollHandler}
      scrollEventThrottle={16}
      showsHorizontalScrollIndicator={false}
      contentContainerStyle={{ paddingHorizontal: ITEM_SPACING }}
      snapToInterval={ITEM_WIDTH + ITEM_SPACING}
      decelerationRate="fast"
    >
      {items.map((item, index) => (
        <CarouselItem key={index} item={item} index={index} />
      ))}
    </AnimatedHScroll>
  );
};

Animated Pull-to-Refresh

import { useSharedValue, useAnimatedScrollHandler, useAnimatedStyle, interpolate, runOnJS } from 'react-native-reanimated';

const AnimatedPullToRefresh = ({ data, onRefresh }) => {
  const scrollY = useSharedValue(0);
  const [refreshing, setRefreshing] = useState(false);
  const REFRESH_THRESHOLD = 100;

  const scrollHandler = useAnimatedScrollHandler({
    onScroll: (event) => {
      scrollY.value = event.contentOffset.y;
    },
    onEndDrag: (event) => {
      if (event.contentOffset.y < -REFRESH_THRESHOLD && !refreshing) {
        runOnJS(handleRefresh)();
      }
    },
  });

  const handleRefresh = async () => {
    setRefreshing(true);
    await onRefresh();
    setRefreshing(false);
  };

  const refreshIndicatorStyle = useAnimatedStyle(() => {
    const opacity = interpolate(
      scrollY.value,
      [-REFRESH_THRESHOLD, 0],
      [1, 0],
      'clamp'
    );

    const scale = interpolate(
      scrollY.value,
      [-REFRESH_THRESHOLD, 0],
      [1, 0.5],
      'clamp'
    );

    return {
      opacity,
      transform: [{ scale }],
    };
  });

  return (
    <View style={{ flex: 1 }}>
      <Animated.View
        style={[
          {
            position: 'absolute',
            top: 50,
            left: 0,
            right: 0,
            height: 50,
            justifyContent: 'center',
            alignItems: 'center',
            zIndex: 1,
          },
          refreshIndicatorStyle,
        ]}
      >
        <Text style={{ color: '#007AFF', fontSize: 16 }}>
          {refreshing ? 'Refreshing...' : 'Pull to refresh'}
        </Text>
      </Animated.View>

      <AnimatedVScroll
        onScroll={scrollHandler}
        scrollEventThrottle={16}
        bounces={true}
        contentContainerStyle={{ paddingTop: 20 }}
      >
        {data.map((item, index) => (
          <View key={index} style={{ padding: 16, borderBottomWidth: 1 }}>
            <Text style={{ fontSize: 16 }}>{item.title}</Text>
            <Text style={{ color: '#666', marginTop: 4 }}>
              {item.description}
            </Text>
          </View>
        ))}
      </AnimatedVScroll>
    </View>
  );
};

Form with Scrollable Fields

const LongForm = () => {
  const [formData, setFormData] = useState({});

  return (
    <VScroll
      padding="lg"
      backgroundColor="surface"
      themed={true}
      borderRadius="md"
      margin="md"
      keyboardShouldPersistTaps="handled"
    >
      <Text style={{ fontSize: 24, fontWeight: 'bold', marginBottom: 20 }}>
        Registration Form
      </Text>

      <TextInput
        placeholder="Full Name"
        style={{ marginBottom: 16 }}
        onChangeText={(text) => setFormData({ ...formData, name: text })}
      />

      <TextInput
        placeholder="Email"
        keyboardType="email-address"
        style={{ marginBottom: 16 }}
        onChangeText={(text) => setFormData({ ...formData, email: text })}
      />

      <TextInput
        placeholder="Phone Number"
        keyboardType="phone-pad"
        style={{ marginBottom: 16 }}
        onChangeText={(text) => setFormData({ ...formData, phone: text })}
      />

      <TextInput
        placeholder="Address"
        multiline
        numberOfLines={4}
        style={{ marginBottom: 16 }}
        onChangeText={(text) => setFormData({ ...formData, address: text })}
      />

      <TextInput
        placeholder="Bio"
        multiline
        numberOfLines={6}
        style={{ marginBottom: 20 }}
        onChangeText={(text) => setFormData({ ...formData, bio: text })}
      />

      <Button onPress={() => console.log('Form submitted:', formData)}>
        <ButtonText>Submit Registration</ButtonText>
      </Button>

      {/* Extra spacing for keyboard */}
      <View style={{ height: 100 }} />
    </VScroll>
  );
};

Tab-like Horizontal Scroll

const CategoryTabs = ({ categories, activeCategory, onCategoryChange }) => {
  return (
    <HScroll
      padding="sm"
      backgroundColor="surface"
      themed={true}
      showsHorizontalScrollIndicator={false}
      contentContainerStyle={{ paddingHorizontal: 16 }}
    >
      {categories.map((category, index) => (
        <TouchableOpacity
          key={index}
          onPress={() => onCategoryChange(category)}
          style={{
            paddingHorizontal: 20,
            paddingVertical: 10,
            marginRight: 12,
            borderRadius: 20,
            backgroundColor: activeCategory === category ? '#007AFF' : '#f0f0f0'
          }}
        >
          <Text
            style={{
              color: activeCategory === category ? 'white' : 'black',
              fontWeight: activeCategory === category ? 'bold' : 'normal'
            }}
          >
            {category}
          </Text>
        </TouchableOpacity>
      ))}
    </HScroll>
  );
};

Advanced Usage

Pull to Refresh

const RefreshableList = ({ data, onRefresh }) => {
  const [refreshing, setRefreshing] = useState(false);

  const handleRefresh = async () => {
    setRefreshing(true);
    await onRefresh();
    setRefreshing(false);
  };

  return (
    <VScroll
      refreshControl={
        <RefreshControl
          refreshing={refreshing}
          onRefresh={handleRefresh}
          colors={['#007AFF']}
        />
      }
      padding="md"
    >
      {data.map((item, index) => (
        <View key={index} style={{ padding: 16, borderBottomWidth: 1 }}>
          <Text>{item.title}</Text>
          <Text style={{ color: '#666', marginTop: 4 }}>
            {item.description}
          </Text>
        </View>
      ))}
    </VScroll>
  );
};

Infinite Scroll

const InfiniteScrollList = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);

  const loadMore = async () => {
    if (loading || !hasMore) return;

    setLoading(true);
    try {
      const newData = await fetchMoreData(data.length);
      setData(prev => [...prev, ...newData]);
      setHasMore(newData.length > 0);
    } finally {
      setLoading(false);
    }
  };

  const handleScroll = (event) => {
    const { layoutMeasurement, contentOffset, contentSize } = event.nativeEvent;
    const isNearBottom = layoutMeasurement.height + contentOffset.y >= contentSize.height - 100;

    if (isNearBottom) {
      loadMore();
    }
  };

  return (
    <VScroll
      onScroll={handleScroll}
      scrollEventThrottle={400}
      padding="md"
    >
      {data.map((item, index) => (
        <View key={index} style={{ padding: 16, borderBottomWidth: 1 }}>
          <Text>{item.title}</Text>
        </View>
      ))}

      {loading && (
        <View style={{ padding: 20, alignItems: 'center' }}>
          <ActivityIndicator size="large" color="#007AFF" />
          <Text style={{ marginTop: 8 }}>Loading more...</Text>
        </View>
      )}

      {!hasMore && data.length > 0 && (
        <View style={{ padding: 20, alignItems: 'center' }}>
          <Text style={{ color: '#666' }}>No more items to load</Text>
        </View>
      )}
    </VScroll>
  );
};

Nested Scrolling

const NestedScrollExample = () => {
  return (
    <VScroll padding="lg" backgroundColor="background" themed={true}>
      <Text style={{ fontSize: 24, fontWeight: 'bold', marginBottom: 16 }}>
        Categories
      </Text>

      {/* Horizontal scroll inside vertical scroll */}
      <Text style={{ fontSize: 18, marginBottom: 12 }}>
        Featured Products
      </Text>
      <HScroll
        style={{ marginBottom: 24 }}
        showsHorizontalScrollIndicator={false}
      >
        {Array.from({ length: 10 }, (_, i) => (
          <View
            key={i}
            style={{
              width: 150,
              height: 100,
              backgroundColor: '#f0f0f0',
              marginRight: 12,
              borderRadius: 8,
              justifyContent: 'center',
              alignItems: 'center'
            }}
          >
            <Text>Product {i + 1}</Text>
          </View>
        ))}
      </HScroll>

      <Text style={{ fontSize: 18, marginBottom: 12 }}>
        All Products
      </Text>
      {Array.from({ length: 20 }, (_, i) => (
        <View
          key={i}
          style={{
            padding: 16,
            backgroundColor: 'white',
            marginBottom: 8,
            borderRadius: 8
          }}
        >
          <Text>Product {i + 1}</Text>
          <Text style={{ color: '#666', marginTop: 4 }}>
            Product description here
          </Text>
        </View>
      ))}
    </VScroll>
  );
};

Animated Scroll Patterns

Parallax Background

import { useSharedValue, useAnimatedScrollHandler, useAnimatedStyle, interpolate } from 'react-native-reanimated';

const ParallaxBackground = () => {
  const scrollY = useSharedValue(0);

  const scrollHandler = useAnimatedScrollHandler({
    onScroll: (event) => {
      scrollY.value = event.contentOffset.y;
    },
  });

  const backgroundStyle = useAnimatedStyle(() => {
    const translateY = interpolate(
      scrollY.value,
      [0, 300],
      [0, 150],
      'clamp'
    );

    return {
      transform: [{ translateY }],
    };
  });

  return (
    <View style={{ flex: 1 }}>
      <Animated.View
        style={[
          {
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            height: 300,
            backgroundColor: '#007AFF',
          },
          backgroundStyle,
        ]}
      />

      <AnimatedVScroll
        onScroll={scrollHandler}
        scrollEventThrottle={16}
        contentContainerStyle={{ paddingTop: 200 }}
      >
        {/* Content */}
      </AnimatedVScroll>
    </View>
  );
};

Sticky Header with Animation

const StickyAnimatedHeader = () => {
  const scrollY = useSharedValue(0);
  const HEADER_HEIGHT = 100;

  const scrollHandler = useAnimatedScrollHandler({
    onScroll: (event) => {
      scrollY.value = event.contentOffset.y;
    },
  });

  const headerStyle = useAnimatedStyle(() => {
    const opacity = interpolate(
      scrollY.value,
      [0, HEADER_HEIGHT],
      [0, 1],
      'clamp'
    );

    return {
      opacity,
    };
  });

  return (
    <View style={{ flex: 1 }}>
      <Animated.View
        style={[
          {
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            height: HEADER_HEIGHT,
            backgroundColor: 'white',
            zIndex: 1,
            justifyContent: 'center',
            alignItems: 'center',
          },
          headerStyle,
        ]}
      >
        <Text style={{ fontSize: 18, fontWeight: 'bold' }}>
          Sticky Header
        </Text>
      </Animated.View>

      <AnimatedVScroll
        onScroll={scrollHandler}
        scrollEventThrottle={16}
        contentContainerStyle={{ paddingTop: HEADER_HEIGHT }}
      >
        {/* Content */}
      </AnimatedVScroll>
    </View>
  );
};

Scale on Scroll

const ScaleOnScroll = () => {
  const scrollX = useSharedValue(0);
  const ITEM_WIDTH = 200;

  const scrollHandler = useAnimatedScrollHandler({
    onScroll: (event) => {
      scrollX.value = event.contentOffset.x;
    },
  });

  const AnimatedItem = ({ index, children }) => {
    const animatedStyle = useAnimatedStyle(() => {
      const inputRange = [
        (index - 1) * ITEM_WIDTH,
        index * ITEM_WIDTH,
        (index + 1) * ITEM_WIDTH,
      ];

      const scale = interpolate(
        scrollX.value,
        inputRange,
        [0.7, 1, 0.7],
        'clamp'
      );

      return {
        transform: [{ scale }],
      };
    });

    return (
      <Animated.View style={[{ width: ITEM_WIDTH }, animatedStyle]}>
        {children}
      </Animated.View>
    );
  };

  return (
    <AnimatedHScroll
      onScroll={scrollHandler}
      scrollEventThrottle={16}
      showsHorizontalScrollIndicator={false}
    >
      {items.map((item, index) => (
        <AnimatedItem key={index} index={index}>
          <View style={{ height: 150, backgroundColor: '#f0f0f0' }}>
            <Text>{item.title}</Text>
          </View>
        </AnimatedItem>
      ))}
    </AnimatedHScroll>
  );
};

Best Practices

Performance

• Use scrollEventThrottle to limit scroll event frequency (default is 16ms)
• Implement virtualization for large lists using FlatList or SectionList when appropriate
• Avoid complex calculations in scroll handlers
• Use useAnimatedScrollHandler for better performance in animated scenarios

User Experience

• Provide clear visual feedback for scroll interactions
• Use appropriate scroll indicators for content overflow
• Consider accessibility with proper content descriptions
• Test animated interactions on different devices for performance

Theming

• Leverage theme spacing and colors for consistent design
• Use themed prop to automatically apply background colors
• Combine with other themed components for cohesive UI

Animation Performance

• Use runOnUI for complex calculations in animated scroll handlers
• Prefer useAnimatedScrollHandler over regular onScroll for animations
• Keep animated operations lightweight to maintain 60fps
• Test on lower-end devices to ensure smooth performance

Tip

For complex animations, consider using AnimatedVScroll or AnimatedHScroll with react-native-reanimated for better performance and smoother animations.

Caution

Be mindful of nested scroll views on iOS - they can cause unexpected behavior. Consider using nestedScrollEnabled prop on Android and test thoroughly on both platforms.

Caution

When using animated scroll components, avoid heavy computations in scroll handlers. Use runOnUI for UI thread operations and runOnJS for JavaScript thread operations.

Note

AnimatedVScroll and AnimatedHScroll are built on top of react-native-reanimated’s Animated.ScrollView, providing better performance for complex animations and gesture-driven interactions.

Migration Guide

From Regular to Animated Components

If you’re migrating from regular scroll components to animated ones:

// Before
<VScroll onScroll={handleScroll}>
  {content}
</VScroll>

// After
import { useAnimatedScrollHandler } from 'react-native-reanimated';

const scrollHandler = useAnimatedScrollHandler({
  onScroll: (event) => {
    // Handle scroll with better performance
    scrollY.value = event.contentOffset.y;
  },
});

<AnimatedVScroll onScroll={scrollHandler}>
  {content}
</AnimatedVScroll>

Adding Reanimated Dependencies

Make sure you have the required dependencies:

npm install react-native-reanimated
# or
yarn add react-native-reanimated

For iOS, you’ll also need to run:

cd ios && pod install

Common Patterns

Animated Header with Search Bar

const AnimatedSearchHeader = () => {
  const scrollY = useSharedValue(0);
  const [searchQuery, setSearchQuery] = useState('');

  const scrollHandler = useAnimatedScrollHandler({
    onScroll: (event) => {
      scrollY.value = event.contentOffset.y;
    },
  });

  const headerStyle = useAnimatedStyle(() => {
    const height = interpolate(
      scrollY.value,
      [0, 100],
      [120, 80],
      'clamp'
    );

    return {
      height,
    };
  });

  const searchBarStyle = useAnimatedStyle(() => {
    const opacity = interpolate(
      scrollY.value,
      [0, 50],
      [1, 0],
      'clamp'
    );

    return {
      opacity,
    };
  });

  return (
    <View style={{ flex: 1 }}>
      <Animated.View
        style={[
          {
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            backgroundColor: 'white',
            zIndex: 1,
            paddingTop: 50,
            paddingHorizontal: 16,
          },
          headerStyle,
        ]}
      >
        <Text style={{ fontSize: 24, fontWeight: 'bold', marginBottom: 8 }}>
          My App
        </Text>
        <Animated.View style={searchBarStyle}>
          <TextInput
            placeholder="Search..."
            value={searchQuery}
            onChangeText={setSearchQuery}
            style={{
              backgroundColor: '#f0f0f0',
              borderRadius: 8,
              paddingHorizontal: 12,
              paddingVertical: 8,
            }}
          />
        </Animated.View>
      </Animated.View>

      <AnimatedVScroll
        onScroll={scrollHandler}
        scrollEventThrottle={16}
        contentContainerStyle={{ paddingTop: 120 }}
      >
        {/* Content */}
      </AnimatedVScroll>
    </View>
  );
};

Animated Tab Indicator

const AnimatedTabIndicator = ({ tabs, activeTab, onTabChange }) => {
  const scrollX = useSharedValue(0);
  const TAB_WIDTH = 100;

  const scrollHandler = useAnimatedScrollHandler({
    onScroll: (event) => {
      scrollX.value = event.contentOffset.x;
    },
  });

  const indicatorStyle = useAnimatedStyle(() => {
    const translateX = interpolate(
      scrollX.value,
      tabs.map((_, index) => index * TAB_WIDTH),
      tabs.map((_, index) => index * TAB_WIDTH),
      'clamp'
    );

    return {
      transform: [{ translateX }],
    };
  });

  return (
    <View>
      <View style={{ flexDirection: 'row', backgroundColor: '#f0f0f0' }}>
        {tabs.map((tab, index) => (
          <TouchableOpacity
            key={index}
            onPress={() => onTabChange(index)}
            style={{
              width: TAB_WIDTH,
              padding: 16,
              alignItems: 'center',
            }}
          >
            <Text style={{ fontWeight: activeTab === index ? 'bold' : 'normal' }}>
              {tab.title}
            </Text>
          </TouchableOpacity>
        ))}
        <Animated.View
          style={[
            {
              position: 'absolute',
              bottom: 0,
              height: 3,
              width: TAB_WIDTH,
              backgroundColor: '#007AFF',
            },
            indicatorStyle,
          ]}
        />
      </View>

      <AnimatedHScroll
        onScroll={scrollHandler}
        scrollEventThrottle={16}
        showsHorizontalScrollIndicator={false}
        pagingEnabled
      >
        {tabs.map((tab, index) => (
          <View key={index} style={{ width: TAB_WIDTH }}>
            {tab.content}
          </View>
        ))}
      </AnimatedHScroll>
    </View>
  );
};

TypeScript Support

The components are fully typed and support TypeScript:

import { ScrollProps } from 'rnc-theme';

interface CustomScrollProps extends ScrollProps {
  customProp?: string;
}

const CustomScroll: React.FC<CustomScrollProps> = ({ customProp, ...props }) => {
  return <VScroll {...props} />;
};

Troubleshooting

Common Issues

1. Performance Problems: Use scrollEventThrottle to limit scroll event frequency
2. Animation Jank: Avoid heavy computations in scroll handlers
3. Nested Scroll Issues: Test on both iOS and Android, use nestedScrollEnabled when needed
4. Memory Leaks: Properly clean up animated values and listeners

Debug Tips

// Add logging to scroll handlers
const scrollHandler = useAnimatedScrollHandler({
  onScroll: (event) => {
    console.log('Scroll Y:', event.contentOffset.y);
    scrollY.value = event.contentOffset.y;
  },
});

// Monitor performance
import { enableScreens } from 'react-native-screens';
enableScreens();