### Install React Native Motionify and Dependencies

Source: https://github.com/dennytosp/react-native-motionify/blob/main/README.md

Instructions for installing the react-native-motionify package using various package managers (npm, yarn, pnpm, bun). It also highlights the necessity of installing react-native-reanimated as a peer dependency, crucial for its animations.

```bash
# npm
npm install react-native-motionify

# yarn
yarn add react-native-motionify

# pnpm
pnpm add react-native-motionify

# bun
bun add react-native-motionify

# peer deps
npm install react-native-reanimated@^3.0.0
```

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

### MotionifyViewWithInterpolation: Scroll Animation Examples (React Native)

Source: https://context7.com/dennytosp/react-native-motionify/llms.txt

Demonstrates advanced scroll-based animations using MotionifyViewWithInterpolation. It showcases parallax effects, sticky headers, rotating elements, and custom animations triggered by scroll position. Requires react-native-motionify.

```tsx
import { ScrollView, View, Text, Image, StyleSheet } from 'react-native';
import {
  MotionifyViewWithInterpolation,
  useMotionify,
  INTERPOLATION_PRESETS
} from 'react-native-motionify';

function ParallaxScreen() {
  const { onScroll, scrollY } = useMotionify();

  return (
    <ScrollView onScroll={onScroll} scrollEventThrottle={16}>
      {/* Parallax header with fade */}
      <MotionifyViewWithInterpolation
        interpolations={{
          translateY: {
            inputRange: [0, 300],
            outputRange: [0, -150],
            extrapolate: 'extend'
          },
          opacity: {
            inputRange: [0, 200, 300],
            outputRange: [1, 0.5, 0],
            extrapolate: 'clamp'
          },
          scale: {
            inputRange: [0, 300],
            outputRange: [1, 1.2],
            extrapolate: 'clamp'
          }
        }}
        style={styles.parallaxHeader}
      >
        <Image
          source={{ uri: 'https://example.com/header.jpg' }}
          style={styles.headerImage}
          resizeMode="cover"
        />
      </MotionifyViewWithInterpolation>

      {/* Sticky title that shrinks */}
      <MotionifyViewWithInterpolation
        interpolations={{
          translateY: {
            inputRange: [0, 100, 200],
            outputRange: [0, 0, -60],
            extrapolate: 'clamp'
          },
          opacity: {
            inputRange: [0, 150, 200],
            outputRange: [0, 0.5, 1],
            extrapolate: 'clamp'
          }
        }}
        style={styles.stickyTitle}
      >
        <Text style={styles.title}>Article Title</Text>
      </MotionifyViewWithInterpolation>

      {/* Rotating icon */}
      <MotionifyViewWithInterpolation
        interpolations={{
          rotate: {
            inputRange: [0, 360],
            outputRange: [0, 360],
            extrapolate: 'clamp'
          }
        }}
        style={styles.rotatingIcon}
      >
        <Text style={styles.icon}>⚙️</Text>
      </MotionifyViewWithInterpolation>

      {/* Content with custom animation */}
      <MotionifyViewWithInterpolation
        value={scrollY}
        customAnimatedStyle={(scrollValue) => {
          const progress = Math.min(scrollValue / 200, 1);
          return {
            transform: [
              { translateX: progress * 20 },
              { skewY: `${progress * 5}deg` }
            ],
            backgroundColor: `rgba(0, 122, 255, ${progress * 0.1})`
          };
        }}
        style={styles.customContent}
      >
        <Text>Custom scroll animation</Text>
      </MotionifyViewWithInterpolation>

      <View style={{ height: 1500 }} />
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  parallaxHeader: {
    height: 300,
    overflow: 'hidden'
  },
  headerImage: {
    width: '100%',
    height: '100%'
  },
  stickyTitle: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    padding: 20,
    backgroundColor: 'white'
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold'
  },
  rotatingIcon: {
    padding: 30,
    alignItems: 'center'
  },
  icon: {
    fontSize: 48
  },
  customContent: {
    padding: 20,
    margin: 20
  }
});

```

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

### Custom Animations with useMotionify Hook and Reanimated

Source: https://github.com/dennytosp/react-native-motionify/blob/main/README.md

Illustrates how to build custom scroll-based animations without using Motionify components directly. This example drives Reanimated's Animated components using the scrollY and directionShared values from the useMotionify hook.

```tsx
import Animated, {
  useAnimatedStyle,
  interpolate,
  Extrapolation,
} from "react-native-reanimated";
import { useMotionify } from "react-native-motionify";

function CustomScreen() {
  const { onScroll, scrollY, directionShared } = useMotionify();

  const animatedHeaderStyle = useAnimatedStyle(() => {
    const translateY = interpolate(
      scrollY.value,
      [0, 200],
      [0, -100],
      Extrapolation.CLAMP
    );
    const opacity = directionShared.value === "down" ? 0.7 : 1;
    return { transform: [{ translateY }], opacity };
  });

  return (
    <Animated.ScrollView onScroll={onScroll} scrollEventThrottle={16}>
      <Animated.View style={animatedHeaderStyle}>
        <Header />
      </Animated.View>
      <Content />
    </Animated.ScrollView>
  );
}
```

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

