vvv-sss

import { SharedValue, useSharedValue } from "react-native-reanimated";
import { ReanimatedScrollEvent } from "react-native-reanimated/lib/typescript/hook/commonTypes";

export type ScrollDirection = "to-top" | "to-bottom" | "idle";
export type ScrollDirectionValue = SharedValue<ScrollDirection>;

// Tracks scroll direction changes for header animation logic
export const useScrollDirection = (param?: "include-negative") => {
  const scrollDirection = useSharedValue<ScrollDirection>("idle");
  const prevOffsetY = useSharedValue(0); // Previous scroll position for direction comparison

vvv-sss

import React, { FC, useCallback, useEffect } from "react";

import { LinearGradient } from "expo-linear-gradient";
import { StyleSheet, useWindowDimensions, View, Text, ColorValue } from "react-native";

import { ColorCircleOne } from "./color-circle-one";
import { ColorCircleTwo } from "./color-circle-two";
import { ColorCircleThree } from "./color-circle-three";
import Animated, {
  FadeIn,

vvv-sss

{
  "name": "make-it-animated",
  "main": "expo-router/entry",
  "scripts": {
    "reset-project": "node ./scripts/reset-project.js",
    "dev": "APP_VARIANT=development expo start -c",
    "ios": "APP_VARIANT=development expo run:ios --device",
    "android": "APP_VARIANT=development expo run:android --device",
  },
  "jest": {

vvv-sss

Quick Start

Getting started with Make it Animated is easy. Follow these steps to run the project locally:

# Clone the repository
git clone <repository-url>

# Run reset-project script
npm run reset-project