From 0410cc6a5e430a088202f65194b038e2e6c53daa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20M=C4=99drek?= <mateusz.medrek@netguru.com>
Date: Thu, 28 Apr 2022 15:19:05 +0200
Subject: [PATCH] feat: new api - AvatarHeader

- add AvatarHeader components
- add useStickyHeaderScrollProps used to handle snap-effect props
- add usePredefinedHeader used to handle header props
---
 example/src/navigation/AppNavigator.js        |   6 +
 example/src/screens/HomeScreen/HomeScreen.tsx |  18 ++
 .../AvatarHeaderFlatListExample.tsx           |  48 +++++
 .../AvatarHeaderScrollViewExample.tsx         |  51 ++++++
 .../AvatarHeaderSectionListExample.tsx        |  64 +++++++
 package.json                                  |   4 +-
 src/components/IconRenderer/IconRenderer.tsx  |   2 +-
 src/constants/screenStyles.ts                 |   4 +
 src/hooks/useResponsiveSize.ts                |  15 ++
 .../AvatarHeader/AvatarHeaderFlatList.tsx     |  98 +++++++++++
 .../AvatarHeader/AvatarHeaderProps.ts         |  28 +++
 .../AvatarHeader/AvatarHeaderScrollView.tsx   |  84 +++++++++
 .../AvatarHeader/AvatarHeaderSectionList.tsx  | 100 +++++++++++
 .../AvatarHeader/components/HeaderBar.tsx     | 165 ++++++++++++++++++
 .../components/HeaderForeground.tsx           | 163 +++++++++++++++++
 .../AvatarHeader/useAvatarHeader.tsx          |  74 ++++++++
 .../common/SharedProps.ts                     |  61 +++++++
 .../common/components/HeaderBackground.tsx    |  48 +++++
 .../components/HeaderBackgroundImage.tsx      |  36 ++++
 .../common/components/HeaderWrapper.tsx       |  85 +++++++++
 .../common/hooks/usePredefinedHeader.tsx      |  46 +++++
 .../common/hooks/useRTLStyles.ts              |  27 +++
 .../common/utils/scrollPosition.ts            |   3 +
 src/primitiveComponents/StickyHeaderProps.ts  |   8 +
 .../useStickyHeaderScrollProps.ts             | 133 ++++++++++++++
 yarn.lock                                     |   5 +
 26 files changed, 1374 insertions(+), 2 deletions(-)
 create mode 100644 example/src/screens/additionalExamples/AvatarHeaderFlatListExample.tsx
 create mode 100644 example/src/screens/additionalExamples/AvatarHeaderScrollViewExample.tsx
 create mode 100644 example/src/screens/additionalExamples/AvatarHeaderSectionListExample.tsx
 create mode 100644 src/hooks/useResponsiveSize.ts
 create mode 100644 src/predefinedComponents/AvatarHeader/AvatarHeaderFlatList.tsx
 create mode 100644 src/predefinedComponents/AvatarHeader/AvatarHeaderProps.ts
 create mode 100644 src/predefinedComponents/AvatarHeader/AvatarHeaderScrollView.tsx
 create mode 100644 src/predefinedComponents/AvatarHeader/AvatarHeaderSectionList.tsx
 create mode 100644 src/predefinedComponents/AvatarHeader/components/HeaderBar.tsx
 create mode 100644 src/predefinedComponents/AvatarHeader/components/HeaderForeground.tsx
 create mode 100644 src/predefinedComponents/AvatarHeader/useAvatarHeader.tsx
 create mode 100644 src/predefinedComponents/common/SharedProps.ts
 create mode 100644 src/predefinedComponents/common/components/HeaderBackground.tsx
 create mode 100644 src/predefinedComponents/common/components/HeaderBackgroundImage.tsx
 create mode 100644 src/predefinedComponents/common/components/HeaderWrapper.tsx
 create mode 100644 src/predefinedComponents/common/hooks/usePredefinedHeader.tsx
 create mode 100644 src/predefinedComponents/common/hooks/useRTLStyles.ts
 create mode 100644 src/predefinedComponents/common/utils/scrollPosition.ts
 create mode 100644 src/primitiveComponents/useStickyHeaderScrollProps.ts

diff --git a/example/src/navigation/AppNavigator.js b/example/src/navigation/AppNavigator.js
index cb5fcbe2..5df5f1db 100644
--- a/example/src/navigation/AppNavigator.js
+++ b/example/src/navigation/AppNavigator.js
@@ -4,6 +4,9 @@ import { createStackNavigator } from '@react-navigation/stack';
 import { HomeScreen, CardScreen } from '../screens';
 import YodaScreen from '../screens/additionalExamples/YodaScreen';
 import AppStoreHeader from '../screens/additionalExamples/SimsScreen';
+import { AvatarHeaderFlatListExample } from '../screens/additionalExamples/AvatarHeaderFlatListExample';
+import { AvatarHeaderScrollViewExample } from '../screens/additionalExamples/AvatarHeaderScrollViewExample';
+import { AvatarHeaderSectionListExample } from '../screens/additionalExamples/AvatarHeaderSectionListExample';
 import { StickyHeaderFlatListExample } from '../screens/additionalExamples/StickyHeaderFlatListExample';
 import { StickyHeaderScrollViewExample } from '../screens/additionalExamples/StickyHeaderScrollViewExample';
 import { StickyHeaderSectionListExample } from '../screens/additionalExamples/StickyHeaderSectionListExample';
@@ -20,6 +23,9 @@ const AppNavigator = () => (
       <Stack.Screen name="StickyHeaderFlatList" component={StickyHeaderFlatListExample} />
       <Stack.Screen name="StickyHeaderScrollView" component={StickyHeaderScrollViewExample} />
       <Stack.Screen name="StickyHeaderSectionList" component={StickyHeaderSectionListExample} />
+      <Stack.Screen name="AvatarHeaderFlatList" component={AvatarHeaderFlatListExample} />
+      <Stack.Screen name="AvatarHeaderScrollView" component={AvatarHeaderScrollViewExample} />
+      <Stack.Screen name="AvatarHeaderSectionList" component={AvatarHeaderSectionListExample} />
     </Stack.Navigator>
   </NavigationContainer>
 );
diff --git a/example/src/screens/HomeScreen/HomeScreen.tsx b/example/src/screens/HomeScreen/HomeScreen.tsx
index 94d2038e..73fb51f9 100644
--- a/example/src/screens/HomeScreen/HomeScreen.tsx
+++ b/example/src/screens/HomeScreen/HomeScreen.tsx
@@ -143,6 +143,24 @@ const HomeScreen: VFC = () => {
             navigation.navigate('StickyHeaderSectionList');
           }}
         />
+        <Button
+          title={'New AvatarHeaderFlatList'}
+          onPress={() => {
+            navigation.navigate('AvatarHeaderFlatList');
+          }}
+        />
+        <Button
+          title={'New AvatarHeaderScrollView'}
+          onPress={() => {
+            navigation.navigate('AvatarHeaderScrollView');
+          }}
+        />
+        <Button
+          title={'New AvatarHeaderSectionList'}
+          onPress={() => {
+            navigation.navigate('AvatarHeaderSectionList');
+          }}
+        />
       </View>
     );
   };
