### React Native AnimatedScrollView Messaging Screen Example

Source: https://context7.com/ekosh02/react-native-animated-header-scroll-view/llms.txt

A practical example demonstrating the usage of `AnimatedScrollView` from '@ekosh02/react-native-animated-header-scroll-view' to create a messaging screen with animated header transitions. It defines `topHeaderComponent` and `scrolledHeaderComponent` for different scroll states and includes a `contentComponent` with messages. The example utilizes `StyleSheet` from 'react-native' for styling.

```tsx
import { AnimatedScrollView } from '@ekosh02/react-native-animated-header-scroll-view';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';

const MessagingScreen = () => {
  const handleBackPress = () => {
    console.log('Navigate back');
  };

  const handleOptionsPress = () => {
    console.log('Show options');
  };

  return (
    <AnimatedScrollView
      topHeaderComponent={
        <View style={styles.expandedHeader}>
          <TouchableOpacity onPress={handleBackPress} style={styles.backButton}>
            <Text style={styles.buttonText}>←</Text>
          </TouchableOpacity>
          <View style={styles.headerCenter}>
            <Text style={styles.expandedTitle}>Conversation</Text>
            <Text style={styles.subtitle}>Online</Text>
          </View>
          <TouchableOpacity onPress={handleOptionsPress} style={styles.optionsButton}>
            <Text style={styles.buttonText}>⋮</Text>
          </TouchableOpacity>
        </View>
      }
      scrolledHeaderComponent={
        <View style={styles.compactHeader}>
          <TouchableOpacity onPress={handleBackPress} style={styles.compactBackButton}>
            <Text style={styles.buttonText}>←</Text>
          </TouchableOpacity>
          <Text style={styles.compactTitle}>Conversation</Text>
          <TouchableOpacity onPress={handleOptionsPress} style={styles.compactOptionsButton}>
            <Text style={styles.buttonText}>⋮</Text>
          </TouchableOpacity>
        </View>
      }
      contentComponent={
        <View style={styles.profileSection}>
          <View style={styles.avatar} />
          <Text style={styles.name}>Sarah Johnson</Text>
          <Text style={styles.status}>Active now</Text>
        </View>
      }
      scaleMin={0.85}
      headerBackgroundColor="#075E54"
      useSafeArea={true}
    >
      <View style={styles.messages}>
        {[1, 2, 3, 4, 5].map(i => (
          <View key={i} style={styles.messageBubble}>
            <Text style={styles.messageText}>Message {i}</Text>
            <Text style={styles.timestamp}>10:3{i} AM</Text>
          </View>
        ))}
      </View>
    </AnimatedScrollView>
  );
};

const styles = StyleSheet.create({
  expandedHeader: {
    height: 100,
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 15,
    backgroundColor: '#075E54',
  },
  backButton: {
    padding: 10,
  },
  buttonText: {
    fontSize: 24,
    color: '#ffffff',
  },
  headerCenter: {
    flex: 1,
    marginLeft: 10,
  },
  expandedTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#ffffff',
  },
  subtitle: {
    fontSize: 14,
    color: '#d0d0d0',
    marginTop: 2,
  },
  optionsButton: {
    padding: 10,
  },
  compactHeader: {
    height: 60,
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 15,
    backgroundColor: '#075E54',
  },
  compactBackButton: {
    padding: 8,
  },
  compactTitle: {
    flex: 1,
    fontSize: 18,
    fontWeight: '600',
    color: '#ffffff',
    marginLeft: 10,
  },
  compactOptionsButton: {
    padding: 8,
  },
  profileSection: {
    alignItems: 'center',
    paddingVertical: 30,
    backgroundColor: '#128C7E',
  },
  avatar: {
    width: 80,
    height: 80,
    borderRadius: 40,
    backgroundColor: '#25D366',
  },
  name: {
    fontSize: 22,
    fontWeight: 'bold',
    color: '#ffffff',
    marginTop: 15,
  },
  status: {
    fontSize: 14,
    color: '#d0d0d0',
    marginTop: 5,
  },
  messages: {
    padding: 15,
    gap: 10,
  },
  messageBubble: {
    backgroundColor: '#DCF8C6',
    padding: 12,
    borderRadius: 8,
    alignSelf: 'flex-start',
    maxWidth: '80%',
  },
  messageText: {
    fontSize: 16,
  },
  timestamp: {
    fontSize: 11,
    color: '#666666',
    marginTop: 5,
    alignSelf: 'flex-end',
  },
});
```