### Parallax Header with MotionifyViewWithInterpolation

Source: https://github.com/dennytosp/react-native-motionify/blob/main/README.md

Implements a parallax effect for a header image using MotionifyViewWithInterpolation. This example shows how to interpolate the translateY and opacity based on the scroll position.

```tsx
<MotionifyViewWithInterpolation
  interpolations={{
    translateY: {
      inputRange: [0, 200],
      outputRange: [0, -100],
      extrapolate: "extend",
    },
    opacity: { inputRange: [0, 150, 200], outputRange: [1, 0.5, 0] },
  }}>
  <Image source={headerImage} />
</MotionifyViewWithInterpolation>
```

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

### MotionifyProvider - Setup Scroll Tracking Context

Source: https://context7.com/dennytosp/react-native-motionify/llms.txt

The MotionifyProvider component wraps your application to enable scroll state tracking and direction detection for all child components via React Context. It accepts optional `threshold` and `supportIdle` props for configuring scroll behavior.

```tsx
import { MotionifyProvider } from 'react-native-motionify';

function App() {
  return (
    <MotionifyProvider threshold={8} supportIdle={false}>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="Details" component={DetailsScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </MotionifyProvider>
  );
}

// With idle state detection enabled
function AppWithIdle() {
  return (
    <MotionifyProvider threshold={12} supportIdle={true}>
      <YourApp />
    </MotionifyProvider>
  );
}
```

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

### Attach onScroll to LegendList for Motionify

Source: https://github.com/dennytosp/react-native-motionify/blob/main/README.md

An example of integrating the `onScroll` handler with a `LegendList` component from the `legendapp-ui` library. This ensures scroll-driven animations function correctly with this specific list implementation.

```tsx
// LegendList example
import { LegendList } from "legendapp-ui";
const { onScroll } = useMotionify();

<LegendList
  data={items}
  renderItem={renderItem}
  onScroll={onScroll}
  scrollEventThrottle={16}
/>;
```

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

### Attach onScroll to ScrollView for Motionify

Source: https://github.com/dennytosp/react-native-motionify/blob/main/README.md

Provides a concise example of how to correctly attach the `onScroll` handler obtained from `useMotionify` to a `ScrollView` component. It emphasizes setting `scrollEventThrottle={16}` for smooth animations.

```tsx
// ScrollView example
const { onScroll } = useMotionify();

<ScrollView onScroll={onScroll} scrollEventThrottle={16} />;
```

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

### Animate Bottom Tab with Scroll Direction

Source: https://github.com/dennytosp/react-native-motionify/blob/main/README.md

This example shows how to implement a bottom tab bar that animates its visibility based on scroll direction using `MotionifyProvider` and `MotionifyBottomTab`. It ensures the tab bar smoothly hides when scrolling down and reappears when scrolling up.

```tsx
import {
  MotionifyProvider,
  MotionifyBottomTab,
  useMotionify,
} from "react-native-motionify";

function Screen() {
  const { onScroll } = useMotionify();
  return (
    <ScrollView onScroll={onScroll} scrollEventThrottle={16}>
      {/* content */}
    </ScrollView>
  );
}

function AppShell() {
  return (
    <>
      <Screen />
      <MotionifyBottomTab hideOn="down" translateRange={{ from: 0, to: 80 }}>
        <TabBar />
      </MotionifyBottomTab>
    </>
  );
}

export default function App() {
  return (
    <MotionifyProvider>
      <AppShell />
    </MotionifyProvider>
  );
}
```

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

### Implement Direction-Based Animations with MotionifyView (React Native)

Source: https://context7.com/dennytosp/react-native-motionify/llms.txt

This example showcases the MotionifyView component for creating scroll-direction-aware animations in React Native. It utilizes the `useMotionify` hook to track scroll events and applies animations like sliding, fading, and scaling based on scroll direction ('up' or 'down'). Dependencies include 'react-native' and 'react-native-motionify'.