diff --git a/example/src/screens/additionalExamples/AvatarHeaderFlatListExample.tsx b/example/src/screens/additionalExamples/AvatarHeaderFlatListExample.tsx
new file mode 100644
index 00000000..98cbd071
--- /dev/null
+++ b/example/src/screens/additionalExamples/AvatarHeaderFlatListExample.tsx
@@ -0,0 +1,48 @@
+import { useNavigation } from '@react-navigation/native';
+import type { FC } from 'react';
+import React from 'react';
+import { StyleSheet, useColorScheme } from 'react-native';
+
+// TODO: Change path when removing old API
+import { AvatarHeaderFlatList } from '../../../../src/predefinedComponents/AvatarHeader/AvatarHeaderFlatList';
+import { Brandon } from '../../assets/data/cards';
+import QuizCard from '../../components/QuizCard/QuizCard';
+
+export const AvatarHeaderFlatListExample: FC = () => {
+  const navigation = useNavigation();
+
+  function goBack() {
+    navigation.goBack();
+  }
+
+  const isDarkTheme = useColorScheme() === 'dark';
+
+  return <AvatarHeaderFlatList
+    leftTopIcon={require('../../assets/icons/iconCloseWhite.png')}
+    leftTopIconOnPress={goBack}
+    rightTopIcon={require('../../assets/icons/Icon-Menu.png')}
+    contentContainerStyle={[ styles.content, isDarkTheme ? styles.darkBackground : styles.lightBackground ]}
+    backgroundColor={Brandon.color}
+    hasBorderRadius
+    image={Brandon.image}
+    subtitle={Brandon.about}
+    title={Brandon.author}
+    data={Brandon.cards}
+    keyExtractor={(item) => item.question}
+    renderItem={({ item, index }) => <QuizCard data={item} num={index} cardsAmount={Brandon.cards.length} />}
+  />;
+};
+
+const styles = StyleSheet.create({
+  content: {
+    alignItems: 'center',
+    alignSelf: 'stretch',
+    paddingHorizontal: 24,
+  },
+  darkBackground: {
+    backgroundColor: 'black',
+  },
+  lightBackground: {
+    backgroundColor: 'white',
+  },
+});
diff --git a/example/src/screens/additionalExamples/AvatarHeaderScrollViewExample.tsx b/example/src/screens/additionalExamples/AvatarHeaderScrollViewExample.tsx
new file mode 100644
index 00000000..d5051104
--- /dev/null
+++ b/example/src/screens/additionalExamples/AvatarHeaderScrollViewExample.tsx
@@ -0,0 +1,51 @@
+import { useNavigation } from '@react-navigation/native';
+import type { FC } from 'react';
+import React from 'react';
+import { StyleSheet, View, useColorScheme } from 'react-native';
+
+// TODO: Change path when removing old API
+import { AvatarHeaderScrollView } from '../../../../src/predefinedComponents/AvatarHeader/AvatarHeaderScrollView';
+import { Brandon } from '../../assets/data/cards';
+import QuizCard from '../../components/QuizCard/QuizCard';
+
+export const AvatarHeaderScrollViewExample: FC = () => {
+  const navigation = useNavigation();
+
+  function goBack() {
+    navigation.goBack();
+  }
+
+  const isDarkTheme = useColorScheme() === 'dark';
+
+  return <AvatarHeaderScrollView
+    leftTopIcon={require('../../assets/icons/iconCloseWhite.png')}
+    leftTopIconOnPress={goBack}
+    rightTopIcon={require('../../assets/icons/Icon-Menu.png')}
+    contentContainerStyle={[ isDarkTheme ? styles.darkBackground : styles.lightBackground ]}
+    backgroundColor={Brandon.color}
+    hasBorderRadius
+    image={Brandon.image}
+    subtitle={Brandon.about}
+    title={Brandon.author}
+  >
+    <View style={styles.content}>
+      {Brandon.cards.map((data, i, arr) => 
+        <QuizCard data={data} num={i} key={data.question} cardsAmount={arr.length} />
+      )}
+    </View>
+  </AvatarHeaderScrollView>;
+};
+
+const styles = StyleSheet.create({
+  content: {
+    alignItems: 'center',
+    flex: 1,
+    paddingHorizontal: 24,
+  },
+  darkBackground: {
+    backgroundColor: 'black',
+  },
+  lightBackground: {
+    backgroundColor: 'white',
+  },
+});
diff --git a/example/src/screens/additionalExamples/AvatarHeaderSectionListExample.tsx b/example/src/screens/additionalExamples/AvatarHeaderSectionListExample.tsx
new file mode 100644
index 00000000..c1a4a1a5
--- /dev/null
+++ b/example/src/screens/additionalExamples/AvatarHeaderSectionListExample.tsx
@@ -0,0 +1,64 @@
+import { useNavigation } from '@react-navigation/native';
+import type { FC } from 'react';
+import React, { useMemo } from 'react';
+import type { SectionListData } from 'react-native';
+import { StyleSheet, useColorScheme } from 'react-native';
+
+// TODO: Change path when removing old API
+import { AvatarHeaderSectionList } from '../../../../src/predefinedComponents/AvatarHeader/AvatarHeaderSectionList';
+import { Brandon } from '../../assets/data/cards';
+import QuizCard from '../../components/QuizCard/QuizCard';
+import { SectionFooter } from '../../components/primitiveComponents/SectionFooter';
+import { SectionHeader } from '../../components/primitiveComponents/SectionHeader';
+
+export const AvatarHeaderSectionListExample: FC = () => {
+  const navigation = useNavigation();
+
+  function goBack() {
+    navigation.goBack();
+  }
+
+  const isDarkTheme = useColorScheme() === 'dark';
+
+  const sections = useMemo(() => {
+    const section: SectionListData<typeof Brandon.cards[0]> = {
+      data: Brandon.cards,
+      keyExtractor: (item) => item.question,
+      renderItem: ({ item, index }) => <QuizCard data={item} num={index} cardsAmount={Brandon.cards.length} />,
+    };
+
+    return [ section, section, section ];
+  }, []);
+
+  return <AvatarHeaderSectionList
+    leftTopIcon={require('../../assets/icons/iconCloseWhite.png')}
+    leftTopIconOnPress={goBack}
+    rightTopIcon={require('../../assets/icons/Icon-Menu.png')}
+    contentContainerStyle={[ styles.content, isDarkTheme ? styles.darkBackground : styles.lightBackground ]}
+    backgroundColor={Brandon.color}
+    hasBorderRadius
+    image={Brandon.image}
+    subtitle={Brandon.about}
+    title={Brandon.author}
+    renderSectionHeader={() => {
+      return <SectionHeader />;
+    }}
+    renderSectionFooter={() => {
+      return <SectionFooter />;
+    }}
+    sections={sections}
+  />;
+};
+
+const styles = StyleSheet.create({
+  content: {
+    alignSelf: 'stretch',
+    paddingHorizontal: 24,
+  },
+  darkBackground: {
+    backgroundColor: 'black',
+  },
+  lightBackground: {
+    backgroundColor: 'white',
+  },
+});
diff --git a/package.json b/package.json
index 97c49c1d..0278c426 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,8 @@
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
-    "react-native-reanimated": ">=2.0.0"
+    "react-native-reanimated": ">=2.0.0",
+    "react-native-safe-area-context": ">=3.0.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^8.3.5",
@@ -60,6 +61,7 @@
     "react-native": "0.64.3",
     "react-native-builder-bob": "0.18.2",
     "react-native-reanimated": "2.3.1",
+    "react-native-safe-area-context": "3.3.2",
     "react-test-renderer": "17.0.1",
     "release-it": "14.14.2",
     "typescript": "4.6.3"