--------------------------------

### Adaptive Screen Example with AnimatedScrollView (TypeScript)

Source: https://context7.com/ekosh02/react-native-animated-header-scroll-view/llms.txt

Demonstrates how to use the 'useOptionalSafeAreaInsets' concept within an AdaptiveScreen component. This example utilizes the AnimatedScrollView to show how the header's behavior changes based on the 'useSafeArea' prop, controlled by a state variable.

```tsx
import { View, Text, StyleSheet } from 'react-native';
import { AnimatedScrollView } from '@ekosh02/react-native-animated-header-scroll-view';
import { useState } from 'react';

// Assume useOptionalSafeAreaInsets is defined or imported here for full context
// For this example, we directly use the logic within the component's prop

const AdaptiveScreen = () => {
  const [useSafeArea, setUseSafeArea] = useState(true);

  // Mock implementation of useOptionalSafeAreaInsets for clarity in this example
  const safeAreaInsets = useSafeArea
    ? { top: 30, bottom: 30, left: 10, right: 10 } // Example insets
    : { top: 0, bottom: 0, left: 0, right: 0 };

  return (
    <>
      <AnimatedScrollView
        topHeaderComponent={
          <View style={styles.header}>
            <Text style={styles.headerText}>
              Safe Area: {useSafeArea ? 'Enabled' : 'Disabled'}
            </Text>
          </View>
        }
        scrolledHeaderComponent={
          <View style={styles.compactHeader}>
            <Text>Compact Header</Text>
          </View>
        }
        contentComponent={
          <View style={styles.content}>
            <Text style={styles.contentText}>
              Toggle safe area to see the difference
            </Text>
            <View style={styles.button} onTouchEnd={() => setUseSafeArea(!useSafeArea)}>
              <Text>Toggle Safe Area</Text>
            </View>
          </View>
        }
        // Pass the actual safe area insets derived from the hook's logic
        // The AnimatedScrollView would internally use these for padding/margins
        // For simplicity, directly passing useSafeArea to the component prop assuming it handles it
        useSafeArea={useSafeArea} 
        // In a real scenario, you might pass safeAreaInsets to a prop if the component accepts it
        // For example: safeAreaPaddingTop={safeAreaInsets.top} etc.
      >
        <View style={styles.body}>
          <Text>
            When useSafeArea is true, the header automatically adds padding for device notches
            and status bars. When false, content extends to the screen edges.
          </Text>
        </View>
      </AnimatedScrollView>
    </>
  );
};

const styles = StyleSheet.create({
  header: {
    height: 100,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#6200ee',
  },
  headerText: {
    fontSize: 20,
    color: '#ffffff',
    fontWeight: 'bold',
  },
  compactHeader: {
    height: 60,
    justifyContent: 'center',
    paddingHorizontal: 15,
    backgroundColor: '#ffffff',
  },
  content: {
    padding: 30,
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
  contentText: {
    fontSize: 16,
    textAlign: 'center',
    marginBottom: 20,
  },
  button: {
    paddingHorizontal: 20,
    paddingVertical: 10,
    backgroundColor: '#6200ee',
    borderRadius: 5,
  },
  body: {
    padding: 20,
  },
});

export default AdaptiveScreen;

```

--------------------------------

### Install @ekosh02/react-native-animated-header-scroll-view

Source: https://github.com/ekosh02/react-native-animated-header-scroll-view/blob/main/README.md

Installs the main package using npm or yarn. This component simplifies the creation of animated headers in React Native applications.

```bash
npm install @ekosh02/react-native-animated-header-scroll-view
```

```bash
yarn add @ekosh02/react-native-animated-header-scroll-view
```

--------------------------------

### Install react-native-safe-area-context

Source: https://github.com/ekosh02/react-native-animated-header-scroll-view/blob/main/README.md

Installs the peer dependency 'react-native-safe-area-context' using npm or yarn. This library is required for handling safe area insets, ensuring compatibility with devices like iPhones.

```bash
npm install react-native-safe-area-context
```

```bash
yarn add react-native-safe-area-context
```

--------------------------------

### AnimatedScrollView Example with Custom Props

Source: https://context7.com/ekosh02/react-native-animated-header-scroll-view/llms.txt