```tsx
import { ScrollView, View, Text, StyleSheet } from 'react-native';
import { MotionifyView, useMotionify } from 'react-native-motionify';

function ScreenWithAnimatedElements() {
  const { onScroll } = useMotionify();

  return (
    <ScrollView onScroll={onScroll} scrollEventThrottle={16}>
      {/* Slide up when scrolling down */}
      <MotionifyView
        animatedY
        hideOn="down"
        translateRange={{ from: 0, to: -80 }}
        animationDuration={300}
        style={styles.header}
      >
        <Text style={styles.headerText}>Sticky Header</Text>
      </MotionifyView>

      {/* Content */}
      <View style={styles.content}>
        {Array.from({ length: 20 }).map((_, i) => (
          <Text key={i} style={styles.item}>Item {i + 1}</Text>
        ))}
      </View>

      {/* FAB that fades out when scrolling down */}
      <MotionifyView
        fadeScale
        hideOn="down"
        animationDuration={250}
        style={styles.fab}
      >
        <Text style={styles.fabIcon}>+</Text>
      </MotionifyView>

      {/* Custom effects */}
      <MotionifyView
        customEffects={(direction) => ({
          opacity: direction === 'down' ? 0.3 : 1,
          transform: [
            { scale: direction === 'down' ? 0.95 : 1 },
            { rotate: direction === 'down' ? '5deg' : '0deg' }
          ],
        })}
        style={styles.customView}
      >
        <Text>Custom Animation</Text>
      </MotionifyView>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  header: {
    padding: 20,
    backgroundColor: '#007AFF',
    alignItems: 'center'
  },
  headerText: {
    color: 'white',
    fontSize: 18,
    fontWeight: 'bold'
  },
  content: {
    padding: 20
  },
  item: {
    padding: 15,
    borderBottomWidth: 1,
    borderColor: '#eee'
  },
  fab: {
    position: 'absolute',
    bottom: 20,
    right: 20,
    width: 60,
    height: 60,
    borderRadius: 30,
    backgroundColor: '#007AFF',
    justifyContent: 'center',
    alignItems: 'center',
    elevation: 4,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
  },
  fabIcon: {
    color: 'white',
    fontSize: 24
  },
  customView: {
    padding: 20,
    margin: 20,
    backgroundColor: '#f0f0f0'
  }
});

```

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

### Implement Animated Bottom Tab Navigation in React Native

Source: https://context7.com/dennytosp/react-native-motionify/llms.txt

This snippet shows a complete React Native application structure for an animated bottom tab navigator. It integrates react-native-motionify with '@react-navigation/bottom-tabs' to create a tab bar that animates its visibility based on scroll direction. The `MotionifyProvider` wraps the navigation, and `MotionifyBottomTab` customizes the tab bar component. It includes example screens (`HomeScreen`, `ProfileScreen`) that use `useMotionify` to track scroll events. Route exclusion is configured within `CustomTabBar`.

```tsx
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import {
  MotionifyProvider,
  MotionifyBottomTab,
  useMotionify,
  TRANSLATION_PRESETS
} from 'react-native-motionify';
import { ScrollView, View, Text, StyleSheet, TouchableOpacity } from 'react-native';

const Tab = createBottomTabNavigator();

function HomeScreen() {
  const { onScroll } = useMotionify();

  return (
    <ScrollView onScroll={onScroll} scrollEventThrottle={16}>
      <View style={{ height: 2000 }}>
        <Text style={{ padding: 20 }}>Scroll to hide bottom tab</Text>
      </View>
    </ScrollView>
  );
}

function ProfileScreen() {
  const { onScroll } = useMotionify();

  return (
    <ScrollView onScroll={onScroll} scrollEventThrottle={16}>
      <View style={{ height: 1500 }}>
        <Text style={{ padding: 20 }}>Profile Content</Text>
      </View>
    </ScrollView>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings Screen</Text>
    </View>
  );
}

function CustomTabBar({ state, navigation }) {
  return (
    <MotionifyBottomTab
      hideOn="down"
      translateRange={TRANSLATION_PRESETS.BOTTOM_TAB}
      animationDuration={300}
      exclude={['Settings', 'Profile']}
      currentId={state.routes[state.index].name}
      style={styles.tabBar}
    >
      <View style={styles.tabContainer}>
        {state.routes.map((route, index) => (
          <TouchableOpacity
            key={route.key}
            onPress={() => navigation.navigate(route.name)}
            style={styles.tab}
          >
            <Text style={[
              styles.tabLabel,
              state.index === index && styles.activeTabLabel
            ]}>
              {route.name}
            </Text>
          </TouchableOpacity>
        ))}
      </View>
    </MotionifyBottomTab>
  );
}

function App() {
  return (
    <MotionifyProvider threshold={8}>
      <Tab.Navigator tabBar={props => <CustomTabBar {...props} />}>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Profile" component={ProfileScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </MotionifyProvider>
  );
}

const styles = StyleSheet.create({
  tabBar: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: 'white',
    borderTopWidth: 1,
    borderTopColor: '#e0e0e0',
    elevation: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: -2 },
    shadowOpacity: 0.1,
    shadowRadius: 3,
  },
  tabContainer: {
    flexDirection: 'row',
    height: 60,
  },
  tab: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  tabLabel: {
    fontSize: 12,
    color: '#666',
  },
  activeTabLabel: {
    color: '#007AFF',
    fontWeight: 'bold',
  },
});

```

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

### Initialize MotionifyProvider in App

Source: https://github.com/dennytosp/react-native-motionify/blob/main/README.md

Demonstrates how to set up the root `MotionifyProvider` in your React Native application. This provider enables scroll-driven animations throughout your app and allows configuration of `threshold` and `supportIdle`.

```tsx
import { MotionifyProvider } from "react-native-motionify";

export default function App() {
  return (
    <MotionifyProvider threshold={8} supportIdle={false}>
      <YourApp />
    </MotionifyProvider>
  );
}
```

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