diff --git a/src/components/IconRenderer/IconRenderer.tsx b/src/components/IconRenderer/IconRenderer.tsx
index 8ccdd47a..2baaa6e2 100644
--- a/src/components/IconRenderer/IconRenderer.tsx
+++ b/src/components/IconRenderer/IconRenderer.tsx
@@ -3,7 +3,7 @@ import { Image, ImageSourcePropType } from 'react-native';
 import styles from '../../predefinedComponents/DetailsHeader/DetailsHeader.styles';
 
 interface Props {
-  icon?: (() => ReactElement) | ImageSourcePropType;
+  icon?: (() => ReactElement | null) | ImageSourcePropType;
 }
 
 const IconRenderer: VFC<Props> = ({ icon }) => {
diff --git a/src/constants/screenStyles.ts b/src/constants/screenStyles.ts
index 00b16d8f..3f52c427 100644
--- a/src/constants/screenStyles.ts
+++ b/src/constants/screenStyles.ts
@@ -66,6 +66,10 @@ const screenStyles = StyleSheet.create({
   foregroundText: {
     color: colors.white,
   },
+  wrapper: {
+    alignSelf: 'stretch',
+    flex: 1,
+  },
 });
 
 export default screenStyles;
diff --git a/src/hooks/useResponsiveSize.ts b/src/hooks/useResponsiveSize.ts
new file mode 100644
index 00000000..201a1b7c
--- /dev/null
+++ b/src/hooks/useResponsiveSize.ts
@@ -0,0 +1,15 @@
+import { useWindowDimensions } from 'react-native';
+
+export function useResponsiveSize() {
+  const { height, width } = useWindowDimensions();
+
+  function responsiveHeight(value: number) {
+    return height * (value / 100);
+  }
+
+  function responsiveWidth(value: number) {
+    return width * (value / 100);
+  }
+
+  return { responsiveHeight, responsiveWidth };
+}
diff --git a/src/predefinedComponents/AvatarHeader/AvatarHeaderFlatList.tsx b/src/predefinedComponents/AvatarHeader/AvatarHeaderFlatList.tsx
new file mode 100644
index 00000000..b4206cb8
--- /dev/null
+++ b/src/predefinedComponents/AvatarHeader/AvatarHeaderFlatList.tsx
@@ -0,0 +1,98 @@
+import type { ForwardedRef, ReactElement, RefAttributes } from 'react';
+import React, { forwardRef, useImperativeHandle } from 'react';
+import type { FlatList } from 'react-native';
+import { View } from 'react-native';
+
+import commonStyles from '../../constants/screenStyles';
+import { StickyHeaderFlatList } from '../../primitiveComponents/StickyHeaderFlatList';
+import type { AvatarHeaderFlatListProps } from './AvatarHeaderProps';
+import { HeaderBar } from './components/HeaderBar';
+import { useAvatarHeader } from './useAvatarHeader';
+
+function AvatarHeaderFlatListInner<ItemT>(
+  props: AvatarHeaderFlatListProps<ItemT>,
+  ref: ForwardedRef<FlatList<ItemT>>
+) {
+  const {
+    backgroundColor,
+    contentContainerStyle,
+    data,
+    decelerationRate = 'fast',
+    keyExtractor,
+    leftTopIcon,
+    leftTopIconAccessibilityLabel,
+    leftTopIconOnPress,
+    leftTopIconTestID,
+    nestedScrollEnabled = true,
+    overScrollMode = 'never',
+    renderHeaderBar,
+    renderItem,
+    rightTopIcon,
+    rightTopIconAccessibilityLabel,
+    rightTopIconOnPress,
+    rightTopIconTestID,
+    scrollEventThrottle = 16,
+    title,
+    ...rest
+  } = props;
+  const {
+    onMomentumScrollEnd,
+    onScroll,
+    onScrollEndDrag,
+    parallaxHeight,
+    renderHeader,
+    scrollValue,
+    scrollViewRef,
+  } = useAvatarHeader<FlatList<ItemT>>(props);
+
+  useImperativeHandle(ref, () => scrollViewRef.current as FlatList<ItemT>);
+
+  return (
+    <View style={[commonStyles.wrapper, { backgroundColor }]}>
+      {renderHeaderBar ? (
+        renderHeaderBar()
+      ) : (
+        <HeaderBar
+          backgroundColor={backgroundColor}
+          height={parallaxHeight}
+          leftTopIcon={leftTopIcon}
+          leftTopIconAccessibilityLabel={leftTopIconAccessibilityLabel}
+          leftTopIconOnPress={leftTopIconOnPress}
+          leftTopIconTestID={leftTopIconTestID}
+          rightTopIcon={rightTopIcon}
+          rightTopIconAccessibilityLabel={rightTopIconAccessibilityLabel}
+          rightTopIconOnPress={rightTopIconOnPress}
+          rightTopIconTestID={rightTopIconTestID}
+          scrollValue={scrollValue}
+          title={title}
+        />
+      )}
+      <View style={commonStyles.wrapper}>
+        <StickyHeaderFlatList
+          ref={scrollViewRef}
+          {...rest}
+          contentContainerStyle={contentContainerStyle}
+          data={data}
+          decelerationRate={decelerationRate}
+          keyExtractor={keyExtractor}
+          nestedScrollEnabled={nestedScrollEnabled}
+          onMomentumScrollEnd={onMomentumScrollEnd}
+          onScrollEndDrag={onScrollEndDrag}
+          onScroll={onScroll}
+          overScrollMode={overScrollMode}
+          renderHeader={renderHeader}
+          renderItem={renderItem}
+          scrollEventThrottle={scrollEventThrottle}
+        />
+      </View>
+    </View>
+  );
+}
+
+type AvatarHeaderFlatListType = <ItemT>(
+  props: AvatarHeaderFlatListProps<ItemT> & RefAttributes<FlatList<ItemT>>
+) => ReactElement;
+
+export const AvatarHeaderFlatList = forwardRef(
+  AvatarHeaderFlatListInner
+) as AvatarHeaderFlatListType;
diff --git a/src/predefinedComponents/AvatarHeader/AvatarHeaderProps.ts b/src/predefinedComponents/AvatarHeader/AvatarHeaderProps.ts
new file mode 100644
index 00000000..fc46fc8b
--- /dev/null
+++ b/src/predefinedComponents/AvatarHeader/AvatarHeaderProps.ts
@@ -0,0 +1,28 @@
+import type { ColorValue, ImageSourcePropType } from 'react-native';
+
+import type {
+  StickyHeaderFlatListProps,
+  StickyHeaderScrollViewProps,
+  StickyHeaderSectionListProps,
+} from '../../primitiveComponents/StickyHeaderProps';
+import type { IconProps, SharedPredefinedProps } from '../common/SharedProps';
+
+export interface AvatarHeaderSharedProps extends IconProps, SharedPredefinedProps {
+  hasBorderRadius?: boolean;
+  image?: ImageSourcePropType;
+  subtitle?: string;
+  tabsContainerBackgroundColor?: ColorValue;
+  title?: string;
+}
+
+export interface AvatarHeaderScrollViewProps
+  extends AvatarHeaderSharedProps,
+    StickyHeaderScrollViewProps {}
+
+export interface AvatarHeaderFlatListProps<ItemT>
+  extends AvatarHeaderSharedProps,
+    StickyHeaderFlatListProps<ItemT> {}
+
+export interface AvatarHeaderSectionListProps<ItemT, SectionT>
+  extends AvatarHeaderSharedProps,
+    StickyHeaderSectionListProps<ItemT, SectionT> {}
diff --git a/src/predefinedComponents/AvatarHeader/AvatarHeaderScrollView.tsx b/src/predefinedComponents/AvatarHeader/AvatarHeaderScrollView.tsx
new file mode 100644
index 00000000..4a86a1c4
--- /dev/null
+++ b/src/predefinedComponents/AvatarHeader/AvatarHeaderScrollView.tsx
@@ -0,0 +1,84 @@
+import React, { forwardRef, useImperativeHandle } from 'react';
+import type { ScrollView } from 'react-native';
+import { View } from 'react-native';
+
+import commonStyles from '../../constants/screenStyles';
+import { StickyHeaderScrollView } from '../../primitiveComponents/StickyHeaderScrollView';
+import type { AvatarHeaderScrollViewProps } from './AvatarHeaderProps';
+import { HeaderBar } from './components/HeaderBar';
+import { useAvatarHeader } from './useAvatarHeader';
+
+export const AvatarHeaderScrollView = forwardRef<ScrollView, AvatarHeaderScrollViewProps>(
+  (props, ref) => {
+    const {
+      backgroundColor,
+      children,
+      contentContainerStyle,
+      decelerationRate = 'fast',
+      leftTopIcon,
+      leftTopIconAccessibilityLabel,
+      leftTopIconOnPress,
+      leftTopIconTestID,
+      nestedScrollEnabled = true,
+      overScrollMode = 'never',
+      renderHeaderBar,
+      rightTopIcon,
+      rightTopIconAccessibilityLabel,
+      rightTopIconOnPress,
+      rightTopIconTestID,
+      scrollEventThrottle = 16,
+      title,
+      ...rest
+    } = props;
+    const {
+      onMomentumScrollEnd,
+      onScroll,
+      onScrollEndDrag,
+      parallaxHeight,
+      renderHeader,
+      scrollValue,
+      scrollViewRef,
+    } = useAvatarHeader<ScrollView>(props);
+
+    useImperativeHandle(ref, () => scrollViewRef.current as ScrollView);
+
+    return (
+      <View style={[commonStyles.wrapper, { backgroundColor }]}>
+        {renderHeaderBar ? (
+          renderHeaderBar()
+        ) : (
+          <HeaderBar
+            backgroundColor={backgroundColor}
+            height={parallaxHeight}
+            leftTopIcon={leftTopIcon}
+            leftTopIconAccessibilityLabel={leftTopIconAccessibilityLabel}
+            leftTopIconOnPress={leftTopIconOnPress}
+            leftTopIconTestID={leftTopIconTestID}
+            rightTopIcon={rightTopIcon}
+            rightTopIconAccessibilityLabel={rightTopIconAccessibilityLabel}
+            rightTopIconOnPress={rightTopIconOnPress}
+            rightTopIconTestID={rightTopIconTestID}
+            scrollValue={scrollValue}
+            title={title}
+          />
+        )}
+        <View style={commonStyles.wrapper}>
+          <StickyHeaderScrollView
+            ref={scrollViewRef}
+            {...rest}
+            contentContainerStyle={contentContainerStyle}
+            decelerationRate={decelerationRate}
+            nestedScrollEnabled={nestedScrollEnabled}
+            onMomentumScrollEnd={onMomentumScrollEnd}
+            onScrollEndDrag={onScrollEndDrag}
+            onScroll={onScroll}
+            overScrollMode={overScrollMode}
+            renderHeader={renderHeader}
+            scrollEventThrottle={scrollEventThrottle}>
+            {children}
+          </StickyHeaderScrollView>
+        </View>
+      </View>
+    );
+  }
+);
diff --git a/src/predefinedComponents/AvatarHeader/AvatarHeaderSectionList.tsx b/src/predefinedComponents/AvatarHeader/AvatarHeaderSectionList.tsx
new file mode 100644
index 00000000..8f06565e
--- /dev/null
+++ b/src/predefinedComponents/AvatarHeader/AvatarHeaderSectionList.tsx
@@ -0,0 +1,100 @@
+import type { ForwardedRef, ReactElement, RefAttributes } from 'react';
+import React, { forwardRef, useImperativeHandle } from 'react';
+import type { SectionList } from 'react-native';
+import { View } from 'react-native';
+
+import commonStyles from '../../constants/screenStyles';
+import { StickyHeaderSectionList } from '../../primitiveComponents/StickyHeaderSectionList';
+import type { AvatarHeaderSectionListProps } from './AvatarHeaderProps';
+import { HeaderBar } from './components/HeaderBar';
+import { useAvatarHeader } from './useAvatarHeader';
+
+function AvatarHeaderSectionListInner<ItemT, SectionT>(
+  props: AvatarHeaderSectionListProps<ItemT, SectionT>,
+  ref: ForwardedRef<SectionList<ItemT, SectionT>>
+) {
+  const {
+    backgroundColor,
+    contentContainerStyle,
+    decelerationRate = 'fast',
+    leftTopIcon,
+    leftTopIconAccessibilityLabel,
+    leftTopIconOnPress,
+    leftTopIconTestID,
+    nestedScrollEnabled = true,
+    overScrollMode = 'never',
+    renderHeaderBar,
+    renderSectionFooter,
+    renderSectionHeader,
+    rightTopIcon,
+    rightTopIconAccessibilityLabel,
+    rightTopIconOnPress,
+    rightTopIconTestID,
+    scrollEventThrottle = 16,
+    sections,
+    stickySectionHeadersEnabled = true,
+    title,
+    ...rest
+  } = props;
+  const {
+    onMomentumScrollEnd,
+    onScroll,
+    onScrollEndDrag,
+    parallaxHeight,
+    renderHeader,
+    scrollValue,
+    scrollViewRef,
+  } = useAvatarHeader<SectionList<ItemT, SectionT>>(props);
+
+  useImperativeHandle(ref, () => scrollViewRef.current as SectionList<ItemT, SectionT>);
+
+  return (
+    <View style={[commonStyles.wrapper, { backgroundColor }]}>
+      {renderHeaderBar ? (
+        renderHeaderBar()
+      ) : (
+        <HeaderBar
+          backgroundColor={backgroundColor}
+          height={parallaxHeight}
+          leftTopIcon={leftTopIcon}
+          leftTopIconAccessibilityLabel={leftTopIconAccessibilityLabel}
+          leftTopIconOnPress={leftTopIconOnPress}
+          leftTopIconTestID={leftTopIconTestID}
+          rightTopIcon={rightTopIcon}
+          rightTopIconAccessibilityLabel={rightTopIconAccessibilityLabel}
+          rightTopIconOnPress={rightTopIconOnPress}
+          rightTopIconTestID={rightTopIconTestID}
+          scrollValue={scrollValue}
+          title={title}
+        />
+      )}
+      <View style={commonStyles.wrapper}>
+        <StickyHeaderSectionList
+          ref={scrollViewRef}
+          {...rest}
+          contentContainerStyle={contentContainerStyle}
+          decelerationRate={decelerationRate}
+          nestedScrollEnabled={nestedScrollEnabled}
+          onMomentumScrollEnd={onMomentumScrollEnd}
+          onScrollEndDrag={onScrollEndDrag}
+          onScroll={onScroll}
+          overScrollMode={overScrollMode}
+          renderHeader={renderHeader}
+          renderSectionFooter={renderSectionFooter}
+          renderSectionHeader={renderSectionHeader}
+          scrollEventThrottle={scrollEventThrottle}
+          sections={sections}
+          stickySectionHeadersEnabled={stickySectionHeadersEnabled}
+        />
+      </View>
+    </View>
+  );
+}
+
+type AvatarHeaderSectionListType = <ItemT, SectionT>(
+  props: AvatarHeaderSectionListProps<ItemT, SectionT> & RefAttributes<SectionList<ItemT, SectionT>>
+) => ReactElement;
+
+export const AvatarHeaderSectionList = forwardRef(
+  AvatarHeaderSectionListInner
+) as AvatarHeaderSectionListType;
diff --git a/src/predefinedComponents/AvatarHeader/components/HeaderBar.tsx b/src/predefinedComponents/AvatarHeader/components/HeaderBar.tsx
new file mode 100644
index 00000000..96a35572
--- /dev/null
+++ b/src/predefinedComponents/AvatarHeader/components/HeaderBar.tsx
@@ -0,0 +1,165 @@
+import type { FC } from 'react';
+import React from 'react';
+import type { ColorValue, ImageSourcePropType, ViewStyle } from 'react-native';
+import { Pressable, StyleSheet, View } from 'react-native';
+import Animated, { Extrapolate, interpolate, useAnimatedStyle } from 'react-native-reanimated';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import IconRenderer from '../../../components/IconRenderer/IconRenderer';
+import colors from '../../../constants/colors';
+import type { IconProps } from '../../common/SharedProps';
+import { useRTLStyles } from '../../common/hooks/useRTLStyles';
+import { scrollPosition } from '../../common/utils/scrollPosition';
+
+const HIT_SLOP = {
+  top: 15,
+  left: 15,
+  bottom: 15,
+  right: 15,
+};
+
+interface HeaderProps extends IconProps {
+  backgroundColor?: ColorValue;
+  height: number;
+  image?: ImageSourcePropType;
+  scrollValue: Animated.SharedValue<number>;
+  title?: string;
+}
+
+export const HeaderBar: FC<HeaderProps> = ({
+  backgroundColor,
+  height,
+  image,
+  leftTopIcon,
+  leftTopIconAccessibilityLabel,
+  leftTopIconOnPress,
+  leftTopIconTestID,
+  rightTopIcon,
+  rightTopIconAccessibilityLabel,
+  rightTopIconOnPress,
+  rightTopIconTestID,
+  scrollValue,
+  title,
+}) => {
+  const [beforeFadeImg, startFadeImg, finishFadeImg] = [
+    scrollPosition(height, 30),
+    scrollPosition(height, 40),
+    scrollPosition(height, 70),
+  ];
+  const [beforeFadeName, startFadeName, finishFadeName] = [
+    scrollPosition(height, 50),
+    scrollPosition(height, 60),
+    scrollPosition(height, 75),
+  ];
+
+  const imageAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: interpolate(
+        scrollValue.value,
+        [0, beforeFadeImg, startFadeImg, finishFadeImg],
+        [0, 0, 0.5, 1],
+        Extrapolate.CLAMP
+      ),
+    };
+  });
+  const nameAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: interpolate(
+        scrollValue.value,
+        [0, beforeFadeName, startFadeName, finishFadeName],
+        [0, 0, 0.5, 1],
+        Extrapolate.CLAMP
+      ),
+    };
+  });
+  const headerTitleContainerRTLStyle = useRTLStyles<ViewStyle>(
+    styles.headerTitleContainerMarginRight,
+    styles.headerTitleContainerMarginLeft,
+    styles.headerTitleContainerMarginEnd
+  );
+
+  return (
+    <SafeAreaView
+      edges={['left', 'top', 'right']}
+      style={[styles.headerWrapper, { backgroundColor }]}>
+      <View style={styles.headerMenu}>
+        <Pressable
+          accessibilityLabel={leftTopIconAccessibilityLabel}
+          accessibilityRole="button"
+          hitSlop={HIT_SLOP}
+          onPress={leftTopIconOnPress}
+          style={styles.leftHeaderButton}
+          testID={leftTopIconTestID}>
+          <IconRenderer icon={leftTopIcon} />
+        </Pressable>
+        <View style={[styles.headerTitleContainer, headerTitleContainerRTLStyle]}>
+          <Animated.Image
+            source={image as ImageSourcePropType}
+            style={[styles.headerPic, imageAnimatedStyle]}
+          />
+          <Animated.Text numberOfLines={1} style={[styles.headerTitle, nameAnimatedStyle]}>
+            {title}
+          </Animated.Text>
+        </View>
+        <Pressable
+          accessibilityLabel={rightTopIconAccessibilityLabel}
+          accessibilityRole="button"
+          hitSlop={HIT_SLOP}
+          onPress={rightTopIconOnPress}
+          style={styles.rightHeaderButton}
+          testID={rightTopIconTestID}>
+          <IconRenderer icon={rightTopIcon} />
+        </Pressable>
+      </View>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  headerMenu: {
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  headerPic: {
+    width: 32,
+    height: 32,
+    borderRadius: 8,
+  },
+  headerTitle: {
+    fontSize: 16,
+    lineHeight: 20,
+    color: colors.white,
+    marginHorizontal: 12,
+    textAlign: 'left',
+  },
+  headerTitleContainer: {
+    flex: 8,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  headerTitleContainerMarginEnd: {
+    marginEnd: 24,
+  },
+  headerTitleContainerMarginLeft: {
+    marginLeft: 24,
+  },
+  headerTitleContainerMarginRight: {
+    marginRight: 24,
+  },
+  headerWrapper: {
+    alignItems: 'center',
+    alignSelf: 'stretch',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+  },
+  leftHeaderButton: {
+    alignItems: 'flex-start',
+    flex: 1,
+  },
+  rightHeaderButton: {
+    flex: 1,
+    alignItems: 'flex-end',
+  },
+});
diff --git a/src/predefinedComponents/AvatarHeader/components/HeaderForeground.tsx b/src/predefinedComponents/AvatarHeader/components/HeaderForeground.tsx
new file mode 100644
index 00000000..156940b1
--- /dev/null
+++ b/src/predefinedComponents/AvatarHeader/components/HeaderForeground.tsx
@@ -0,0 +1,163 @@
+import type { FC } from 'react';
+import React from 'react';
+import type { ImageSourcePropType, ViewStyle } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
+import Animated, { Extrapolate, interpolate, useAnimatedStyle } from 'react-native-reanimated';
+
+import colors from '../../../constants/colors';
+import { useResponsiveSize } from '../../../hooks/useResponsiveSize';
+import { useRTLStyles } from '../../common/hooks/useRTLStyles';
+import { scrollPosition } from '../../common/utils/scrollPosition';
+
+interface ForegroundProps {
+  height: number;
+  image?: ImageSourcePropType;
+  scrollValue: Animated.SharedValue<number>;
+  subtitle?: string;
+  title?: string;
+}
+
+const finishImgPosition = 31;
+const startImgPosition = 27;
+
+export const Foreground: FC<ForegroundProps> = ({
+  height,
+  image,
+  scrollValue,
+  subtitle,
+  title,
+}) => {
+  const { responsiveWidth } = useResponsiveSize();
+  const profilePicBorderRadius = responsiveWidth(4.5);
+
+  const startSize = responsiveWidth(18);
+  const endSize = responsiveWidth(12);
+  const [startImgAnimation, finishImgAnimation] = [
+    scrollPosition(height, startImgPosition),
+    scrollPosition(height, finishImgPosition),
+  ];
+  const [startAuthorFade, finishAuthorFade] = [
+    scrollPosition(height, 40),
+    scrollPosition(height, 50),
+  ];
+  const [startAboutFade, fininshAboutFade] = [
+    scrollPosition(height, 60),
+    scrollPosition(height, 70),
+  ];
+
+  const imageOpacityAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: interpolate(
+        scrollValue.value,
+        [0, startImgAnimation, finishImgAnimation],
+        [1, 0.8, 0],
+        Extrapolate.CLAMP
+      ),
+    };
+  });
+  const imageAnimatedStyle = useAnimatedStyle(() => {
+    const imageSize = interpolate(
+      scrollValue.value,
+      [0, startImgAnimation, finishImgAnimation],
+      [startSize, startSize, endSize],
+      Extrapolate.CLAMP
+    );
+
+    return {
+      borderRadius: profilePicBorderRadius,
+      height: imageSize,
+      width: imageSize,
+    };
+  });
+  const authorAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: interpolate(
+        scrollValue.value,
+        [0, startAuthorFade, finishAuthorFade],
+        [1, 1, 0],
+        Extrapolate.CLAMP
+      ),
+    };
+  });
+  const aboutAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: interpolate(
+        scrollValue.value,
+        [0, startAboutFade, fininshAboutFade],
+        [1, 1, 0],
+        Extrapolate.CLAMP
+      ),
+    };
+  });
+  const foregroundTitleRTLStyle = useRTLStyles<ViewStyle>(
+    styles.foregroundTitlePaddingRight,
+    styles.foregroundTitlePaddingLeft,
+    styles.foregroundTitlePaddingEnd
+  );
+
+  return (
+    <View style={styles.foreground}>
+      <Animated.View style={imageOpacityAnimatedStyle}>
+        <Animated.Image source={image as ImageSourcePropType} style={imageAnimatedStyle} />
+      </Animated.View>
+      <Animated.View style={[styles.userModalMessageContainer, authorAnimatedStyle]}>
+        <Text
+          adjustsFontSizeToFit
+          numberOfLines={2}
+          style={[styles.message, styles.foregroundTitle, foregroundTitleRTLStyle]}>
+          {title}
+        </Text>
+      </Animated.View>
+      <Animated.View style={[styles.infoContainer, aboutAnimatedStyle]}>
+        <Text adjustsFontSizeToFit style={styles.infoText}>
+          {subtitle}
+        </Text>
+      </Animated.View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  foreground: {
+    flex: 1,
+    paddingHorizontal: 24,
+    justifyContent: 'flex-end',
+  },
+  foregroundTitle: {
+    flexGrow: 1,
+    textAlign: 'left',
+  },
+  foregroundTitlePaddingEnd: {
+    paddingEnd: 12,
+  },
+  foregroundTitlePaddingLeft: {
+    paddingLeft: 12,
+  },
+  foregroundTitlePaddingRight: {
+    paddingRight: 12,
+  },
+  infoContainer: {
+    flexDirection: 'row',
+    marginBottom: 16,
+  },
+  infoText: {
+    flexGrow: 1,
+    color: colors.white,
+    fontSize: 16,
+    lineHeight: 24,
+    textAlign: 'left',
+  },
+  message: {
+    color: colors.white,
+    fontSize: 72,
+    lineHeight: 85,
+    letterSpacing: -1,
+    textAlign: 'left',
+  },
+  userModalMessageContainer: {
+    alignItems: 'flex-start',
+    marginTop: 12,
+    paddingTop: 24,
+    paddingBottom: 8,
+  },
+});
diff --git a/src/predefinedComponents/AvatarHeader/useAvatarHeader.tsx b/src/predefinedComponents/AvatarHeader/useAvatarHeader.tsx
new file mode 100644
index 00000000..24d66c28
--- /dev/null
+++ b/src/predefinedComponents/AvatarHeader/useAvatarHeader.tsx
@@ -0,0 +1,74 @@
+import React, { useCallback } from 'react';
+
+import type { ScrollComponent } from '../common/SharedProps';
+import { HeaderWrapper } from '../common/components/HeaderWrapper';
+import { usePredefinedHeader } from '../common/hooks/usePredefinedHeader';
+
+import type { AvatarHeaderScrollViewProps } from './AvatarHeaderProps';
+import { Foreground } from './components/HeaderForeground';
+
+export function useAvatarHeader<T extends ScrollComponent>(props: AvatarHeaderScrollViewProps) {
+  const {
+    contentBackgroundColor,
+    onMomentumScrollEnd,
+    onScroll,
+    onScrollEndDrag,
+    parallaxHeight,
+    scrollHeight,
+    scrollValue,
+    scrollViewRef,
+  } = usePredefinedHeader<T>(props);
+  const {
+    backgroundColor,
+    backgroundImage,
+    hasBorderRadius,
+    image,
+    subtitle,
+    tabsContainerBackgroundColor,
+    title,
+  } = props;
+
+  const renderHeader = useCallback(() => {
+    return (
+      <HeaderWrapper
+        backgroundColor={backgroundColor}
+        backgroundImage={backgroundImage}
+        contentBackgroundColor={contentBackgroundColor}
+        hasBorderRadius={hasBorderRadius}
+        parallaxHeight={parallaxHeight}
+        scrollHeight={scrollHeight}
+        scrollValue={scrollValue}
+        tabsContainerBackgroundColor={tabsContainerBackgroundColor}>
+        <Foreground
+          height={parallaxHeight}
+          scrollValue={scrollValue}
+          image={image}
+          subtitle={subtitle}
+          title={title}
+        />
+      </HeaderWrapper>
+    );
+  }, [
+    backgroundColor,
+    backgroundImage,
+    contentBackgroundColor,
+    hasBorderRadius,
+    image,
+    parallaxHeight,
+    scrollHeight,
+    scrollValue,
+    subtitle,
+    tabsContainerBackgroundColor,
+    title,
+  ]);
+
+  return {
+    onMomentumScrollEnd,
+    onScroll,
+    onScrollEndDrag,
+    parallaxHeight,
+    renderHeader,
+    scrollValue,
+    scrollViewRef,
+  };
+}
diff --git a/src/predefinedComponents/common/SharedProps.ts b/src/predefinedComponents/common/SharedProps.ts
new file mode 100644
index 00000000..d9c1f24b
--- /dev/null
+++ b/src/predefinedComponents/common/SharedProps.ts
@@ -0,0 +1,61 @@
+import type { ReactElement } from 'react';
+import type {
+  ColorValue,
+  FlatList,
+  ImageSourcePropType,
+  NativeScrollEvent,
+  ScrollView,
+  SectionList,
+  StyleProp,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
+
+// FIXME: unknown does not work here :/
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type ScrollComponent = ScrollView | FlatList<any> | SectionList<any, any>;
+
+export interface IconProps {
+  leftTopIcon?: (() => ReactElement | null) | ImageSourcePropType;
+  leftTopIconAccessibilityLabel?: string;
+  leftTopIconOnPress?: () => void;
+  leftTopIconTestID?: string;
+  rightTopIcon?: (() => ReactElement | null) | ImageSourcePropType;
+  rightTopIconAccessibilityLabel?: string;
+  rightTopIconOnPress?: () => void;
+  rightTopIconTestID?: string;
+}
+
+export interface SharedPredefinedProps {
+  backgroundColor?: ColorValue;
+  backgroundImage?: ImageSourcePropType;
+  contentContainerStyle?: StyleProp<ViewStyle>;
+  headerHeight?: number;
+  onMomentumScrollEnd?: (e: NativeScrollEvent) => void;
+  onScroll?: (e: NativeScrollEvent) => void;
+  onScrollEndDrag?: (e: NativeScrollEvent) => void;
+  onTopReached?: () => void;
+  parallaxHeight?: number;
+  renderHeaderBar?: () => ReactElement | null;
+  snapStartThreshold?: number;
+  snapStopThreshold?: number;
+  snapToEdge?: boolean;
+}
+
+export interface Tab {
+  title?: string;
+  icon?: (ReactElement | null) | ((isActive: boolean) => ReactElement | null);
+}
+
+export interface TabsConfig {
+  tabTextActiveStyle?: StyleProp<TextStyle>;
+  tabTextContainerStyle?: StyleProp<ViewStyle>;
+  tabTextContainerActiveStyle?: StyleProp<ViewStyle>;
+  tabTextStyle?: StyleProp<TextStyle>;
+  tabUnderlineColor?: ColorValue;
+  tabWrapperStyle?: StyleProp<ViewStyle>;
+  tabs: Tab[];
+  tabsContainerBackgroundColor?: ColorValue;
+  tabsContainerHorizontalPadding?: number;
+  tabsContainerStyle?: StyleProp<ViewStyle>;
+}
diff --git a/src/predefinedComponents/common/components/HeaderBackground.tsx b/src/predefinedComponents/common/components/HeaderBackground.tsx
new file mode 100644
index 00000000..0ac559e5
--- /dev/null
+++ b/src/predefinedComponents/common/components/HeaderBackground.tsx
@@ -0,0 +1,48 @@
+import type { FC } from 'react';
+import React from 'react';
+import type { ColorValue } from 'react-native';
+import { StyleSheet } from 'react-native';
+import Animated, { Extrapolate, interpolate, useAnimatedStyle } from 'react-native-reanimated';
+
+import { colors } from '../../../constants';
+
+interface HeaderBackgroundProps {
+  backgroundColor?: ColorValue;
+  hasBorderRadius?: boolean;
+  height: number;
+  scrollValue: Animated.SharedValue<number>;
+}
+
+export const HeaderBackground: FC<HeaderBackgroundProps> = ({
+  backgroundColor,
+  hasBorderRadius,
+  height,
+  scrollValue,
+}) => {
+  const animatedStyle = useAnimatedStyle(() => {
+    if (!hasBorderRadius) {
+      return { borderBottomEndRadius: 0 };
+    }
+
+    return {
+      borderBottomEndRadius: interpolate(
+        scrollValue.value,
+        [0, height],
+        [80, 0],
+        Extrapolate.EXTEND
+      ),
+    };
+  }, [hasBorderRadius, height]);
+
+  return <Animated.View style={[styles.background, { backgroundColor }, animatedStyle]} />;
+};
+
+const styles = StyleSheet.create({
+  background: {
+    alignItems: 'flex-start',
+    alignSelf: 'stretch',
+    backgroundColor: colors.primaryGreen,
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
+});
diff --git a/src/predefinedComponents/common/components/HeaderBackgroundImage.tsx b/src/predefinedComponents/common/components/HeaderBackgroundImage.tsx
new file mode 100644
index 00000000..d102ce84
--- /dev/null
+++ b/src/predefinedComponents/common/components/HeaderBackgroundImage.tsx
@@ -0,0 +1,36 @@
+import type { ReactNode, VFC } from 'react';
+import React from 'react';
+import type { ImageSourcePropType } from 'react-native';
+import { ImageBackground, StyleSheet, useWindowDimensions } from 'react-native';
+
+interface HeaderBackgroundImageProps {
+  background: ReactNode;
+  backgroundHeight: number;
+  backgroundImage: ImageSourcePropType;
+}
+
+export const HeaderBackgroundImage: VFC<HeaderBackgroundImageProps> = ({
+  background,
+  backgroundHeight,
+  backgroundImage,
+}) => {
+  const { width } = useWindowDimensions();
+
+  return (
+    <ImageBackground
+      style={[styles.headerStyle, { height: backgroundHeight, width }]}
+      source={backgroundImage}>
+      {background}
+    </ImageBackground>
+  );
+};
+
+const styles = StyleSheet.create({
+  headerStyle: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    alignItems: 'flex-start',
+    justifyContent: 'flex-end',
+  },
+});
diff --git a/src/predefinedComponents/common/components/HeaderWrapper.tsx b/src/predefinedComponents/common/components/HeaderWrapper.tsx
new file mode 100644
index 00000000..dd2607b9
--- /dev/null
+++ b/src/predefinedComponents/common/components/HeaderWrapper.tsx
@@ -0,0 +1,85 @@
+import type { FC } from 'react';
+import React from 'react';
+import type { ColorValue, ImageSourcePropType } from 'react-native';
+import { StyleSheet, View, useWindowDimensions } from 'react-native';
+import type Animated from 'react-native-reanimated';
+
+import { colors } from '../../../constants';
+import { HeaderBackground } from './HeaderBackground';
+import { HeaderBackgroundImage } from './HeaderBackgroundImage';
+
+interface HeaderWrapperProps {
+  backgroundColor?: ColorValue;
+  backgroundImage?: ImageSourcePropType;
+  contentBackgroundColor?: ColorValue;
+  hasBorderRadius?: boolean;
+  parallaxHeight: number;
+  scrollHeight: number;
+  scrollValue: Animated.SharedValue<number>;
+  tabsContainerBackgroundColor?: ColorValue;
+}
+
+export const HeaderWrapper: FC<HeaderWrapperProps> = ({
+  backgroundColor,
+  backgroundImage,
+  children,
+  contentBackgroundColor,
+  hasBorderRadius,
+  parallaxHeight,
+  scrollHeight,
+  scrollValue,
+  tabsContainerBackgroundColor,
+}) => {
+  const { width } = useWindowDimensions();
+
+  return (
+    <View style={{ backgroundColor: contentBackgroundColor }}>
+      {backgroundImage ? (
+        <HeaderBackgroundImage
+          background={
+            <HeaderBackground
+              backgroundColor={backgroundColor}
+              hasBorderRadius={hasBorderRadius}
+              height={parallaxHeight}
+              scrollValue={scrollValue}
+            />
+          }
+          backgroundHeight={scrollHeight}
+          backgroundImage={backgroundImage}
+        />
+      ) : (
+        <View style={[styles.headerStyle, { height: scrollHeight }, { width }]}>
+          <HeaderBackground
+            backgroundColor={backgroundColor}
+            hasBorderRadius={hasBorderRadius}
+            height={parallaxHeight}
+            scrollValue={scrollValue}
+          />
+        </View>
+      )}
+      <View
+        style={[
+          {
+            height: scrollHeight,
+            backgroundColor: tabsContainerBackgroundColor,
+          },
+          !!backgroundImage && styles.transparentBackground,
+        ]}>
+        {children}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  headerStyle: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    alignItems: 'flex-start',
+    justifyContent: 'flex-end',
+  },
+  transparentBackground: {
+    backgroundColor: colors.transparent,
+  },
+});
diff --git a/src/predefinedComponents/common/hooks/usePredefinedHeader.tsx b/src/predefinedComponents/common/hooks/usePredefinedHeader.tsx
new file mode 100644
index 00000000..ea4abf65
--- /dev/null
+++ b/src/predefinedComponents/common/hooks/usePredefinedHeader.tsx
@@ -0,0 +1,46 @@
+import { useMemo } from 'react';
+import { StyleSheet, useWindowDimensions } from 'react-native';
+
+import { useResponsiveSize } from '../../../hooks/useResponsiveSize';
+import { useStickyHeaderScrollProps } from '../../../primitiveComponents/useStickyHeaderScrollProps';
+import type { ScrollComponent, SharedPredefinedProps } from '../SharedProps';
+
+export function usePredefinedHeader<T extends ScrollComponent>(props: SharedPredefinedProps) {
+  const { height } = useWindowDimensions();
+  const { responsiveHeight } = useResponsiveSize();
+
+  const {
+    onMomentumScrollEnd,
+    onScroll,
+    onScrollEndDrag,
+    scrollHeight,
+    scrollValue,
+    scrollViewRef,
+  } = useStickyHeaderScrollProps<T>(props);
+
+  const {
+    contentContainerStyle,
+    headerHeight = 100,
+    parallaxHeight = responsiveHeight(53),
+  } = props;
+
+  const innerScrollHeight = height - headerHeight - parallaxHeight;
+
+  const { contentBackgroundColor } = useMemo(() => {
+    const contentContainerFlattenedStyle = StyleSheet.flatten(contentContainerStyle);
+
+    return { contentBackgroundColor: contentContainerFlattenedStyle?.backgroundColor };
+  }, [contentContainerStyle]);
+
+  return {
+    contentBackgroundColor,
+    innerScrollHeight,
+    onMomentumScrollEnd,
+    onScroll,
+    onScrollEndDrag,
+    parallaxHeight,
+    scrollHeight,
+    scrollValue,
+    scrollViewRef,
+  };
+}
diff --git a/src/predefinedComponents/common/hooks/useRTLStyles.ts b/src/predefinedComponents/common/hooks/useRTLStyles.ts
new file mode 100644
index 00000000..75636513
--- /dev/null
+++ b/src/predefinedComponents/common/hooks/useRTLStyles.ts
@@ -0,0 +1,27 @@
+import { useMemo } from 'react';
+import { Platform, StyleProp } from 'react-native';
+import { I18nManager } from 'react-native';
+
+/**
+ * helper hook returning correct styles in rtl mode for Android and other platforms
+ *
+ * for some weird reason, padding/margin start/end does not work on Android
+ *
+ * example:
+ *
+ * const style = useRTLStyles<ViewStyle>({ paddingLeft: 5 }, { paddingRight: 5 }, { paddingStart: 5 })
+ */
+export function useRTLStyles<T>(
+  ltrStyle: StyleProp<T>,
+  rtlStyle: StyleProp<T>,
+  defaultStyle: StyleProp<T>
+) {
+  return useMemo(
+    () =>
+      Platform.select({
+        android: I18nManager.isRTL ? rtlStyle : ltrStyle,
+        default: defaultStyle,
+      }),
+    [defaultStyle, ltrStyle, rtlStyle]
+  );
+}
diff --git a/src/predefinedComponents/common/utils/scrollPosition.ts b/src/predefinedComponents/common/utils/scrollPosition.ts
new file mode 100644
index 00000000..6878eac6
--- /dev/null
+++ b/src/predefinedComponents/common/utils/scrollPosition.ts
@@ -0,0 +1,3 @@
+export function scrollPosition(headerHeight: number, value: number) {
+  return headerHeight * 0.01 * value;
+}
diff --git a/src/primitiveComponents/StickyHeaderProps.ts b/src/primitiveComponents/StickyHeaderProps.ts
index c1d1efcd..cd3ee629 100644
--- a/src/primitiveComponents/StickyHeaderProps.ts
+++ b/src/primitiveComponents/StickyHeaderProps.ts
@@ -31,6 +31,14 @@ export interface StickyHeaderSharedProps {
   style?: StyleProp<ViewStyle>;
 }
 
