rn-custom-ui 1.0.0

package/src/components/customSlideTabs/index.tsx

@@ -0,0 +1,385 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  Animated,
+  Dimensions,
+  FlatList,
+  View,
+  type LayoutChangeEvent,
+  type ListRenderItem,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
+} from 'react-native';
+
+import AnimatedTabIndicator from './AnimatedTabIndicator';
+import TabBarItem from './TabBarItem';
+import TabScene from './TabScene';
+import { styles } from './styles';
+import {
+  buildTabLayoutMetrics,
+  getCenteredTabScrollOffset,
+  getCenteredTabScrollOffsetFromProgress,
+  getMaxTabScrollOffset,
+} from './tabBarScroll';
+import type { CustomSlideTabsProps, SlideTabItem } from './types';
+
+const CustomSlideTabs = <TData = unknown, TError = unknown>({
+  tabs,
+  renderScene,
+  fetchSceneData,
+  initialIndex = 0,
+  lazy = true,
+  fetchWhenActive = true,
+  refetchOnRevisit = false,
+  keepPreviousSceneData = true,
+  onTabChange,
+  renderTab,
+  renderSceneHeader,
+  showSceneHeading = true,
+  animatedIndicator = true,
+  showUnderline = true,
+  tabBarStyle,
+  tabStyle,
+  activeTabStyle,
+  tabTextStyle,
+  activeTabTextStyle,
+  tabImageStyle,
+  activeTabImageStyle,
+  underlineStyle,
+  indicatorPillStyle,
+  sceneHeadingStyle,
+  sceneSubtitleStyle,
+  sceneHeaderStyle,
+  sceneContainerStyle,
+  sceneStyle,
+  pageWidth,
+}: CustomSlideTabsProps<TData, TError>) => {
+  const [selectedIndex, setSelectedIndex] = useState(initialIndex);
+  const [visitedIndexes, setVisitedIndexes] = useState<Set<number>>(
+    () => new Set([initialIndex])
+  );
+  const [containerWidth, setContainerWidth] = useState(
+    pageWidth ?? Dimensions.get('window').width
+  );
+  const [tabWidthsVersion, setTabWidthsVersion] = useState(0);
+
+  const tabListRef = useRef<FlatList<SlideTabItem> | null>(null);
+  const pagerRef = useRef<FlatList<SlideTabItem> | null>(null);
+  const tabWidthsRef = useRef<number[]>([]);
+  const tabBarWidthRef = useRef(0);
+  const tabBarScrollXRef = useRef(0);
+  const tabLayoutMetricsRef = useRef(buildTabLayoutMetrics([]));
+  const pagerScrollX = useRef(new Animated.Value(0)).current;
+  const tabBarScrollX = useRef(new Animated.Value(0)).current;
+
+  const resolvedWidth = pageWidth ?? containerWidth;
+
+  const tabWidthsSnapshot = useMemo(
+    () =>
+      tabs.map((_, index) =>
+        tabWidthsVersion >= 0 ? tabWidthsRef.current[index] : undefined
+      ),
+    [tabWidthsVersion, tabs]
+  );
+
+  const tabLayoutMetrics = useMemo(() => {
+    const metrics = buildTabLayoutMetrics(tabWidthsSnapshot);
+    tabLayoutMetricsRef.current = metrics;
+    return metrics;
+  }, [tabWidthsSnapshot]);
+
+  const applyTabBarScroll = useCallback(
+    (offset: number, animated: boolean) => {
+      const maxOffset = getMaxTabScrollOffset(
+        tabLayoutMetricsRef.current,
+        tabBarWidthRef.current
+      );
+      const safeOffset = Math.min(maxOffset, Math.max(0, offset));
+
+      tabListRef.current?.scrollToOffset({
+        offset: safeOffset,
+        animated,
+      });
+      tabBarScrollXRef.current = safeOffset;
+      tabBarScrollX.setValue(safeOffset);
+    },
+    [tabBarScrollX]
+  );
+
+  const scrollTabBarToIndex = useCallback(
+    (index: number, animated: boolean) => {
+      const nextOffset = getCenteredTabScrollOffset(
+        index,
+        tabLayoutMetricsRef.current,
+        tabBarWidthRef.current
+      );
+
+      if (nextOffset == null) {
+        return;
+      }
+
+      applyTabBarScroll(nextOffset, animated);
+    },
+    [applyTabBarScroll]
+  );
+
+  const scrollTabBarToProgress = useCallback(
+    (progress: number, animated: boolean) => {
+      const nextOffset = getCenteredTabScrollOffsetFromProgress(
+        progress,
+        tabLayoutMetricsRef.current,
+        tabBarWidthRef.current
+      );
+
+      if (nextOffset == null) {
+        return;
+      }
+
+      applyTabBarScroll(nextOffset, animated);
+    },
+    [applyTabBarScroll]
+  );
+
+  const handleTabMeasure = useCallback((index: number, width: number) => {
+    if (tabWidthsRef.current[index] === width) {
+      return;
+    }
+
+    tabWidthsRef.current[index] = width;
+    setTabWidthsVersion((current) => current + 1);
+  }, []);
+
+  const scrollPagerToIndex = useCallback((index: number, animated = true) => {
+    pagerRef.current?.scrollToIndex({ index, animated });
+  }, []);
+
+  const selectTab = useCallback(
+    (index: number, animated = true) => {
+      if (index < 0 || index >= tabs.length) {
+        return;
+      }
+
+      setSelectedIndex(index);
+      setVisitedIndexes((current) => {
+        const next = new Set(current);
+        next.add(index);
+        return next;
+      });
+      scrollPagerToIndex(index, animated);
+      onTabChange?.(index, tabs[index]!);
+    },
+    [onTabChange, scrollPagerToIndex, tabs]
+  );
+
+  const onPagerMomentumEnd = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const offsetX = event.nativeEvent.contentOffset.x;
+      const nextIndex = Math.round(offsetX / resolvedWidth);
+      const safeIndex = Math.max(0, Math.min(nextIndex, tabs.length - 1));
+
+      if (safeIndex !== selectedIndex) {
+        setSelectedIndex(safeIndex);
+        setVisitedIndexes((current) => {
+          const next = new Set(current);
+          next.add(safeIndex);
+          return next;
+        });
+        onTabChange?.(safeIndex, tabs[safeIndex]!);
+      }
+    },
+    [onTabChange, resolvedWidth, selectedIndex, tabs]
+  );
+
+  const onContainerLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      if (!pageWidth) {
+        setContainerWidth(event.nativeEvent.layout.width);
+      }
+    },
+    [pageWidth]
+  );
+
+  const onTabBarLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      tabBarWidthRef.current = event.nativeEvent.layout.width;
+      scrollTabBarToIndex(selectedIndex, false);
+    },
+    [scrollTabBarToIndex, selectedIndex]
+  );
+
+  const onTabBarScroll = useMemo(
+    () =>
+      Animated.event(
+        [{ nativeEvent: { contentOffset: { x: tabBarScrollX } } }],
+        {
+          useNativeDriver: false,
+          listener: (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+            tabBarScrollXRef.current = event.nativeEvent.contentOffset.x;
+          },
+        }
+      ),
+    [tabBarScrollX]
+  );
+
+  const onPagerScroll = useMemo(
+    () =>
+      Animated.event(
+        [{ nativeEvent: { contentOffset: { x: pagerScrollX } } }],
+        {
+          useNativeDriver: false,
+          listener: (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+            if (resolvedWidth <= 0) {
+              return;
+            }
+
+            const progress = event.nativeEvent.contentOffset.x / resolvedWidth;
+            scrollTabBarToProgress(progress, false);
+          },
+        }
+      ),
+    [pagerScrollX, resolvedWidth, scrollTabBarToProgress]
+  );
+
+  useEffect(() => {
+    pagerScrollX.setValue(initialIndex * resolvedWidth);
+  }, [initialIndex, pagerScrollX, resolvedWidth]);
+
+  useEffect(() => {
+    tabWidthsRef.current = [];
+    setTabWidthsVersion((current) => current + 1);
+  }, [tabs]);
+
+  useEffect(() => {
+    scrollPagerToIndex(initialIndex, false);
+    scrollTabBarToIndex(initialIndex, false);
+  }, [initialIndex, scrollPagerToIndex, scrollTabBarToIndex]);
+
+  useEffect(() => {
+    if (tabLayoutMetrics.some((metric) => metric.width > 0)) {
+      scrollTabBarToIndex(selectedIndex, false);
+    }
+  }, [tabLayoutMetrics, scrollTabBarToIndex, selectedIndex]);
+
+  const tabBarData = useMemo(() => tabs, [tabs]);
+
+  const renderPagerItem: ListRenderItem<SlideTabItem> = useCallback(
+    ({ item, index }) => (
+      <View style={{ width: resolvedWidth }}>
+        <TabScene
+          tab={item}
+          index={index}
+          isActive={selectedIndex === index}
+          shouldMount={!lazy || visitedIndexes.has(index)}
+          fetchSceneData={fetchSceneData}
+          fetchWhenActive={fetchWhenActive}
+          refetchOnRevisit={refetchOnRevisit}
+          keepPreviousSceneData={keepPreviousSceneData}
+          renderScene={renderScene}
+          renderSceneHeader={renderSceneHeader}
+          showSceneHeading={showSceneHeading}
+          sceneStyle={sceneStyle}
+          sceneHeaderStyle={sceneHeaderStyle}
+          sceneHeadingStyle={sceneHeadingStyle}
+          sceneSubtitleStyle={sceneSubtitleStyle}
+        />
+      </View>
+    ),
+    [
+      fetchSceneData,
+      fetchWhenActive,
+      keepPreviousSceneData,
+      lazy,
+      refetchOnRevisit,
+      renderScene,
+      renderSceneHeader,
+      resolvedWidth,
+      sceneHeaderStyle,
+      sceneHeadingStyle,
+      sceneStyle,
+      sceneSubtitleStyle,
+      selectedIndex,
+      showSceneHeading,
+      visitedIndexes,
+    ]
+  );
+
+  return (
+    <View style={styles.container} onLayout={onContainerLayout}>
+      <View style={[styles.tabBar, tabBarStyle]} onLayout={onTabBarLayout}>
+        {animatedIndicator && (
+          <AnimatedTabIndicator
+            metrics={tabLayoutMetrics}
+            pagerScrollX={pagerScrollX}
+            tabBarScrollX={tabBarScrollX}
+            pageWidth={resolvedWidth}
+            initialScrollX={selectedIndex * resolvedWidth}
+            showPill
+            showUnderline={showUnderline}
+            pillStyle={indicatorPillStyle}
+            underlineStyle={underlineStyle}
+          />
+        )}
+        <FlatList
+          ref={tabListRef}
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          data={tabBarData}
+          keyExtractor={(item) => item.key}
+          contentContainerStyle={styles.tabBarContent}
+          scrollEventThrottle={16}
+          onScroll={onTabBarScroll}
+          renderItem={({ item, index }) => (
+            <TabBarItem
+              item={item}
+              index={index}
+              isActive={selectedIndex === index}
+              showUnderline={showUnderline}
+              useAnimatedIndicator={animatedIndicator}
+              renderTab={renderTab}
+              tabStyle={tabStyle}
+              activeTabStyle={activeTabStyle}
+              tabTextStyle={tabTextStyle}
+              activeTabTextStyle={activeTabTextStyle}
+              tabImageStyle={tabImageStyle}
+              activeTabImageStyle={activeTabImageStyle}
+              underlineStyle={underlineStyle}
+              onMeasure={handleTabMeasure}
+              onPress={selectTab}
+            />
+          )}
+        />
+      </View>
+
+      <Animated.FlatList
+        ref={pagerRef}
+        horizontal
+        pagingEnabled
+        bounces={false}
+        scrollEventThrottle={16}
+        showsHorizontalScrollIndicator={false}
+        data={tabBarData}
+        keyExtractor={(item) => `scene-${item.key}`}
+        style={[styles.pager, sceneContainerStyle]}
+        getItemLayout={(_, index) => ({
+          length: resolvedWidth,
+          offset: resolvedWidth * index,
+          index,
+        })}
+        onScroll={onPagerScroll}
+        onMomentumScrollEnd={onPagerMomentumEnd}
+        onScrollToIndexFailed={({ index }) => {
+          setTimeout(() => scrollPagerToIndex(index), 100);
+        }}
+        renderItem={renderPagerItem}
+      />
+    </View>
+  );
+};
+
+export default CustomSlideTabs;
+export type {
+  CustomSlideTabsProps,
+  SlideTabItem,
+  SlideTabSceneState,
+  SlideTabFetcher,
+  SlideTabIconComponent,
+} from './types';