### Import Hooks and Components from Motionify

Source: https://github.com/dennytosp/react-native-motionify/blob/main/example/src/libs/reactive/README.md

Demonstrates how to import the necessary hooks and components from the Motionify library. Assumes a relative path import structure typical for internal libraries.

```tsx
import { useReactiveScroll, ReactiveBottomTab } from "@/libs/reactive";
```

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

### Attach onScroll to FlashList for Motionify

Source: https://github.com/dennytosp/react-native-motionify/blob/main/README.md

Shows how to apply the `onScroll` handler from `useMotionify` to a `FlashList` from Shopify. This allows for performant scroll animations even with very large datasets.

```tsx
// FlashList (shopify/flash-list) example
import { FlashList } from "@shopify/flash-list";
const { onScroll } = useMotionify();

<FlashList
  data={items}
  renderItem={renderItem}
  estimatedItemSize={72}
  onScroll={onScroll}
  scrollEventThrottle={16}
/>;
```

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

### ReactiveProvider Component

Source: https://github.com/dennytosp/react-native-motionify/blob/main/example/src/libs/reactive/README.md

A context provider component that allows sharing reactive state, such as scroll position and direction, across multiple components.

```APIDOC
## `ReactiveProvider`

Context provider for sharing reactive state.

### Props

- `children: ReactNode` - Child components
- `initialScrollY?: number` - Initial scroll position
- `initialDirection?: 'up' | 'down' | 'idle'` - Initial direction
```

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

### React Native Motionify: Utility Functions and Presets

Source: https://context7.com/dennytosp/react-native-motionify/llms.txt

Provides helper functions for creating custom interpolations, translation ranges, and common animation patterns. Includes presets for fade, scale, parallax, and rotation, along with math utilities and default configuration. This code is intended for use within React Native applications leveraging Motionify and Reanimated.

```tsx
import {
  createInterpolation,
  createFadeInterpolation,
  createScaleInterpolation,
  createParallaxInterpolation,
  createRotationInterpolation,
  createTranslationRange,
  TRANSLATION_PRESETS,
  INTERPOLATION_PRESETS,
  DEFAULTS,
  clamp,
  lerp,
  mapRange,
} from 'react-native-motionify';
import { Extrapolation } from 'react-native-reanimated';

// Using presets
const tabTranslation = TRANSLATION_PRESETS.BOTTOM_TAB; // { from: 0, to: 100 }
const fadeOutEffect = INTERPOLATION_PRESETS.FADE_OUT;
const parallaxEffect = INTERPOLATION_PRESETS.PARALLAX_MEDIUM;

// Creating custom interpolations
const customFade = createFadeInterpolation(200, false); // fade out over 200px
const customScale = createScaleInterpolation(300, 1, 0.7); // scale from 1 to 0.7
const customParallax = createParallaxInterpolation(400, 0.6); // 60% parallax speed
const customRotation = createRotationInterpolation(500, 180); // rotate 180deg

// Generic interpolation
const customInterpolation = createInterpolation(
  [0, 100, 200],
  [1, 0.5, 0],
  Extrapolation.CLAMP
);

// Custom translation range
const customRange = createTranslationRange(0, 120);

// Math utilities (can be used in worklets)
function exampleWorklet() {
  'worklet';

  const clampedValue = clamp(150, 0, 100); // 100
  const interpolated = lerp(0, 100, 0.5); // 50
  const mapped = mapRange(50, 0, 100, 0, 1); // 0.5

  return { clampedValue, interpolated, mapped };
}

// Using defaults
console.log(DEFAULTS.THRESHOLD); // 8
console.log(DEFAULTS.ANIMATION_DURATION); // 300
console.log(DEFAULTS.SCROLL_EVENT_THROTTLE); // 16

```

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

### Create Scroll-Driven FAB with MotionifyView

Source: https://github.com/dennytosp/react-native-motionify/blob/main/README.md

Demonstrates using `MotionifyView` to animate a Floating Action Button (FAB) based on scroll direction. The FAB can be configured to hide when scrolling down, providing a cleaner UI.

```tsx
import { ScrollView } from "react-native";
import {
  MotionifyProvider,
  useMotionify,
  MotionifyView,
} from "react-native-motionify";

function Screen() {
  const { onScroll } = useMotionify();
  return (
    <ScrollView onScroll={onScroll} scrollEventThrottle={16}>
      {/* content */}
      <MotionifyView
        animatedY
        hideOn="down"
        translateRange={{ from: 0, to: 60 }}
      >
        <FAB />
      </MotionifyView>
    </ScrollView>
  );
}

export default function App() {
  return (
    <MotionifyProvider>
      <Screen />
    </MotionifyProvider>
  );
}
```

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

### Attach onScroll to FlatList for Motionify

Source: https://github.com/dennytosp/react-native-motionify/blob/main/README.md

Demonstrates the integration of the `onScroll` handler with a `FlatList` component. This is essential for enabling scroll-driven animations on lists that manage a large number of items efficiently.