Demonstrates the usage of AnimatedScrollView with various props to customize the appearance and behavior of the header and scrollable content. It includes examples for top and scrolled headers, content components, animation scaling, background colors, safe area usage, and standard ScrollView features like refresh controls.

```tsx
import { AnimatedScrollView } from '@ekosh02/react-native-animated-header-scroll-view';
import { AnimatedScrollViewProps } from '@ekosh02/react-native-animated-header-scroll-view/src/components/animatedScrollView/types';
import { View, Text, RefreshControl } from 'react-native';
import { useState } from 'react';

// Complete example with all prop types
const DetailScreen = () => {
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = () => {
    setRefreshing(true);
    setTimeout(() => setRefreshing(false), 2000);
  };

  const props: AnimatedScrollViewProps = {
    // Header that appears before scrolling
    topHeaderComponent: (
      <View style={{ height: 120, justifyContent: 'center', alignItems: 'center' }}>
        <Text style={{ fontSize: 28, fontWeight: 'bold' }}>Product Details</Text>
      </View>
    ),

    // Compact header after scrolling
    scrolledHeaderComponent: (
      <View style={{ height: 60, justifyContent: 'center', paddingLeft: 15 }}>
        <Text style={{ fontSize: 16, fontWeight: '600' }}>Premium Headphones</Text>
      </View>
    ),

    // Content with animation effects
    contentComponent: (
      <View style={{ padding: 20, alignItems: 'center' }}>
        <View style={{ width: 200, height: 200, backgroundColor: '#e0e0e0', borderRadius: 10 }} />
        <Text style={{ fontSize: 20, fontWeight: '600', marginTop: 15 }}>Premium Headphones</Text>
        <Text style={{ fontSize: 18, color: '#6200ee', marginTop: 5 }}>$299.99</Text>
      </View>
    ),

    // Animation control: how much to shrink (0.8 = 80% of original)
    scaleMin: 0.8,

    // Background color for sticky header
    headerBackgroundColor: '#f8f8f8',

    // Enable safe area padding for notched devices
    useSafeArea: true,

    // Standard ScrollView props
    showsVerticalScrollIndicator: false,
    bounces: true,
    refreshControl: <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />,
    contentContainerStyle: { paddingBottom: 20 },
  };

  return (
    <AnimatedScrollView {...props}>
      <View style={{ padding: 20 }}>
        <Text style={{ fontSize: 16, marginBottom: 10 }}>Description</Text>
        <Text style={{ color: '#666', lineHeight: 22 }}>
          High-quality wireless headphones with noise cancellation and 30-hour battery life.
        </Text>

        <Text style={{ fontSize: 16, marginTop: 20, marginBottom: 10 }}>Features</Text>
        {['Active Noise Cancellation', 'Bluetooth 5.0', '30-hour battery', 'Fast charging'].map(
          (feature, idx) => (
            <Text key={idx} style={{ color: '#666', marginVertical: 5 }}>
              • {feature}
            </Text>
          )
        )}
      </View>
    </AnimatedScrollView>
  );
};

export default DetailScreen;

```

--------------------------------

### Usage Example for AnimatedScrollView in React Native

Source: https://github.com/ekosh02/react-native-animated-header-scroll-view/blob/main/README.md

Demonstrates how to use the AnimatedScrollView component in a React Native application. It shows the basic structure for defining top header, scrolled header, and content components, along with children and safe area usage.

```tsx
import { AnimatedScrollView } from '@ekosh02/react-native-animated-header-scroll-view'
import { Text, View } from 'react-native'

const ExampleScreen = () => {
  return (
    <AnimatedScrollView
      topHeaderComponent={
        <View>
          <Text>Top Header</Text>
        </View>
      }
      scrolledHeaderComponent={
        <View>
          <Text>Scrolled Header</Text>
        </View>
      }
      contentComponent={
        <View>
          <Text>Animated Content</Text>
        </View>
      }
      useSafeArea={true}
    >
      <View>
        <Text>Static child content goes here</Text>
      </View>
    </AnimatedScrollView>
  )
}

export default ExampleScreen
```

--------------------------------

### AnimatedScrollView Usage in React Native

Source: https://context7.com/ekosh02/react-native-animated-header-scroll-view/llms.txt

Demonstrates how to use the AnimatedScrollView component to create a profile screen with animated headers and content. It takes topHeaderComponent, scrolledHeaderComponent, and contentComponent as props for header and content customization. The scaleMin prop controls content scaling, and useSafeArea enables safe area support.

