Merge pull request PedroBern#395 from Kerumen/fix/indicator-display-for-single-tab

fix: indicator display for single tab

Author: andreialecu

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> = () => {

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>

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>

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 },
+})

src/MaterialTabBar/Indicator.tsx

@@ -19,19 +19,23 @@ const Indicator: React.FC<IndicatorProps> = ({
   const opacity = useSharedValue(fadeIn ? 0 : 1)
 
   const stylez = useAnimatedStyle(() => {
-    const transform =
-      itemsLayout.length > 1
-        ? [
-            {
-              translateX: interpolate(
+    const firstItemX = itemsLayout[0]?.x ?? 0
+
+    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 * firstItemX
+              : firstItemX,
+      },
+    ]
 
     const width =
       itemsLayout.length > 1