```tsx
// FlatList example
const { onScroll } = useMotionify();

<FlatList
  data={items}
  keyExtractor={(it) => it.id}
  renderItem={renderItem}
  onScroll={onScroll}
  scrollEventThrottle={16}
/>;
```

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

### Implement MotionifyBottomTab for Tab Bar Animation

Source: https://github.com/dennytosp/react-native-motionify/blob/main/README.md

Illustrates how to use the `MotionifyBottomTab` component to create a bottom tab bar that animates its visibility based on scroll direction. It configures `hideOn` and `translateRange` for the desired effect.

```tsx
import { MotionifyBottomTab } from "react-native-motionify";

function AppShell() {
  return (
    <>
      <Screen />
      <MotionifyBottomTab hideOn="down" translateRange={{ from: 0, to: 80 }}>
        <TabBar />
      </MotionifyBottomTab>
    </>
  );
}
```

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

### useReactiveScroll Hook

Source: https://github.com/dennytosp/react-native-motionify/blob/main/example/src/libs/reactive/README.md

A hook for tracking scroll direction and position within your React Native application. It provides scrollY, direction, and an event handler.

```APIDOC
## `useReactiveScroll(config?)`

Hook for tracking scroll direction and position.

### Parameters

- `config.threshold?: number` - Pixels to scroll before changing direction (default: 60)
- `config.initialY?: number` - Initial scroll position (default: 0)
- `config.enabled?: boolean` - Enable/disable tracking (default: true)

### Returns

- `scrollY: Animated.Value` - Current scroll position
- `direction: 'up' | 'down' | 'idle'` - Scroll direction
- `onScroll: (event) => void` - Scroll event handler
- `isScrolling: boolean` - Whether currently scrolling
```

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

### Advanced Interpolation with ReactiveViewWithInterpolation

Source: https://github.com/dennytosp/react-native-motionify/blob/main/example/src/libs/reactive/README.md

Explains how to use `ReactiveViewWithInterpolation` to animate component properties like opacity and scale based on scroll events. It takes a scroll value and defines interpolation mappings for visual effects.

```tsx
import React from "react";
import { ScrollView, View } from "react-native";
import {
  useReactiveScroll,
  ReactiveViewWithInterpolation,
} from "@/libs/reactive";

const MyScreen = () => {
  const { scrollY, onScroll } = useReactiveScroll();

  return (
    <>
      <ScrollView onScroll={onScroll} scrollEventThrottle={16}>
        <View style={{ height: 2000 }}>{/* Your content */}</View>
      </ScrollView>

      <ReactiveViewWithInterpolation
        value={scrollY}
        style={{
          position: "absolute",
          bottom: 100,
          right: 20,
          width: 60,
          height: 60,
          backgroundColor: "#007AFF",
          borderRadius: 30,
        }}
        interpolations={{
          opacity: {
            inputRange: [0, 100, 200],
            outputRange: [1, 0.5, 0],
            extrapolate: "clamp",
          },
          scale: {
            inputRange: [0, 100],
            outputRange: [1, 0.8],
            extrapolate: "clamp",
          },
        }}
      >
        {/* Floating Action Button */}
      </ReactiveViewWithInterpolation>
    </>
  );
};

```

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

### Use useMotionify Hook with ScrollView

Source: https://github.com/dennytosp/react-native-motionify/blob/main/README.md

Shows the basic integration of the `useMotionify` hook within a screen component. It retrieves the `onScroll` handler and `direction` state, attaching the handler to a `ScrollView` to enable scroll-driven updates.

```tsx
import { ScrollView, Text, View } from "react-native";
import { useMotionify } from "react-native-motionify";

function Screen() {
  const { onScroll, direction } = useMotionify();
  return (
    <ScrollView onScroll={onScroll} scrollEventThrottle={16}>
      <Text>Direction: {direction}</Text>
      <View style={{ height: 2000 }} />
    </ScrollView>
  );
}
```

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

### Basic Scroll Tracking with useReactiveScroll Hook

Source: https://github.com/dennytosp/react-native-motionify/blob/main/example/src/libs/reactive/README.md

Shows how to use the `useReactiveScroll` hook to track scroll position and direction within a React Native ScrollView. It configures a scroll threshold for direction changes and enables scroll tracking.

```tsx
import React from "react";
import { ScrollView, Text } from "react-native";
import { useReactiveScroll } from "@/libs/reactive";

const MyScreen = () => {
  const { scrollY, direction, onScroll, isScrolling } = useReactiveScroll({
    threshold: 60, // Change direction after 60px scroll
    enabled: true,
  });

  return (
    <ScrollView onScroll={onScroll} scrollEventThrottle={16}>
      <Text>Direction: {direction}</Text>
      <Text>Is Scrolling: {isScrolling ? "Yes" : "No"}</Text>
      {/* Your content here */}
    </ScrollView>
  );
};

```

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

### ReactiveView Component