```tsx
import { AnimatedScrollView } from '@ekosh02/react-native-animated-header-scroll-view';
import { View, Text, Image, StyleSheet, Dimensions } from 'react-native';

const ProfileScreen = () => {
  const screenWidth = Dimensions.get('window').width;
  const SCALE_MIN = 0.7;
  const imageWidth = screenWidth / SCALE_MIN;

  return (
    <AnimatedScrollView
      // Top header shown before scrolling
      topHeaderComponent={
        <View style={styles.topHeader}>
          <Text style={styles.topHeaderText}>Profile</Text>
        </View>
      }
      // Header shown after scrolling past threshold
      scrolledHeaderComponent={
        <View style={styles.scrolledHeader}>
          <Text style={styles.scrolledHeaderText}>John Doe</Text>
        </View>
      }
      // Animated content with scaling effect
      contentComponent={
        <View style={styles.content}>
          <Image
            source={{ uri: 'https://example.com/avatar.jpg' }}
            style={[styles.avatar, { width: imageWidth }]}/>
          <Text style={styles.name}>John Doe</Text>
        </View>
      }
      // Scale factor for content animation (0.7 = 70% of original size)
      scaleMin={0.7}
      // Match header background when sticky
      headerBackgroundColor="#ffffff"
      // Enable safe area for devices with notch
      useSafeArea={true}
      // Standard ScrollView props work too
      showsVerticalScrollIndicator={false}
      bounces={true}>
      {/* Static content that scrolls normally */}
      <View style={styles.details}>
        <Text style={styles.sectionTitle}>About</Text>
        <Text style={styles.bio}>Software developer passionate about mobile apps.</Text>

        <Text style={styles.sectionTitle}>Stats</Text>
        <View style={styles.statsContainer}>
          <View style={styles.stat}>
            <Text style={styles.statValue}>150</Text>
            <Text style={styles.statLabel}>Posts</Text>
          </View>
          <View style={styles.stat}>
            <Text style={styles.statValue}>1.2K</Text>
            <Text style={styles.statLabel}>Followers</Text>
          </View>
        </View>
      </View>
    </AnimatedScrollView>
  );
};

const styles = StyleSheet.create({
  topHeader: {
    height: 100,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#6200ee',
  },
  topHeaderText: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#ffffff',
  },
  scrolledHeader: {
    height: 60,
    justifyContent: 'center',
    paddingHorizontal: 20,
  },
  scrolledHeaderText: {
    fontSize: 18,
    fontWeight: '600',
    color: '#000000',
  },
  content: {
    alignItems: 'center',
    paddingVertical: 30,
    backgroundColor: '#f5f5f5',
  },
  avatar: {
    height: 150,
    borderRadius: 75,
  },
  name: {
    fontSize: 22,
    fontWeight: 'bold',
    marginTop: 15,
  },
  details: {
    padding: 20,
    backgroundColor: '#ffffff',
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: '600',
    marginTop: 20,
    marginBottom: 10,
  },
  bio: {
    fontSize: 14,
    color: '#666666',
    lineHeight: 20,
  },
  statsContainer: {
    flexDirection: 'row',
    gap: 30,
  },
  stat: {
    alignItems: 'center',
  },
  statValue: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  statLabel: {
    fontSize: 12,
    color: '#666666',
  },
});

export default ProfileScreen;

```

--------------------------------

### React Native Animated Scroll View with Image Scaling

Source: https://context7.com/ekosh02/react-native-animated-header-scroll-view/llms.txt

This React Native component utilizes `AnimatedScrollView` to implement a dynamic header with a zoom-out effect. It calculates the initial image width to ensure it scales correctly without leaving gaps during scrolling. Dependencies include `react-native` and `@ekosh02/react-native-animated-header-scroll-view`.