package/src/components/customSlideTabs/styles.ts

@@ -0,0 +1,136 @@
+import {
+  StyleSheet,
+  type ImageStyle,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  tabBar: {
+    flexGrow: 0,
+    position: 'relative',
+    overflow: 'hidden',
+  },
+  tabBarContent: {
+    paddingHorizontal: 12,
+    gap: 8,
+  },
+  tabItem: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    minWidth: 88,
+    zIndex: 1,
+  },
+  tabItemTransparent: {
+    backgroundColor: 'transparent',
+  },
+  tabItemActive: {
+    backgroundColor: '#E7F1FF',
+    borderRadius: 10,
+  },
+  tabContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  tabImage: {
+    width: 18,
+    height: 18,
+    opacity: 0.7,
+  },
+  tabImageActive: {
+    opacity: 1,
+  },
+  tabText: {
+    fontSize: 13,
+    fontWeight: '600',
+    color: '#6C757D',
+    textTransform: 'uppercase',
+    letterSpacing: 0.4,
+  },
+  tabTextActive: {
+    color: '#0D6EFD',
+  },
+  underline: {
+    marginTop: 8,
+    height: 3,
+    width: '100%',
+    borderRadius: 2,
+    backgroundColor: '#0D6EFD',
+  },
+  indicatorPill: {
+    position: 'absolute',
+    top: 6,
+    bottom: 6,
+    borderRadius: 10,
+    backgroundColor: '#E7F1FF',
+    zIndex: 0,
+  },
+  indicatorUnderline: {
+    position: 'absolute',
+    bottom: 0,
+    height: 3,
+    borderRadius: 2,
+    backgroundColor: '#0D6EFD',
+    zIndex: 2,
+  },
+  badge: {
+    minWidth: 18,
+    height: 18,
+    borderRadius: 9,
+    paddingHorizontal: 5,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#DC3545',
+  },
+  badgeText: {
+    fontSize: 10,
+    fontWeight: '700',
+    color: '#FFFFFF',
+  },
+  pager: {
+    flex: 1,
+  },
+  scene: {
+    flex: 1,
+  },
+  scenePlaceholder: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 20,
+  },
+  scenePlaceholderText: {
+    fontSize: 14,
+    color: '#6C757D',
+  },
+  sceneHeader: {
+    gap: 4,
+    marginBottom: 12,
+  },
+  sceneHeading: {
+    fontSize: 20,
+    fontWeight: '700',
+    color: '#212529',
+  },
+  sceneSubtitle: {
+    fontSize: 14,
+    color: '#6C757D',
+    lineHeight: 20,
+  },
+});
+
+export const defaultTheme = {
+  tabItem: styles.tabItem as ViewStyle,
+  tabItemActive: styles.tabItemActive as ViewStyle,
+  tabImage: styles.tabImage as ImageStyle,
+  tabImageActive: styles.tabImageActive as ImageStyle,
+  tabText: styles.tabText as TextStyle,
+  tabTextActive: styles.tabTextActive as TextStyle,
+  underline: styles.underline as ViewStyle,
+};