Source: https://github.com/dennytosp/react-native-motionify/blob/main/example/src/libs/reactive/README.md

An animated view component that dynamically updates its styles based on a provided animated value.

```APIDOC
## `ReactiveView`

Animated view that responds to reactive values.

### Props

- `value?: Animated.Value` - Animated value to respond to
- `reactiveStyle?: (value: number) => ViewStyle` - Function returning styles
- `style?: ViewStyle | ViewStyle[]` - Base styles
- `children?: ReactNode` - Content
```

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

### Provider for Shared Reactive Scroll State

Source: https://github.com/dennytosp/react-native-motionify/blob/main/example/src/libs/reactive/README.md

Demonstrates using `ReactiveProvider` to share reactive scroll state across multiple components. It wraps the application or a section of the UI, allowing components like `ReactiveBottomTab` to access shared scroll data via `useReactiveScrollWithProvider`.

```tsx
import React from "react";
import { ScrollView, View, Text } from "react-native";
import {
  ReactiveProvider,
  useReactiveScrollWithProvider,
  ReactiveBottomTab,
} from "@/libs/reactive";

const App = () => (
  <ReactiveProvider>
    <MyScreen />
  </ReactiveProvider>
);

const MyScreen = () => {
  const scroll = useReactiveScrollWithProvider({ threshold: 60 });

  return (
    <>
      <ScrollView
        onScroll={scroll.onScroll}
        scrollEventThrottle={16}
        style={{ flex: 1 }}
      >
        <View style={{ height: 2000 }}>
          <Text>Content with shared reactive state</Text>
        </View>
      </ScrollView>

      <ReactiveBottomTab scroll={scroll} height={80}>
        <BottomTabContent />
      </ReactiveBottomTab>
    </>
  );
};

```

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

### Reactive Bottom Tab Component with Scroll Tracking

Source: https://github.com/dennytosp/react-native-motionify/blob/main/example/src/libs/reactive/README.md

Illustrates the usage of the `ReactiveBottomTab` component, which dynamically hides or shows based on scroll direction. It integrates with the `useReactiveScroll` hook to control its visibility.

```tsx
import React from "react";
import { ScrollView, View, Text } from "react-native";
import { useReactiveScroll, ReactiveBottomTab } from "@/libs/reactive";

const MyScreen = () => {
  const scroll = useReactiveScroll({ threshold: 60 });

  return (
    <>
      <ScrollView
        onScroll={scroll.onScroll}
        scrollEventThrottle={16}
        style={{ flex: 1 }}
      >
        {/* Your scrollable content */}
        <View style={{ height: 2000 }}>
          <Text>Scroll down to hide the bottom tab</Text>
        </View>
      </ScrollView>

      <ReactiveBottomTab
        scroll={scroll}
        height={80}
        hideOn="down"
        style={{
          backgroundColor: "white",
          borderTopWidth: 1,
          borderTopColor: "#E5E5E5",
        }}
      >
        <View
          style={{
            flexDirection: "row",
            justifyContent: "space-around",
            alignItems: "center",
            height: 80,
          }}
        >
          <Text>Home</Text>
          <Text>Search</Text>
          <Text>Profile</Text>
        </View>
      </ReactiveBottomTab>
    </>
  );
};

```

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

### ReactiveBottomTab Component

Source: https://github.com/dennytosp/react-native-motionify/blob/main/example/src/libs/reactive/README.md

A component that automatically hides or shows based on the scroll direction, ideal for navigation bars.

```APIDOC
## `ReactiveBottomTab`

Component that hides/shows based on scroll direction.

### Props

- `scroll: ReactiveScrollReturn` - Result from useReactiveScroll
- `height?: number` - Tab height (default: 80)
- `hideOn?: 'down' | 'up'` - Direction to hide on (default: 'down')
- `translateRange?: { from: number; to: number }` - Animation range
- `animationDuration?: number` - Animation duration (default: 300ms)
- `style?: ViewStyle | ViewStyle[]` - Custom styles
- `children?: ReactNode` - Tab content
```

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

### React Native Motionify: Custom Reanimated Integration

Source: https://context7.com/dennytosp/react-native-motionify/llms.txt

Demonstrates building fully custom animations in React Native by integrating directly with Reanimated and Motionify's hooks. This allows for fine-grained control over animations using raw scrollY and direction values, bypassing Motionify's component-based abstractions.