```tsx
import { Animated, Dimensions } from 'react-native';

// Animation constants used internally
const SCALE_MIN = 0.7;
const SCALE_MAX = 1.05;
const SCALE_DEFAULT = 1;
const SCROLL_START = 0;
const SCROLL_END = 1;
const SCROLL_PULL_DISTANCE = -50;
const TRANSLATE_Y_DEFAULT = 0;
const TRANSLATE_Y_SCROLL = -20;
const TRANSLATE_Y_PULL = 20;

// Practical example with image scaling fix
import { AnimatedScrollView } from '@ekosh02/react-native-animated-header-scroll-view';
import { View, Image, Text, StyleSheet } from 'react-native';

const ProductScreen = () => {
  const screenWidth = Dimensions.get('window').width;
  const scaleMin = 0.7;

  // Calculate initial width to prevent gaps when scaled down
  // If scale = 0.7, image needs to be 1/0.7 = 1.43x wider initially
  const initialImageWidth = screenWidth / scaleMin;

  return (
    <AnimatedScrollView
      topHeaderComponent={
        <View style={styles.topHeader}>
          <Text style={styles.title}>Product Gallery</Text>
        </View>
      }
      scrolledHeaderComponent={
        <View style={styles.scrolledHeader}>
          <Text style={styles.compactTitle}>Gallery</Text>
        </View>
      }
      contentComponent={
        <View style={styles.imageContainer}>
          {/* Image width calculated to fill screen even when scaled down */}
          <Image
            source={{ uri: 'https://example.com/product.jpg' }}
            style={[styles.productImage, { width: initialImageWidth }]} 
          />
          <View style={styles.overlay}>
            <Text style={styles.productName}>Premium Watch</Text>
            <Text style={styles.price}>$599</Text>
          </View>
        </View>
      }
      scaleMin={scaleMin}
      headerBackgroundColor="#ffffff"
      useSafeArea={true}
    >
      <View style={styles.details}>
        <Text style={styles.description}>
          Luxury timepiece with sapphire crystal and automatic movement.
        </Text>
        <View style={styles.specs}>
          <Text style={styles.specItem}>Movement: Automatic</Text>
          <Text style={styles.specItem}>Water Resistance: 100m</Text>
          <Text style={styles.specItem}>Case: Stainless Steel</Text>
        </View>
      </View>
    </AnimatedScrollView>
  );
};

const styles = StyleSheet.create({
  topHeader: {
    height: 80,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#1a1a1a',
  },
  title: {
    fontSize: 24,
    color: '#ffffff',
    fontWeight: 'bold',
  },
  scrolledHeader: {
    height: 60,
    justifyContent: 'center',
    paddingHorizontal: 15,
    backgroundColor: '#ffffff',
  },
  compactTitle: {
    fontSize: 18,
    fontWeight: '600',
  },
  imageContainer: {
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
    overflow: 'hidden',
  },
  productImage: {
    height: 400,
    resizeMode: 'cover',
  },
  overlay: {
    position: 'absolute',
    bottom: 20,
    left: 20,
    backgroundColor: 'rgba(0,0,0,0.6)',
    padding: 15,
    borderRadius: 8,
  },
  productName: {
    fontSize: 22,
    color: '#ffffff',
    fontWeight: 'bold',
  },
  price: {
    fontSize: 18,
    color: '#ffd700',
    marginTop: 5,
  },
  details: {
    padding: 20,
    backgroundColor: '#ffffff',
  },
  description: {
    fontSize: 16,
    lineHeight: 24,
    color: '#333333',
    marginBottom: 20,
  },
  specs: {
    gap: 10,
  },
  specItem: {
    fontSize: 14,
    color: '#666666',
  },
});

export default ProductScreen;

```

--------------------------------

### Optional SafeArea Hook Implementation (TypeScript)

Source: https://context7.com/ekosh02/react-native-animated-header-scroll-view/llms.txt

This hook conditionally returns device safe area insets or zero values. It's useful for managing layout differences across devices without always requiring the 'react-native-safe-area-context' package. It takes a boolean 'enabled' flag as input.

```tsx
import { useSafeAreaInsets } from 'react-native-safe-area-context';

// Implementation
const useOptionalSafeAreaInsets = (enabled: boolean) => {
  return enabled ? useSafeAreaInsets() : { top: 0, bottom: 0, left: 0, right: 0 };
};
```

--------------------------------

### React Native Header Animation Hook

Source: https://context7.com/ekosh02/react-native-animated-header-scroll-view/llms.txt

A custom React Native hook, `useHeaderAnimation`, that manages opacity transitions for two header components (top and scrolled) using `Animated.timing`. It takes a boolean `isScrolledToHeaderEnd` to determine the animation's target state and returns the animated opacity values for controlling component visibility. Dependencies include `useEffect` and `useRef` from React, and `Animated` from React Native.

