Feat/tabbed header section list

docs/docs/headers/avatar-header.md

@@ -101,10 +101,11 @@ Inherits [SectionListProps](https://reactnative.dev/docs/next/sectionlist#props)
 | snapStartThreshold | number | - |
 | snapStopThreshold | number | - |
 | snapToEdge | boolean | true |
-| tabsContainerBackgroundColor | color - `ColorValue` | - |
+| stickyTabs | boolean | true |
 | subtitle | string | - |
 | subtitleStyle | style - `StyleProp<TextStyle>` | - |
 | subtitleTestID | string | - |
+| tabsContainerBackgroundColor | color - `ColorValue` | - |
 | title | string | - |
 | titleStyle | style - `StyleProp<TextStyle>` | - |
 | titleTestID | string | - |

docs/docs/headers/custom-header.md

@@ -85,3 +85,4 @@ Inherits [SectionListProps](https://reactnative.dev/docs/next/sectionlist#props)
 | onTabsLayout | function - `(e: LayoutChangeEvent) => void` | - |
 | renderHeader | render function | - |
 | renderTabs | render function | - |
+| stickyTabs | boolean | true |

docs/docs/headers/details-header.md

@@ -105,6 +105,7 @@ Inherits [SectionListProps](https://reactnative.dev/docs/next/sectionlist#props)
 | snapStartThreshold | number | - |
 | snapStopThreshold | number | - |
 | snapToEdge | boolean | true |
+| stickyTabs | boolean | true |
 | subtitle | string | - |
 | subtitleStyle | style - `StyleProp<TextStyle>` | - |
 | subtitleTestID | string | - |

docs/docs/headers/tabbed-header-list.md

@@ -68,6 +68,7 @@ Inherits [SectionListProps](https://reactnative.dev/docs/next/sectionlist#props)
 | snapStartThreshold | number | - |
 | snapStopThreshold | number | - |
 | snapToEdge | boolean | true |
+| stickyTabs | boolean | true |
 | tabTextActiveStyle | style - `StyleProp<TextStyle>` | - |
 | tabTextContainerStyle | style - `StyleProp<ViewStyle>` | - |
 | tabTextContainerActiveStyle | style - `StyleProp<ViewStyle>` | - |

docs/docs/headers/tabbed-header-pager.md

@@ -39,6 +39,7 @@ Inherits [ScrollViewProps](https://reactnative.dev/docs/next/scrollview#props)
 | backgroundColor | color - `ColorValue` | - |
 | backgroundImage | image source - `ImageSourcePropType` | - |
 | containerStyle | style - `StyleProp<ViewStyle>` | - |
+| disableScrollToPosition | boolean | - |
 | foregroundImage | image source - `ImageSourcePropType` | - |
 | hasBorderRadius | boolean | - |
 | headerHeight | number | 100 |
@@ -47,7 +48,6 @@ Inherits [ScrollViewProps](https://reactnative.dev/docs/next/scrollview#props)
 | logoContainerStyle | style - `StyleProp<ViewStyle>` | - |
 | logoResizeMode | image resize mode - `ImageResizeMode` | - |
 | logoStyle | style - `StyleProp<ImageStyle>` | - |
-| offscreenPageLimit | number | 1 |
 | onChangeTab | function - `(prevPage: number, newPage: number) => void` | - |
 | onHeaderLayout | function - `(e: LayoutChangeEvent) => void` | - |
 | onMomentumScrollBegin | worklet function - `(e: NativeScrollEvent) => void` | - |
@@ -65,6 +65,7 @@ Inherits [ScrollViewProps](https://reactnative.dev/docs/next/scrollview#props)
 | snapStartThreshold | number | - |
 | snapStopThreshold | number | - |
 | snapToEdge | boolean | true |
+| stickyTabs | boolean | true |
 | tabTextActiveStyle | style - `StyleProp<TextStyle>` | - |
 | tabTextContainerStyle | style - `StyleProp<ViewStyle>` | - |
 | tabTextContainerActiveStyle | style - `StyleProp<ViewStyle>` | - |

docs/versioned_docs/version-1.0.x/headers/avatar-header.md

@@ -95,8 +95,11 @@ Inherits [SectionListProps](https://reactnative.dev/docs/next/sectionlist#props)
 | snapStartThreshold | number | - |
 | snapStopThreshold | number | - |
 | snapToEdge | boolean | true |
-| tabsContainerBackgroundColor | color - `ColorValue` | - |
+| stickyTabs | boolean | true |
 | subtitle | string | - |
 | subtitleStyle | style - `StyleProp<TextStyle>` | - |
+| subtitleTestID | string | - |
+| tabsContainerBackgroundColor | color - `ColorValue` | - |
 | title | string | - |
 | titleStyle | style - `StyleProp<TextStyle>` | - |
+| titleTestID | string | - |

docs/versioned_docs/version-1.0.x/headers/custom-header.md

@@ -85,3 +85,4 @@ Inherits [SectionListProps](https://reactnative.dev/docs/next/sectionlist#props)
 | onTabsLayout | function - `(e: LayoutChangeEvent) => void` | - |
 | renderHeader | render function | - |
 | renderTabs | render function | - |
+| stickyTabs | boolean | true |

docs/versioned_docs/version-1.0.x/headers/details-header.md

@@ -74,6 +74,7 @@ Inherits [SectionListProps](https://reactnative.dev/docs/next/sectionlist#props)
 | contentIcon | image source - `ImageSourcePropType` | - |
 | contentIconNumber | number | - |
 | contentIconNumberStyle | style - `StyleProp<TextStyle>` | - |
+| contentIconNumberTestID | string | - |
 | leftTopIcon | render function or image source | - |
 | leftTopIconAccessibilityLabel | string | - |
 | leftTopIconOnPress | function - `() => void` | - |
@@ -98,8 +99,14 @@ Inherits [SectionListProps](https://reactnative.dev/docs/next/sectionlist#props)
 | snapStartThreshold | number | - |
 | snapStopThreshold | number | - |
 | snapToEdge | boolean | true |
+| stickyTabs | boolean | true |
+| subtitle | string | - |
+| subtitleStyle | style - `StyleProp<TextStyle>` | - |
+| subtitleTestID | string | - |
 | tabsContainerBackgroundColor | color - `ColorValue` | - |
 | tag | string | - |
 | tagStyle | style - `StyleProp<TextStyle>` | - |
+| tagTestID | string | - |
 | title | string | - |
 | titleStyle | style - `StyleProp<TextStyle>` | - |
+| titleTestID | string | - |

docs/versioned_docs/version-1.0.x/headers/tabbed-header-list.md

@@ -66,6 +66,7 @@ Inherits [SectionListProps](https://reactnative.dev/docs/next/sectionlist#props)
 | snapStartThreshold | number | - |
 | snapStopThreshold | number | - |
 | snapToEdge | boolean | true |
+| stickyTabs | boolean | true |
 | tabTextActiveStyle | style - `StyleProp<TextStyle>` | - |
 | tabTextContainerStyle | style - `StyleProp<ViewStyle>` | - |
 | tabTextContainerActiveStyle | style - `StyleProp<ViewStyle>` | - |
@@ -78,6 +79,7 @@ Inherits [SectionListProps](https://reactnative.dev/docs/next/sectionlist#props)
 | tabsContainerStyle | style - `StyleProp<ViewStyle>` | - |
 | title | string | - |
 | titleStyle | style = `StyleProp<TextStyle>` | - |
+| titleTestID | string | - |
 
 ### Tab
 

docs/versioned_docs/version-1.0.x/headers/tabbed-header-pager.md

@@ -37,6 +37,7 @@ Inherits [ScrollViewProps](https://reactnative.dev/docs/next/scrollview#props)
 | backgroundColor | color - `ColorValue` | - |
 | backgroundImage | image source - `ImageSourcePropType` | - |
 | containerStyle | style - `StyleProp<ViewStyle>` | - |
+| disableScrollToPosition | boolean | - |
 | foregroundImage | image source - `ImageSourcePropType` | - |
 | hasBorderRadius | boolean | - |
 | headerHeight | number | 100 |
@@ -45,7 +46,6 @@ Inherits [ScrollViewProps](https://reactnative.dev/docs/next/scrollview#props)
 | logoContainerStyle | style - `StyleProp<ViewStyle>` | - |
 | logoResizeMode | image resize mode - `ImageResizeMode` | - |
 | logoStyle | style - `StyleProp<ImageStyle>` | - |
-| offscreenPageLimit | number | 1 |
 | onChangeTab | function - `(prevPage: number, newPage: number) => void` | - |
 | onHeaderLayout | function - `(e: LayoutChangeEvent) => void` | - |
 | onMomentumScrollBegin | worklet function - `(e: NativeScrollEvent) => void` | - |
@@ -63,6 +63,7 @@ Inherits [ScrollViewProps](https://reactnative.dev/docs/next/scrollview#props)
 | snapStartThreshold | number | - |
 | snapStopThreshold | number | - |
 | snapToEdge | boolean | true |
+| stickyTabs | boolean | true |
 | tabTextActiveStyle | style - `StyleProp<TextStyle>` | - |
 | tabTextContainerStyle | style - `StyleProp<ViewStyle>` | - |
 | tabTextContainerActiveStyle | style - `StyleProp<ViewStyle>` | - |
@@ -75,6 +76,7 @@ Inherits [ScrollViewProps](https://reactnative.dev/docs/next/scrollview#props)
 | tabsContainerStyle | style - `StyleProp<ViewStyle>` | - |
 | title | string | - |
 | titleStyle | style = `StyleProp<TextStyle>` | - |
+| titleTestID | string | - |
 
 ### Tab
 

example/src/navigation/AppNavigator.tsx

@@ -16,6 +16,7 @@ import {
   TabbedHeaderListExample,
   TabbedHeaderPagerExample,
 } from '../screens/additionalExamples';
+import { TabbedHeaderWithSectionListsExample } from '../screens/additionalExamples/TabbedHeaderWithSectionLists';
 
 import { ROUTES } from './routes';
 import type { RootStackParamList } from './types';
@@ -61,6 +62,10 @@ const AppNavigator: React.FC = () => (
         name={ROUTES.DETAILS_HEADER_SECTIONLIST}
         component={DetailsHeaderSectionListExample}
       />
+      <Stack.Screen
+        name={ROUTES.TABBED_HEADER_WITH_SECTION_LISTS}
+        component={TabbedHeaderWithSectionListsExample}
+      />
     </Stack.Navigator>
   </NavigationContainer>
 );

example/src/navigation/routes.ts

@@ -14,4 +14,5 @@ export const ROUTES = {
   DETAILS_HEADER_FLATLIST: 'DetailsHeaderFlatList' as const,
   DETAILS_HEADER_SCROLLVIEW: 'DetailsHeaderScrollView' as const,
   DETAILS_HEADER_SECTIONLIST: 'DetailsHeaderSectionList' as const,
+  TABBED_HEADER_WITH_SECTION_LISTS: 'TabbedHeaderWithSectionLists' as const,
 };

example/src/navigation/types.ts

@@ -21,6 +21,7 @@ export type RootStackParamList = {
   [ROUTES.DETAILS_HEADER_FLATLIST]: undefined;
   [ROUTES.DETAILS_HEADER_SCROLLVIEW]: undefined;
   [ROUTES.DETAILS_HEADER_SECTIONLIST]: undefined;
+  [ROUTES.TABBED_HEADER_WITH_SECTION_LISTS]: undefined;
 };
 
 export type RootStackNavigationProp = StackNavigationProp<RootStackParamList>;

example/src/screens/HomeScreen/ExampleLink.tsx

@@ -81,6 +81,11 @@ export const EXAMPLES: Array<ExampleLinkProps> = [
     label: 'Card Screen (SectionList)',
     testID: homeScreenTestIDs.detailsHeaderSectionListLink,
   },
+  {
+    routeName: ROUTES.TABBED_HEADER_WITH_SECTION_LISTS,
+    label: 'Tabbed Header with SectionList tabs',
+    testID: homeScreenTestIDs.tabbedHeaderWithSectionLists,
+  },
 ];
 
 export const ExampleLink: VFC<ExampleLinkProps> = ({ routeName, label, testID }) => {

example/src/screens/HomeScreen/index.tsx

@@ -117,7 +117,6 @@ const HomeScreen: VFC = () => {
         title={"Mornin' Mark! \nReady for a quiz?"}
         titleStyle={screenStyles.text}
         titleTestID={homeScreenTestIDs.headerTitle}
-        offscreenPageLimit={5}
         foregroundImage={photosPortraitMe}
         tabs={TABS.map((tab) => ({ title: tab.title, testID: tab.testID }))}
         tabTextStyle={screenStyles.text}

example/src/screens/HomeScreen/testIDs.ts

@@ -21,4 +21,5 @@ export const homeScreenTestIDs = Object.freeze({
   detailsHeaderFlatListLink: 'DetailsHeaderFlatListLinkTestID',
   detailsHeaderScrollViewLink: 'DetailsHeaderScrollViewLinkTestID',
   detailsHeaderSectionListLink: 'DetailsHeaderSectionListLinkTestID',
+  tabbedHeaderWithSectionLists: 'TabbedHeaderWithSectionListsTestID',
 });

example/src/screens/additionalExamples/TabbedHeaderWithSectionLists.tsx

@@ -0,0 +1,108 @@
+import type { FC } from 'react';
+import React from 'react';
+import type { SectionListData } from 'react-native';
+import { SectionList, StatusBar, StyleSheet, View, useColorScheme } from 'react-native';
+import { TabbedHeaderPager } from 'react-native-sticky-parallax-header';
+
+import type { Question } from '../../assets/data/cards';
+import { Brandon, Ewa, Jennifer } from '../../assets/data/cards';
+import { logo, photosPortraitMe } from '../../assets/images';
+import { QuizCard } from '../../components';
+import { TabbedSectionHeader } from '../../components/predefinedComponents/TabbedSectionHeader';
+import { colors, screenStyles } from '../../constants';
+
+import { tabbedHeaderTestIDs } from './testIDs';
+
+const QUIZ_SECTIONS: SectionListData<Question>[] = [
+  {
+    data: Brandon.cards,
+    key: Brandon.author,
+  },
+  {
+    data: Ewa.cards,
+    key: Ewa.author,
+  },
+  {
+    data: Jennifer.cards,
+    key: Jennifer.author,
+  },
+];
+
+const QUIZ_TAB_SECTIONS = [
+  {
+    title: Brandon.author,
+    testID: Brandon.author + 'QuizTestID',
+  },
+  {
+    title: Ewa.author,
+    testID: Ewa.author + 'QuizTestID',
+  },
+  {
+    title: Jennifer.author,
+    testID: Jennifer.author + 'QuizTestID',
+  },
+];
+
+const List: FC<{ startIndex: number }> = ({ startIndex }) => {
+  return (
+    <SectionList
+      sections={QUIZ_SECTIONS.slice(startIndex).concat(QUIZ_SECTIONS.slice(0, startIndex))}
+      stickySectionHeadersEnabled
+      renderItem={({ item, index, section }) => {
+        return <QuizCard data={item} num={index} cardsAmount={section.data.length} />;
+      }}
+      renderSectionHeader={({ section }) => {
+        return <TabbedSectionHeader tabTestID={section.key ?? ''} title={section.key ?? ''} />;
+      }}
+    />
+  );
+};
+
+export const TabbedHeaderWithSectionListsExample: FC = () => {
+  const isDarkTheme = useColorScheme() === 'dark';
+
+  return (
+    <>
+      <TabbedHeaderPager
+        contentContainerStyle={[
+          isDarkTheme ? screenStyles.darkBackground : screenStyles.lightBackground,
+        ]}
+        backgroundColor={colors.primaryGreen}
+        containerStyle={screenStyles.stretchContainer}
+        foregroundImage={photosPortraitMe}
+        disableScrollToPosition={true}
+        rememberTabScrollPosition={false}
+        logo={logo}
+        title={"Mornin' Mark! \nReady for a quiz?"}
+        titleStyle={screenStyles.text}
+        titleTestID={tabbedHeaderTestIDs.title}
+        stickyTabs={false}
+        tabs={QUIZ_TAB_SECTIONS.map((section) => ({
+          title: section.title,
+          testID: section.testID,
+        }))}
+        tabTextStyle={screenStyles.text}
+        showsVerticalScrollIndicator={false}>
+        <View style={styles.content}>
+          <List startIndex={0} />
+        </View>
+        <View style={styles.content}>
+          <List startIndex={1} />
+        </View>
+        <View style={styles.content}>
+          <List startIndex={2} />
+        </View>
+      </TabbedHeaderPager>
+      <StatusBar barStyle="light-content" backgroundColor={colors.primaryGreen} translucent />
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  content: {
+    alignItems: 'center',
+    alignSelf: 'stretch',
+    flex: 1,
+    paddingHorizontal: 24,
+  },
+});

src/predefinedComponents/TabbedHeader/TabbedHeaderPager.tsx

@@ -16,14 +16,14 @@ export const TabbedHeaderPager = forwardRef<ScrollView, TabbedHeaderPagerProps>(
     backgroundColor,
     children,
     contentContainerStyle,
+    disableScrollToPosition,
     decelerationRate = 'fast',
     initialPage,
     logo,
     logoContainerStyle,
     logoResizeMode,
     logoStyle,
     nestedScrollEnabled = true,
-    offscreenPageLimit,
     onChangeTab,
     overScrollMode = 'never',
     pagerProps,
@@ -79,9 +79,9 @@ export const TabbedHeaderPager = forwardRef<ScrollView, TabbedHeaderPagerProps>(
           scrollEventThrottle={scrollEventThrottle}>
           <Pager
             {...pagerProps}
+            disableScrollToPosition={disableScrollToPosition}
             initialPage={initialPage}
             minScrollHeight={innerScrollHeight}
-            offscreenPageLimit={offscreenPageLimit}
             onChangeTab={(prevPage, newPage) => {
               setCurrentPage(newPage);
               onChangeTab?.(prevPage, newPage);

src/predefinedComponents/TabbedHeader/TabbedHeaderProps.ts

@@ -24,9 +24,9 @@ export interface PagerMethods {
 
 /** TODO: do not export it when exporting module's components and types */
 export interface InternalPagerProps {
+  disableScrollToPosition?: boolean;
   initialPage?: number;
   minScrollHeight: number;
-  offscreenPageLimit?: number;
   onChangeTab?: (previousPage: number, newPage: number) => void;
   page: number;
   pageContainerStyle?: StyleProp<ViewStyle>;
@@ -77,14 +77,8 @@ export interface TabbedHeaderSharedProps extends SharedPredefinedProps, Partial<
 export interface TabbedHeaderPagerProps
   extends TabbedHeaderSharedProps,
     StickyHeaderScrollViewProps {
+  disableScrollToPosition?: boolean;
   initialPage?: number;
-  /**
-   * Set the number of pages that should be retained to either side of the currently visible page(s).
-   * Pages beyond this limit will be recreated when needed.
-   * Defaults to 1.
-   * The given value must be larger than 0.
-   */
-  offscreenPageLimit?: number;
   onChangeTab?: (prevPage: number, newPage: number) => void;
   pageContainerStyle?: StyleProp<ViewStyle>;
   pagerProps?: PagerProps & RefAttributes<PagerMethods>;

src/predefinedComponents/TabbedHeader/components/Pager.tsx

@@ -44,6 +44,7 @@ export const Pager = forwardRef<PagerMethods, PagerProps & InternalPagerProps>(
       contentContainerStyle,
       contentOffset: _contentOffset,
       directionalLockEnabled = true,
+      disableScrollToPosition,
       initialPage = 0,
       keyboardDismissMode = 'on-drag',
       minScrollHeight,
@@ -169,7 +170,7 @@ export const Pager = forwardRef<PagerMethods, PagerProps & InternalPagerProps>(
     }
 
     function handleScrollToTabPosition(prevPage: number, newPage: number) {
-      if (!data.length || scrollValue.value === 0) {
+      if (!data.length || scrollValue.value === 0 || disableScrollToPosition) {
         return;
       }