```tsx
import { ScrollView, View, Text, StyleSheet } from 'react-native';
import Animated, { 
  useAnimatedStyle,
  interpolate,
  withTiming,
  Extrapolation,
} from 'react-native-reanimated';
import { useMotionify } from 'react-native-motionify';

function FullyCustomScreen() {
  const { onScroll, scrollY, directionShared } = useMotionify();

  // Custom header animation
  const headerStyle = useAnimatedStyle(() => {
    const height = interpolate(
      scrollY.value,
      [0, 100, 200],
      [120, 80, 60],
      Extrapolation.CLAMP
    );

    const backgroundColor = directionShared.value === 'down'
      ? 'rgba(0, 122, 255, 0.8)'
      : 'rgba(0, 122, 255, 1)';

    return {
      height: withTiming(height, { duration: 200 }),
      backgroundColor,
    };
  });

  // Custom content animation
  const contentStyle = useAnimatedStyle(() => {
    const translateX = interpolate(
      scrollY.value,
      [0, 200],
      [0, -20],
      Extrapolation.CLAMP
    );

    const scale = directionShared.value === 'down' ? 0.98 : 1;

    return {
      transform: [
        { translateX },
        { scale: withTiming(scale, { duration: 150 }) }
      ],
    };
  });

  // Custom floating button
  const fabStyle = useAnimatedStyle(() => {
    const isHidden = directionShared.value === 'down';

    return {
      transform: [
        {
          translateY: withTiming(isHidden ? 100 : 0, { duration: 250 }),
        },
        {
          scale: withTiming(isHidden ? 0 : 1, { duration: 250 }),
        },
      ],
      opacity: withTiming(isHidden ? 0 : 1, { duration: 250 }),
    };
  });

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.header, headerStyle]}>
        <Text style={styles.headerTitle}>Custom Header</Text>
      </Animated.View>

      <Animated.ScrollView
        onScroll={onScroll}
        scrollEventThrottle={16}
      >
        <Animated.View style={contentStyle}>
          {Array.from({ length: 30 }).map((_, i) => (
            <View key={i} style={styles.item}>
              <Text>Item {i + 1}</Text>
            </View>
          ))}
        </Animated.View>
      </Animated.ScrollView>

      <Animated.View style={[styles.fab, fabStyle]}>
        <Text style={styles.fabText}>+</Text>
      </Animated.View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  header: {
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#007AFF',
  },
  headerTitle: {
    color: 'white',
    fontSize: 20,
    fontWeight: 'bold',
  },
  item: {
    padding: 20,
    borderBottomWidth: 1,
    borderColor: '#ddd',
  },
  fab: {
    position: 'absolute',
    bottom: 20,
    right: 20,
    width: 60,
    height: 60,
    borderRadius: 30,
    backgroundColor: '#007AFF',
    justifyContent: 'center',
    alignItems: 'center',
    elevation: 4,
  },
  fabText: {
    color: 'white',
    fontSize: 28,
    fontWeight: 'bold',
  },
});

```

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

### useMotionify Hook - Access Scroll State and Events

Source: https://context7.com/dennytosp/react-native-motionify/llms.txt

The useMotionify hook provides access to scroll state, including position (`scrollY`), direction (`direction`), and scrolling status (`isScrolling`). It also returns an `onScroll` event handler that should be attached to scrollable components like ScrollView. Custom configurations for `threshold` and `supportIdle` can be passed to the hook.

```tsx
import { ScrollView, Text, View, StyleSheet } from 'react-native';
import { useMotionify } from 'react-native-motionify';

function ScrollableScreen() {
  const { onScroll, direction, scrollY, isScrolling } = useMotionify();

  return (
    <ScrollView
      onScroll={onScroll}
      scrollEventThrottle={16}
      style={styles.container}
    >
      <View style={styles.header}>
        <Text>Scroll Direction: {direction}</Text>
        <Text>Is Scrolling: {isScrolling ? 'Yes' : 'No'}</Text>
        <Text>Scroll Position: {scrollY.value.toFixed(0)}px</Text>
      </View>

      {Array.from({ length: 50 }).map((_, i) => (
        <View key={i} style={styles.item}>
          <Text>Item {i + 1}</Text>
        </View>
      ))}
    </ScrollView>
  );
}

// With custom threshold configuration
function CustomThresholdScreen() {
  const { onScroll, direction } = useMotionify({
    threshold: 20,
    supportIdle: true
  });

  return (
    <ScrollView onScroll={onScroll} scrollEventThrottle={16}>
      <Text>Current direction: {direction}</Text>
      <View style={{ height: 2000 }} />
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  header: { padding: 20, backgroundColor: '#f5f5f5' },
  item: { padding: 15, borderBottomWidth: 1, borderColor: '#ddd' }
});
```

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

### Hide Bottom Tab on Scroll using MotionifyBottomTab

Source: https://github.com/dennytosp/react-native-motionify/blob/main/README.md

Demonstrates how to hide the bottom tab bar when the user scrolls down using the MotionifyBottomTab component. It requires wrapping the application with MotionifyProvider and configuring the hideOn prop.

```tsx
<MotionifyProvider>
  <Screen />
  <MotionifyBottomTab hideOn="down" translateRange={{ from: 0, to: 80 }}>
    <TabBar />
  </MotionifyBottomTab>
</MotionifyProvider>
```

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

### Advanced Bottom Tab Animation with Scroll Interpolation (React Native)

Source: https://context7.com/dennytosp/react-native-motionify/llms.txt

Implement advanced bottom tab animations with scroll position-based interpolation for effects like gradual hiding, threshold-based animations, or parallax. This component requires 'react-native-motionify' and uses scroll event handling to dynamically adjust tab visibility and position. Input is scroll events, and output is animated tab styles.