```tsx
import { useEffect, useRef } from 'react';
import { Animated } from 'react-native';

// Animation duration constant
const DURATION = 300;

// Implementation example
const useHeaderAnimation = (isScrolledToHeaderEnd: boolean) => {
  const opacityTopHeader = useRef(new Animated.Value(1)).current;
  const opacityScrolledHeader = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    const topHeaderToValue = isScrolledToHeaderEnd ? 0 : 1;
    const scrolledHeaderToValue = isScrolledToHeaderEnd ? 1 : 0;

    Animated.timing(opacityTopHeader, {
      toValue: topHeaderToValue,
      duration: DURATION,
      useNativeDriver: true,
    }).start();

    Animated.timing(opacityScrolledHeader, {
      toValue: scrolledHeaderToValue,
      duration: DURATION,
      useNativeDriver: true,
    }).start();
  }, [isScrolledToHeaderEnd]);

  return { opacityTopHeader, opacityScrolledHeader };
};
```

--------------------------------

### useAnimatedScrollView Hook Logic - TypeScript/React Native

Source: https://context7.com/ekosh02/react-native-animated-header-scroll-view/llms.txt

This hook manages scroll state, header transitions, and layout measurements. It tracks scroll position and determines when to trigger header animation transitions. Dependencies include React Native's Animated API and state management hooks.

```typescript
import { useState, useRef } from 'react';
import { Animated, LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent } from 'react-native';

// Implementation example showing the core logic
const useAnimatedScrollView = () => {
  const [contentHeight, setContentHeight] = useState(0);
  const [headerHeight, setHeaderHeight] = useState(0);
  const [isScrolledToHeaderEnd, setIsScrolledToHeaderEnd] = useState(false);

  const scrollY = useRef(new Animated.Value(0)).current;

  const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
    const scrollYValue = event.nativeEvent.contentOffset.y;
    const reached = scrollYValue >= contentHeight - headerHeight;
    setIsScrolledToHeaderEnd(reached);
    scrollY.setValue(scrollYValue);
  };

  const handleContentLayout = (event: LayoutChangeEvent) => {
    setContentHeight(event.nativeEvent.layout.height);
  };

  const handleHeaderLayout = (event: LayoutChangeEvent) => {
    setHeaderHeight(event.nativeEvent.layout.height);
  };

  return {
    scrollY,
    contentHeight,
    headerHeight,
    isScrolledToHeaderEnd,
    handleScroll,
    handleContentLayout,
    handleHeaderLayout,
  };
};

// Usage in a custom implementation
import { ScrollView, View, Text } from 'react-native';

const CustomAnimatedScroll = () => {
  const {
    scrollY,
    contentHeight,
    headerHeight,
    isScrolledToHeaderEnd,
    handleScroll,
    handleContentLayout,
    handleHeaderLayout,
  } = useAnimatedScrollView();

  // Use scrollY for custom animations
  const opacity = scrollY.interpolate({
    inputRange: [0, 100],
    outputRange: [1, 0],
    extrapolate: 'clamp',
  });

  return (
    <View>
      <Animated.View
        style={{ opacity }}
        onLayout={handleHeaderLayout}
      >
        <Text>Header opacity fades as you scroll</Text>
      </Animated.View>

      <ScrollView onScroll={handleScroll} scrollEventThrottle={16}>
        <Animated.View onLayout={handleContentLayout}>
          <Text>Content height: {contentHeight}</Text>
          <Text>Header height: {headerHeight}</Text>
          <Text>Scrolled to end: {isScrolledToHeaderEnd ? 'Yes' : 'No'}</Text>
        </Animated.View>
      </ScrollView>
    </View>
  );
};

export default CustomAnimatedScroll;

```

--------------------------------

### Calculate Initial Image Width for React Native Scaling

Source: https://github.com/ekosh02/react-native-animated-header-scroll-view/blob/main/README.md

This code snippet calculates the initial width for an image or content within a React Native component to prevent gaps when scaling. It uses the screen's width and a scaling factor to determine the appropriate initial dimension. This is particularly useful when `scaleMin` is set below 1 in a scrollable view.

```tsx
import { Dimensions } from 'react-native'

const screenWidth = Dimensions.get('window').width
const SCALE_AT_MIN = 0.7
const INITIAL_WIDTH = screenWidth / SCALE_AT_MIN
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.