package/src/components/customSlideTabs/tabBarScroll.ts

@@ -0,0 +1,92 @@
+export const TAB_BAR_HORIZONTAL_PADDING = 12;
+export const TAB_BAR_ITEM_GAP = 8;
+
+export type TabLayoutMetric = {
+  offset: number;
+  width: number;
+};
+
+export const buildTabLayoutMetrics = (
+  widths: Array<number | undefined>
+): TabLayoutMetric[] => {
+  let offset = TAB_BAR_HORIZONTAL_PADDING;
+
+  return widths.map((width) => {
+    const safeWidth = width ?? 0;
+    const metric = { offset, width: safeWidth };
+    offset += safeWidth + TAB_BAR_ITEM_GAP;
+    return metric;
+  });
+};
+
+export const getMaxTabScrollOffset = (
+  metrics: TabLayoutMetric[],
+  tabBarWidth: number
+) => {
+  if (metrics.length === 0 || tabBarWidth <= 0) {
+    return 0;
+  }
+
+  const lastMetric = metrics[metrics.length - 1]!;
+  const contentWidth =
+    lastMetric.offset + lastMetric.width + TAB_BAR_HORIZONTAL_PADDING;
+
+  return Math.max(0, contentWidth - tabBarWidth);
+};
+
+export const getCenteredTabScrollOffset = (
+  index: number,
+  metrics: TabLayoutMetric[],
+  tabBarWidth: number
+): number | null => {
+  const layout = metrics[index];
+
+  if (!layout?.width || tabBarWidth <= 0) {
+    return null;
+  }
+
+  const tabCenter = layout.offset + layout.width / 2;
+  const maxOffset = getMaxTabScrollOffset(metrics, tabBarWidth);
+
+  return Math.min(maxOffset, Math.max(0, tabCenter - tabBarWidth / 2));
+};
+
+export const getCenteredTabScrollOffsetFromProgress = (
+  progress: number,
+  metrics: TabLayoutMetric[],
+  tabBarWidth: number
+): number | null => {
+  const { left, width } = getIndicatorAtProgress(progress, metrics);
+
+  if (width <= 0 || tabBarWidth <= 0) {
+    return null;
+  }
+
+  const tabCenter = left + width / 2;
+  const maxOffset = getMaxTabScrollOffset(metrics, tabBarWidth);
+
+  return Math.min(maxOffset, Math.max(0, tabCenter - tabBarWidth / 2));
+};
+
+export const getIndicatorAtProgress = (
+  progress: number,
+  metrics: TabLayoutMetric[]
+): { left: number; width: number } => {
+  if (metrics.length === 0) {
+    return { left: TAB_BAR_HORIZONTAL_PADDING, width: 0 };
+  }
+
+  const maxIndex = metrics.length - 1;
+  const clampedProgress = Math.max(0, Math.min(progress, maxIndex));
+  const baseIndex = Math.min(Math.floor(clampedProgress), maxIndex);
+  const nextIndex = Math.min(baseIndex + 1, maxIndex);
+  const blend = clampedProgress - baseIndex;
+
+  const current = metrics[baseIndex]!;
+  const next = metrics[nextIndex]!;
+
+  return {
+    left: current.offset + (next.offset - current.offset) * blend,
+    width: current.width + (next.width - current.width) * blend,
+  };
+};