```tsx
import {
  MotionifyBottomTabWithInterpolation,
  useMotionify
} from 'react-native-motionify';
import { ScrollView, View, Text, StyleSheet } from 'react-native';

function ScreenWithGradualTab() {
  const { onScroll } = useMotionify();

  return (
    <>
      <ScrollView onScroll={onScroll} scrollEventThrottle={16}>
        <View style={{ height: 2000, padding: 20 }}>
          <Text>Scroll to see gradual tab animation</Text>
          <Text style={{ marginTop: 10 }}>
            Tab starts hiding at 100px and completely hidden at 300px
          </Text>
        </View>
      </ScrollView>

      {/* Gradual hide with threshold */}
      <MotionifyBottomTabWithInterpolation
        inputRange={[0, 100, 300]}
        outputRange={[0, 0, 100]}
        extrapolate="clamp"
        style={styles.tabBar}
      >
        <View style={styles.tabContent}>
          <Text>Home</Text>
          <Text>Search</Text>
          <Text>Profile</Text>
        </View>
      </MotionifyBottomTabWithInterpolation>
    </>
  );
}

// Smooth continuous animation
function ScreenWithSmoothTab() {
  const { onScroll, scrollY } = useMotionify();

  return (
    <>
      <ScrollView onScroll={onScroll} scrollEventThrottle={16}>
        <View style={{ height: 2000, padding: 20 }}>
          <Text>Smooth continuous tab animation</Text>
        </View>
      </ScrollView>

      <MotionifyBottomTabWithInterpolation
        scrollValue={scrollY}
        inputRange={[0, 200]}
        outputRange={[0, 100]}
        extrapolate="extend"
        style={styles.tabBar}
      >
        <View style={styles.tabContent}>
          <Text>Tab Content</Text>
        </View>
      </MotionifyBottomTabWithInterpolation>
    </>
  );
}

const styles = StyleSheet.create({
  tabBar: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    height: 80,
    backgroundColor: 'white',
    borderTopWidth: 1,
    borderTopColor: '#ddd',
  },
  tabContent: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
  },
});

```

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

### Fade on Scroll with MotionifyView

Source: https://github.com/dennytosp/react-native-motionify/blob/main/README.md

Shows how to make a Floating Action Button (FAB) fade out when scrolling down using the MotionifyView component. It utilizes the fadeScale prop and hideOn='down' configuration.

```tsx
const { onScroll } = useMotionify({ threshold: 20 });

<MotionifyView fadeScale hideOn="down" animationDuration={400}>
  <FAB />
</MotionifyView>
```

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

### FlatList Integration with Motionify Bottom Tab (React Native)

Source: https://context7.com/dennytosp/react-native-motionify/llms.txt

Integrate Motionify's bottom tab component with FlatList, FlashList, or other scrollable lists for efficient rendering and scroll-based animations. The 'onScroll' prop from useMotionify should be passed to the list's onScroll handler. This allows the tab to animate based on scroll position, such as hiding when scrolling down.

```tsx
import { FlatList, View, Text, StyleSheet } from 'react-native';
import { useMotionify, MotionifyBottomTab } from 'react-native-motionify';

function ProductList() {
  const { onScroll } = useMotionify({ threshold: 15 });

  const products = Array.from({ length: 100 }, (_, i) => ({
    id: String(i),
    name: `Product ${i + 1}`,
    price: (Math.random() * 100 + 10).toFixed(2),
  }));

  const renderItem = ({ item }) => (
    <View style={styles.productCard}>
      <Text style={styles.productName}>{item.name}</Text>
      <Text style={styles.productPrice}>${item.price}</Text>
    </View>
  );

  return (
    <>
      <FlatList
        data={products}
        keyExtractor={(item) => item.id}
        renderItem={renderItem}
        onScroll={onScroll}
        scrollEventThrottle={16}
        contentContainerStyle={styles.listContent}
      />

      <MotionifyBottomTab
        hideOn="down"
        translateRange={{ from: 0, to: 80 }}
        style={styles.cartButton}
      >
        <Text style={styles.cartButtonText}>Cart (0)</Text>
      </MotionifyBottomTab>
    </>
  );
}

const styles = StyleSheet.create({
  listContent: { padding: 10 },
  productCard: {
    padding: 15,
    marginVertical: 5,
    backgroundColor: 'white',
    borderRadius: 8,
    elevation: 2,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.2,
    shadowRadius: 2,
  },
  productName: { fontSize: 16, fontWeight: '500' },
  productPrice: { fontSize: 14, color: '#007AFF', marginTop: 5 },
  cartButton: {
    position: 'absolute',
    bottom: 20,
    left: 20,
    right: 20,
    height: 50,
    backgroundColor: '#007AFF',
    borderRadius: 25,
    justifyContent: 'center',
    alignItems: 'center',
  },
  cartButtonText: { color: 'white', fontSize: 16, fontWeight: 'bold' },
});

```

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