react-native-animated-header-flat-list 1.1.0

package/src/components/AnimatedHeaderFlatList.tsx

@@ -0,0 +1,299 @@
+import React from 'react';
+import {
+  StyleSheet,
+  View,
+  type LayoutChangeEvent,
+  type ListRenderItemInfo,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+import { useLayoutEffect, useCallback, useMemo } from 'react';
+import type { FlatListPropsWithLayout } from 'react-native-reanimated';
+import { type NavigationProp } from '@react-navigation/native';
+import { useAnimatedHeaderFlatListAnimatedStyles } from '../hooks/useAnimatedHeaderFlatListAnimatedStyles';
+import Animated from 'react-native-reanimated';
+
+// Types
+interface Props {
+  navigation: NavigationProp<any>;
+  title: string;
+  headerTitleStyle?: StyleProp<TextStyle>;
+  navigationTitleStyle?: StyleProp<TextStyle>;
+  HeaderBackground: React.ComponentType<any>;
+  HeaderContent?: React.ComponentType<any>;
+  StickyComponent?: React.ComponentType<any>;
+  style?: StyleProp<ViewStyle>;
+}
+
+type AnimatedHeaderFlatListProps<T> = Omit<
+  FlatListPropsWithLayout<T>,
+  keyof Props
+> &
+  Props;
+
+export function AnimatedHeaderFlatList<T>({
+  navigation,
+  title,
+  headerTitleStyle,
+  navigationTitleStyle,
+  HeaderBackground,
+  HeaderContent,
+  StickyComponent,
+  style,
+  ...flatListProps
+}: AnimatedHeaderFlatListProps<T>) {
+  const getFontSizeFromStyle = useCallback(
+    (textStyle: StyleProp<TextStyle>) => {
+      if (!textStyle) return undefined;
+      if (Array.isArray(textStyle)) {
+        for (const styleItem of textStyle) {
+          if (
+            styleItem &&
+            typeof styleItem === 'object' &&
+            'fontSize' in styleItem
+          ) {
+            return styleItem.fontSize;
+          }
+        }
+      } else if (typeof textStyle === 'object' && 'fontSize' in textStyle) {
+        return textStyle.fontSize;
+      }
+      return undefined;
+    },
+    []
+  );
+
+  const {
+    scrollHandler,
+    navigationBarHeight,
+    headerLayout,
+    setHeaderLayout,
+    setHeaderTitleLayout,
+    stickyComponentLayout,
+    setStickyComponentLayout,
+    navigationTitleAnimatedStyle,
+    headerTitleAnimatedStyle,
+    stickyHeaderAnimatedStyle,
+    headerContentAnimatedStyle,
+    headerBackgroundAnimatedStyle,
+  } = useAnimatedHeaderFlatListAnimatedStyles({
+    headerTitleFontSize: getFontSizeFromStyle(headerTitleStyle),
+    navigationTitleFontSize: getFontSizeFromStyle(navigationTitleStyle),
+  });
+
+  const navigationTitle = useCallback(
+    () => (
+      <Animated.Text
+        style={[
+          navigationTitleAnimatedStyle,
+          navigationTitleStyle,
+          styles.titleStyle,
+        ]}
+        numberOfLines={1}
+      >
+        {title}
+      </Animated.Text>
+    ),
+    [navigationTitleAnimatedStyle, navigationTitleStyle, title]
+  );
+
+  useLayoutEffect(() => {
+    navigation.setOptions({
+      headerShown: true,
+      headerStyle: styles.navigationBar,
+      headerShadowVisible: false,
+      headerTransparent: true,
+      headerTitle: navigationTitle,
+      headerTitleAlign: 'center',
+    });
+  }, [navigationTitle, navigation]);
+
+  const ListHeaderComponent = useMemo(() => {
+    return (
+      <View style={styles.headerWrapper}>
+        <View
+          style={[styles.headerContainer, { top: -navigationBarHeight }]}
+          onLayout={(event: LayoutChangeEvent) => {
+            setHeaderLayout({
+              ...event.nativeEvent.layout,
+              height: event.nativeEvent.layout.height + navigationBarHeight,
+            });
+          }}
+        >
+          <Animated.View style={headerBackgroundAnimatedStyle}>
+            <HeaderBackground />
+          </Animated.View>
+
+          {HeaderContent && (
+            <Animated.View
+              style={[
+                headerContentAnimatedStyle,
+                styles.headerContentContainer,
+              ]}
+            >
+              <HeaderContent />
+            </Animated.View>
+          )}
+
+          <Animated.Text
+            onLayout={(event: LayoutChangeEvent) => {
+              setHeaderTitleLayout(event.nativeEvent.layout);
+            }}
+            numberOfLines={1}
+            style={[
+              headerTitleAnimatedStyle,
+              styles.headerTitle,
+              headerTitleStyle,
+            ]}
+          >
+            {title}
+          </Animated.Text>
+        </View>
+      </View>
+    );
+  }, [
+    navigationBarHeight,
+    headerBackgroundAnimatedStyle,
+    HeaderBackground,
+    HeaderContent,
+    headerContentAnimatedStyle,
+    headerTitleAnimatedStyle,
+    headerTitleStyle,
+    title,
+    setHeaderLayout,
+    setHeaderTitleLayout,
+  ]);
+
+  const renderItem = useCallback(
+    ({ item }: { item: 'HEADER' | T }) => {
+      if (item === 'HEADER') {
+        return (
+          <View
+            style={[
+              styles.stickyHeaderContainer,
+              {
+                height: navigationBarHeight + stickyComponentLayout.height,
+              },
+            ]}
+          >
+            <Animated.View
+              style={[
+                stickyHeaderAnimatedStyle,
+                styles.stickyHeader,
+                {
+                  bottom:
+                    headerLayout.height -
+                    navigationBarHeight * 2 +
+                    stickyComponentLayout.height,
+                },
+              ]}
+            >
+              {ListHeaderComponent}
+            </Animated.View>
+            {StickyComponent && (
+              <View
+                style={styles.stickyComponentContainer}
+                onLayout={(event: LayoutChangeEvent) => {
+                  setStickyComponentLayout(event.nativeEvent.layout);
+                }}
+              >
+                <StickyComponent />
+              </View>
+            )}
+          </View>
+        );
+      }
+      return flatListProps.renderItem &&
+        typeof flatListProps.renderItem === 'function'
+        ? flatListProps.renderItem({ item } as ListRenderItemInfo<T>)
+        : null;
+    },
+    [
+      flatListProps,
+      navigationBarHeight,
+      stickyComponentLayout.height,
+      stickyHeaderAnimatedStyle,
+      headerLayout.height,
+      ListHeaderComponent,
+      StickyComponent,
+      setStickyComponentLayout,
+    ]
+  );
+
+  return (
+    <Animated.FlatList
+      {...flatListProps}
+      style={style}
+      stickyHeaderHiddenOnScroll={false}
+      stickyHeaderIndices={[1]}
+      ListHeaderComponent={
+        <Animated.View
+          style={[
+            styles.mainHeaderContainer,
+            {
+              height: headerLayout.height - navigationBarHeight * 2,
+              transform: [{ translateY: navigationBarHeight }],
+            },
+          ]}
+        >
+          {ListHeaderComponent}
+        </Animated.View>
+      }
+      onScroll={scrollHandler}
+      data={[
+        'HEADER',
+        ...(Array.isArray(flatListProps.data) ? flatListProps.data : []),
+      ]}
+      renderItem={renderItem}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  navigationBar: {
+    backgroundColor: 'transparent',
+  },
+  titleStyle: {
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+  },
+  headerWrapper: {
+    overflow: 'visible',
+  },
+  headerContainer: {
+    left: 0,
+    right: 0,
+    overflow: 'visible',
+    position: 'absolute',
+  },
+  stickyHeaderContainer: {
+    overflow: 'scroll',
+  },
+  stickyHeader: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+  },
+  mainHeaderContainer: {
+    overflow: 'visible',
+  },
+  headerTitle: {
+    position: 'absolute',
+  },
+  stickyComponentContainer: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
+  headerContentContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+});