package/src/components/customSlideTabs/types.ts

@@ -0,0 +1,87 @@
+import type { ComponentType, ReactNode } from 'react';
+import type {
+  ImageSourcePropType,
+  ImageStyle,
+  StyleProp,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
+
+import type { ApiFetcher } from '../../customHooks/types';
+
+export type SlideTabIconComponent = ComponentType<{
+  size?: number;
+  color?: string;
+  [key: string]: unknown;
+}>;
+
+export type SlideTabItem = {
+  key: string;
+  title: string;
+  /** Custom scene heading — defaults to title when omitted */
+  heading?: string;
+  /** Optional subtitle shown below scene heading */
+  subtitle?: string;
+  image?: ImageSourcePropType;
+  LeftIcon?: SlideTabIconComponent;
+  badge?: number | string;
+};
+
+export type SlideTabSceneState<TData, TError = unknown> = {
+  tab: SlideTabItem;
+  index: number;
+  isActive: boolean;
+  data: TData | null;
+  error: TError | null;
+  isIdle: boolean;
+  isLoading: boolean;
+  isSuccess: boolean;
+  isError: boolean;
+  refetch: () => Promise<TData | null | undefined>;
+  reset: () => void;
+};
+
+export type CustomSlideTabsProps<TData = unknown, TError = unknown> = {
+  tabs: SlideTabItem[];
+  renderScene: (state: SlideTabSceneState<TData, TError>) => ReactNode;
+  fetchSceneData?: (
+    tab: SlideTabItem,
+    index: number,
+    signal?: AbortSignal
+  ) => Promise<TData>;
+  initialIndex?: number;
+  lazy?: boolean;
+  fetchWhenActive?: boolean;
+  refetchOnRevisit?: boolean;
+  keepPreviousSceneData?: boolean;
+  onTabChange?: (index: number, tab: SlideTabItem) => void;
+  /** Fully custom tab label — overrides default title/image layout */
+  renderTab?: (
+    tab: SlideTabItem,
+    index: number,
+    isActive: boolean
+  ) => ReactNode;
+  /** Custom scene heading — overrides heading/subtitle from tab config */
+  renderSceneHeader?: (state: SlideTabSceneState<TData, TError>) => ReactNode;
+  showSceneHeading?: boolean;
+  /** Animated sliding pill + underline on the tab bar */
+  animatedIndicator?: boolean;
+  showUnderline?: boolean;
+  tabBarStyle?: StyleProp<ViewStyle>;
+  tabStyle?: StyleProp<ViewStyle>;
+  activeTabStyle?: StyleProp<ViewStyle>;
+  tabTextStyle?: StyleProp<TextStyle>;
+  activeTabTextStyle?: StyleProp<TextStyle>;
+  tabImageStyle?: StyleProp<ImageStyle>;
+  activeTabImageStyle?: StyleProp<ImageStyle>;
+  underlineStyle?: StyleProp<ViewStyle>;
+  indicatorPillStyle?: StyleProp<ViewStyle>;
+  sceneHeadingStyle?: StyleProp<TextStyle>;
+  sceneSubtitleStyle?: StyleProp<TextStyle>;
+  sceneHeaderStyle?: StyleProp<ViewStyle>;
+  sceneContainerStyle?: StyleProp<ViewStyle>;
+  sceneStyle?: StyleProp<ViewStyle>;
+  pageWidth?: number;
+};
+
+export type SlideTabFetcher<TData> = ApiFetcher<TData>;