docs: add example for SingleTab

PedroBern · Apr 15, 2024 · 9c69642 · 9c69642
1 parent ed67c03
commit 9c69642
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 14 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -32,6 +32,7 @@ import RevealHeaderOnScroll from './RevealHeaderOnScroll'
 import RevealHeaderOnScrollSnap from './RevealHeaderOnScrollSnap'
 import ScrollOnHeader from './ScrollOnHeader'
 import ScrollableTabs from './ScrollableTabs'
+import SingleTab from './SingleTab'
 import Snap from './Snap'
 import StartOnSpecificTab from './StartOnSpecificTab'
 import UndefinedHeaderHeight from './UndefinedHeaderHeight'
@@ -61,6 +62,7 @@ const EXAMPLE_COMPONENTS: ExampleComponentType[] = [
   AnimatedHeader,
   AndroidSharedPullToRefresh,
   HeaderOverscrollExample,
+  SingleTab,
 ]
 
 const ExampleList: React.FC<object> = () => {

diff --git a/example/src/Shared/ExampleComponentFlashList.tsx b/example/src/Shared/ExampleComponentFlashList.tsx
@@ -13,18 +13,15 @@ import { HEADER_HEIGHT } from './Header'
 
 type Props = {
   emptyContacts?: boolean
-  hideArticleTab?: boolean
 } & Partial<CollapsibleProps>
 
 const Example = React.forwardRef<CollapsibleRef, Props>(
   ({ emptyContacts, ...props }, ref) => {
     return (
       <Tabs.Container ref={ref} headerHeight={HEADER_HEIGHT} lazy {...props}>
-        {props.hideArticleTab ? (
-          <Tabs.Tab name="article" label="Article">
-            <Article />
-          </Tabs.Tab>
-        ) : null}
+        <Tabs.Tab name="article" label="Article">
+          <Article />
+        </Tabs.Tab>
         <Tabs.Tab name="albums" label="Albums">
           <Albums />
         </Tabs.Tab>

diff --git a/example/src/Shared/ExampleComponentMasonryFlashList.tsx b/example/src/Shared/ExampleComponentMasonryFlashList.tsx
@@ -13,18 +13,15 @@ import { HEADER_HEIGHT } from './Header'
 
 type Props = {
   emptyContacts?: boolean
-  hideArticleTab?: boolean
 } & Partial<CollapsibleProps>
 
 const Example = React.forwardRef<CollapsibleRef, Props>(
   ({ emptyContacts, ...props }, ref) => {
     return (
       <Tabs.Container ref={ref} headerHeight={HEADER_HEIGHT} lazy {...props}>
-        {props.hideArticleTab ? (
-          <Tabs.Tab name="article" label="Article">
-            <Article />
-          </Tabs.Tab>
-        ) : null}
+        <Tabs.Tab name="article" label="Article">
+          <Article />
+        </Tabs.Tab>
         <Tabs.Tab name="albums" label="Albums">
           <Albums />
         </Tabs.Tab>

diff --git a/example/src/SingleTab.tsx b/example/src/SingleTab.tsx
@@ -0,0 +1,41 @@
+import React from 'react'
+import { StyleSheet } from 'react-native'
+import { Tabs, MaterialTabBar } from 'react-native-collapsible-tab-view'
+
+import { ArticleContent } from './Shared/Article'
+import { HEADER_HEIGHT, buildHeader } from './Shared/Header'
+import { ExampleComponentType } from './types'
+
+const title = 'Single Tab'
+
+const Header = buildHeader(title)
+
+const SingleTabExample: ExampleComponentType = () => {
+  return (
+    <Tabs.Container
+      renderHeader={Header}
+      headerHeight={HEADER_HEIGHT}
+      renderTabBar={(props) => (
+        <MaterialTabBar
+          {...props}
+          scrollEnabled
+          contentContainerStyle={styles.padding}
+        />
+      )}
+    >
+      <Tabs.Tab name="article" label="Article">
+        <Tabs.ScrollView>
+          <ArticleContent />
+        </Tabs.ScrollView>
+      </Tabs.Tab>
+    </Tabs.Container>
+  )
+}
+
+SingleTabExample.title = title
+
+export default SingleTabExample
+
+const styles = StyleSheet.create({
+  padding: { paddingHorizontal: 30 },
+})
diff --git a/src/MaterialTabBar/Indicator.tsx b/src/MaterialTabBar/Indicator.tsx
@@ -19,6 +19,8 @@ const Indicator: React.FC<IndicatorProps> = ({
   const opacity = useSharedValue(fadeIn ? 0 : 1)
 
   const stylez = useAnimatedStyle(() => {
+    const firstItemX = itemsLayout[0]?.x ?? 0
+
     const transform = [
       {
         translateX:
@@ -30,8 +32,8 @@ const Indicator: React.FC<IndicatorProps> = ({
                 itemsLayout.map((v) => (isRTL ? -1 * v.x : v.x))
               )
             : isRTL
-              ? -1 * itemsLayout[0]?.x
-              : itemsLayout[0]?.x,
+              ? -1 * firstItemX
+              : firstItemX,
       },
     ]