package/src/hooks/useAnimatedHeaderFlatListAnimatedStyles.ts

@@ -0,0 +1,179 @@
+import { useHeaderHeight } from '@react-navigation/elements';
+import { useState } from 'react';
+import {
+  useWindowDimensions,
+  type LayoutRectangle,
+  type ViewStyle,
+} from 'react-native';
+import {
+  interpolate,
+  useAnimatedScrollHandler,
+  useAnimatedStyle,
+  useSharedValue,
+  type AnimatedStyle,
+  type ScrollHandlerProcessed,
+} from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+type AnimatedHeaderFlatListAnimatedStylesProps = {
+  headerTitleFontSize?: number;
+  navigationTitleFontSize?: number;
+};
+
+type AnimatedHeaderFlatListAnimatedStyles = {
+  scrollHandler: ScrollHandlerProcessed<Record<string, unknown>>;
+  navigationBarHeight: number;
+  headerLayout: LayoutRectangle;
+  setHeaderLayout: (layout: LayoutRectangle) => void;
+  headerTitleLayout: LayoutRectangle;
+  setHeaderTitleLayout: (layout: LayoutRectangle) => void;
+  stickyComponentLayout: LayoutRectangle;
+  setStickyComponentLayout: (layout: LayoutRectangle) => void;
+  navigationTitleAnimatedStyle: AnimatedStyle<ViewStyle>;
+  headerTitleAnimatedStyle: AnimatedStyle<ViewStyle>;
+  stickyHeaderAnimatedStyle: AnimatedStyle<ViewStyle>;
+  headerContentAnimatedStyle: AnimatedStyle<ViewStyle>;
+  headerBackgroundAnimatedStyle: AnimatedStyle<ViewStyle>;
+};
+
+export const useAnimatedHeaderFlatListAnimatedStyles = ({
+  headerTitleFontSize,
+  navigationTitleFontSize,
+}: AnimatedHeaderFlatListAnimatedStylesProps): AnimatedHeaderFlatListAnimatedStyles => {
+  const { width: windowWidth } = useWindowDimensions();
+  const scrollY = useSharedValue(0);
+  const navigationBarHeight = useHeaderHeight();
+  const safeAreaInsets = useSafeAreaInsets();
+  const [headerLayout, setHeaderLayout] = useState<LayoutRectangle>({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+  });
+  const [headerTitleLayout, setHeaderTitleLayout] = useState<LayoutRectangle>({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+  });
+  const [stickyComponentLayout, setStickyComponentLayout] =
+    useState<LayoutRectangle>({
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0,
+    });
+  const distanceBetweenTitleAndNavigationBar =
+    (navigationBarHeight - safeAreaInsets.top + headerTitleLayout.height) / 2 +
+    headerTitleLayout.y -
+    navigationBarHeight;
+  const navigationTitleOpacity = useSharedValue(0);
+  const stickyHeaderOpacity = useSharedValue(0);
+  const navigationTitleAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: navigationTitleOpacity.value,
+    };
+  });
+  const headerTitleAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: 1 - navigationTitleOpacity.value,
+      transform: [
+        {
+          translateX: interpolate(
+            scrollY.value,
+            [0, distanceBetweenTitleAndNavigationBar],
+            [
+              0,
+              windowWidth / 2 -
+                headerTitleLayout.x -
+                headerTitleLayout.width / 2,
+            ],
+            'clamp'
+          ),
+        },
+        {
+          scale: interpolate(
+            scrollY.value,
+            [0, distanceBetweenTitleAndNavigationBar],
+            [
+              1,
+              navigationTitleFontSize && headerTitleFontSize
+                ? navigationTitleFontSize / headerTitleFontSize
+                : 1,
+            ],
+            'clamp'
+          ),
+        },
+      ],
+    };
+  });
+  const stickyHeaderAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: stickyHeaderOpacity.value,
+    };
+  });
+  const headerContentAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: interpolate(
+        scrollY.value,
+        [0, headerLayout.height - navigationBarHeight * 2],
+        [1, 0],
+        'clamp'
+      ),
+    };
+  });
+  const headerBackgroundAnimatedStyle = useAnimatedStyle(() => {
+    if (scrollY.value >= 0) {
+      return {};
+    }
+    return {
+      transform: [
+        {
+          translateY: interpolate(
+            scrollY.value,
+            [scrollY.value, 0],
+            [scrollY.value / 2, 0],
+            'clamp'
+          ),
+        },
+        {
+          scale: interpolate(
+            scrollY.value,
+            [scrollY.value, 0],
+            [
+              1 - scrollY.value / (headerLayout.height - navigationBarHeight),
+              1,
+              1,
+            ],
+            'clamp'
+          ),
+        },
+      ],
+    };
+  });
+  const scrollHandler = useAnimatedScrollHandler((event) => {
+    scrollY.value = event.contentOffset.y;
+    navigationTitleOpacity.value =
+      event.contentOffset.y >= distanceBetweenTitleAndNavigationBar ? 1 : 0;
+    stickyHeaderOpacity.value =
+      event.contentOffset.y >= headerLayout.height - navigationBarHeight * 2
+        ? 1
+        : 0;
+  });
+
+  return {
+    scrollHandler,
+    navigationBarHeight,
+    headerLayout,
+    setHeaderLayout,
+    headerTitleLayout,
+    setHeaderTitleLayout,
+    stickyComponentLayout,
+    setStickyComponentLayout,
+    navigationTitleAnimatedStyle,
+    headerTitleAnimatedStyle,
+    stickyHeaderAnimatedStyle,
+    headerContentAnimatedStyle,
+    headerBackgroundAnimatedStyle,
+  };
+};

package/src/index.tsx

@@ -0,0 +1,3 @@
+import { AnimatedHeaderFlatList } from './components/AnimatedHeaderFlatList';
+
+export { AnimatedHeaderFlatList };