+export interface StickyHeaderSnapProps {
+  headerHeight?: number;
+  onTopReached?: () => void;
+  parallaxHeight?: number;
+  snapStartThreshold?: number;
+  snapStopThreshold?: number;
+  snapToEdge?: boolean;
+}
 export interface StickyHeaderScrollViewProps
   extends StickyHeaderSharedProps,
     Omit<
diff --git a/src/primitiveComponents/useStickyHeaderScrollProps.ts b/src/primitiveComponents/useStickyHeaderScrollProps.ts
new file mode 100644
index 00000000..4ffd647b
--- /dev/null
+++ b/src/primitiveComponents/useStickyHeaderScrollProps.ts
@@ -0,0 +1,133 @@
+import { useEffect, useRef } from 'react';
+import type { FlatList, NativeScrollEvent, ScrollView, SectionList } from 'react-native';
+import { Platform } from 'react-native';
+import {
+  runOnJS,
+  scrollTo,
+  useAnimatedReaction,
+  useAnimatedRef,
+  useSharedValue,
+  useWorkletCallback,
+} from 'react-native-reanimated';
+
+import { useResponsiveSize } from '../hooks/useResponsiveSize';
+import type { StickyHeaderSharedProps, StickyHeaderSnapProps } from './StickyHeaderProps';
+
+// FIXME: unknown does not work here :/
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type ScrollComponent = ScrollView | FlatList<any> | SectionList<any, any>;
+
+const VELOCITY_THRESHOLD = 7;
+
+export function useStickyHeaderScrollProps<T extends ScrollComponent>(
+  props: StickyHeaderSharedProps & StickyHeaderSnapProps
+) {
+  const { responsiveHeight } = useResponsiveSize();
+
+  const {
+    headerHeight = 100,
+    onMomentumScrollEnd,
+    onScroll,
+    onScrollEndDrag,
+    onTopReached,
+    parallaxHeight = responsiveHeight(53),
+    snapStartThreshold,
+    snapStopThreshold,
+    snapToEdge = true,
+  } = props;
+
+  const scrollValue = useSharedValue(0);
+
+  const scrollViewRef = useAnimatedRef<T>();
+
+  const onTopReachedRef = useRef(onTopReached);
+  const onTopReachedWasCalled = useRef(false);
+
+  useEffect(() => {
+    onTopReachedRef.current = onTopReached;
+  }, [onTopReached]);
+
+  function maybeTopReached(value: number) {
+    if (value <= 0) {
+      if (!onTopReachedWasCalled.current && onTopReachedRef.current) {
+        onTopReachedRef.current();
+        onTopReachedWasCalled.current = true;
+      }
+    } else {
+      onTopReachedWasCalled.current = false;
+    }
+  }
+
+  useAnimatedReaction(
+    () => scrollValue.value,
+    (value) => {
+      runOnJS(maybeTopReached)(value);
+    },
+    []
+  );
+
+  const scrollHeight = Math.max(parallaxHeight, headerHeight * 2);
+
+  const onSnapToEdge = useWorkletCallback((e: NativeScrollEvent) => {
+    const scrollToHeight = snapStopThreshold ?? scrollHeight;
+    const snapToEdgeThreshold = snapStartThreshold ?? scrollHeight / 2;
+
+    const currentVal = scrollValue.value;
+    const velocity = e.velocity?.y ?? 0;
+
+    const dragsToTop = velocity >= 0;
+    const dragsToBottom = !dragsToTop;
+    const dragsQuickToBottom = dragsToBottom && velocity <= -VELOCITY_THRESHOLD;
+    const dragsQuickToTop = dragsToTop && velocity >= VELOCITY_THRESHOLD;
+
+    const isUnderSnapToEdgeThresholdAndDragIsSlow =
+      currentVal > 0 && currentVal < snapToEdgeThreshold && !dragsQuickToBottom;
+    const isUnderSnapToEdgeThresholdAndDragIsQuick =
+      currentVal >= snapToEdgeThreshold / 2 &&
+      currentVal < snapToEdgeThreshold &&
+      dragsQuickToBottom;
+    const isOverSnapToEdgeThresholdAndDragIsSlow =
+      currentVal >= snapToEdgeThreshold && currentVal < scrollToHeight && !dragsQuickToTop;
+    const isOverSnapToEdgeThresholdAndDragIsQuick =
+      currentVal >= snapToEdgeThreshold && currentVal < scrollToHeight / 2 && dragsQuickToTop;
+
+    if (snapToEdge) {
+      if (isUnderSnapToEdgeThresholdAndDragIsSlow || isOverSnapToEdgeThresholdAndDragIsQuick) {
+        scrollTo(scrollViewRef, 0, 0, true);
+      } else if (
+        isOverSnapToEdgeThresholdAndDragIsSlow ||
+        isUnderSnapToEdgeThresholdAndDragIsQuick
+      ) {
+        scrollTo(scrollViewRef, 0, scrollHeight, true);
+      }
+    }
+  });
+
+  const onMomentumScrollEndInternal = useWorkletCallback((e: NativeScrollEvent) => {
+    onMomentumScrollEnd?.(e);
+    onSnapToEdge(e);
+  });
+
+  const onScrollEndDragInternal = useWorkletCallback((e: NativeScrollEvent) => {
+    onScrollEndDrag?.(e);
+    if (Platform.OS === 'android') {
+      return;
+    }
+
+    onSnapToEdge(e);
+  });
+
+  const onScrollInternal = useWorkletCallback((e: NativeScrollEvent) => {
+    scrollValue.value = e.contentOffset.y;
+    onScroll?.(e);
+  });
+
+  return {
+    onMomentumScrollEnd: onMomentumScrollEndInternal,
+    onScroll: onScrollInternal,
+    onScrollEndDrag: onScrollEndDragInternal,
+    scrollHeight,
+    scrollValue,
+    scrollViewRef,
+  };
+}
diff --git a/yarn.lock b/yarn.lock
index bf23a72d..cb908c78 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8151,6 +8151,11 @@ react-native-reanimated@2.3.1:
     react-native-screens "^3.4.0"
     string-hash-64 "^1.0.3"
 
+react-native-safe-area-context@3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-3.3.2.tgz#9549a2ce580f2374edb05e49d661258d1b8bcaed"
+  integrity sha512-yOwiiPJ1rk+/nfK13eafbpW6sKW0jOnsRem2C1LPJjM3tfTof6hlvV5eWHATye3XOpu2cJ7N+HdkUvUDGwFD2Q==
+
 react-native-screens@^3.4.0:
   version "3.13.1"
   resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-3.13.1.tgz#b3b1c5788dca25a71668909f66d87fb35c5c5241"