From ed67c03be57d67f91bab3172333166a8ba05b494 Mon Sep 17 00:00:00 2001
From: Yann Pringault <yann.pringault@gmail.com>
Date: Fri, 12 Apr 2024 17:48:12 +0200
Subject: [PATCH 1/2] fix: indicator display for single tab

---
 src/MaterialTabBar/Indicator.tsx | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/MaterialTabBar/Indicator.tsx b/src/MaterialTabBar/Indicator.tsx
index 6f8d718..9f17fd3 100644
--- a/src/MaterialTabBar/Indicator.tsx
+++ b/src/MaterialTabBar/Indicator.tsx
@@ -19,19 +19,21 @@ const Indicator: React.FC<IndicatorProps> = ({
   const opacity = useSharedValue(fadeIn ? 0 : 1)
 
   const stylez = useAnimatedStyle(() => {
-    const transform =
-      itemsLayout.length > 1
-        ? [
-            {
-              translateX: interpolate(
+    const transform = [
+      {
+        translateX:
+          itemsLayout.length > 1
+            ? interpolate(
                 indexDecimal.value,
                 itemsLayout.map((_, i) => i),
                 // when in RTL mode, the X value should be inverted
                 itemsLayout.map((v) => (isRTL ? -1 * v.x : v.x))
-              ),
-            },
-          ]
-        : undefined
+              )
+            : isRTL
+              ? -1 * itemsLayout[0]?.x
+              : itemsLayout[0]?.x,
+      },
+    ]
 
     const width =
       itemsLayout.length > 1

From 9c6964275f5845d0c8b739e0cdcb1836a57eb40e Mon Sep 17 00:00:00 2001
From: Andrei Alecu <andreialecu@users.noreply.github.com>
Date: Mon, 15 Apr 2024 11:57:55 +0300
Subject: [PATCH 2/2] docs: add example for SingleTab

---
 example/src/App.tsx                           |  2 +
 .../src/Shared/ExampleComponentFlashList.tsx  |  9 ++--
 .../ExampleComponentMasonryFlashList.tsx      |  9 ++--
 example/src/SingleTab.tsx                     | 41 +++++++++++++++++++
 src/MaterialTabBar/Indicator.tsx              |  6 ++-
 5 files changed, 53 insertions(+), 14 deletions(-)
 create mode 100644 example/src/SingleTab.tsx

diff --git a/example/src/App.tsx b/example/src/App.tsx
index 87b5516..79f1064 100644
--- 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
index 2ca75c6..f4fb8c9 100644
--- 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
index e3a00ad..acbfdcc 100644
--- 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
new file mode 100644
index 0000000..c5d7466
--- /dev/null
+++ 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
index 9f17fd3..360694c 100644
--- 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,
       },
     ]