rn-custom-ui 1.0.0

package/src/components/customSlideTabs/AnimatedTabIndicator.tsx

@@ -0,0 +1,103 @@
+import { useEffect, useRef } from 'react';
+import { Animated, type StyleProp, type ViewStyle } from 'react-native';
+
+import { styles } from './styles';
+import { getIndicatorAtProgress, type TabLayoutMetric } from './tabBarScroll';
+
+type AnimatedTabIndicatorProps = {
+  metrics: TabLayoutMetric[];
+  pagerScrollX: Animated.Value;
+  tabBarScrollX: Animated.Value;
+  pageWidth: number;
+  initialScrollX?: number;
+  showPill?: boolean;
+  showUnderline?: boolean;
+  pillStyle?: StyleProp<ViewStyle>;
+  underlineStyle?: StyleProp<ViewStyle>;
+};
+
+const AnimatedTabIndicator = ({
+  metrics,
+  pagerScrollX,
+  tabBarScrollX,
+  pageWidth,
+  initialScrollX = 0,
+  showPill = true,
+  showUnderline = true,
+  pillStyle,
+  underlineStyle,
+}: AnimatedTabIndicatorProps) => {
+  const indicatorLeft = useRef(new Animated.Value(0)).current;
+  const indicatorWidth = useRef(new Animated.Value(0)).current;
+  const hasMetrics = metrics.some((metric) => metric.width > 0);
+
+  useEffect(() => {
+    if (!hasMetrics || pageWidth <= 0) {
+      return;
+    }
+
+    const updateIndicator = (scrollValue: number) => {
+      const progress = scrollValue / pageWidth;
+      const { left, width } = getIndicatorAtProgress(progress, metrics);
+      indicatorLeft.setValue(left);
+      indicatorWidth.setValue(width);
+    };
+
+    updateIndicator(initialScrollX);
+
+    const listenerId = pagerScrollX.addListener(({ value }) => {
+      updateIndicator(value);
+    });
+
+    return () => {
+      pagerScrollX.removeListener(listenerId);
+    };
+  }, [
+    hasMetrics,
+    indicatorLeft,
+    indicatorWidth,
+    initialScrollX,
+    metrics,
+    pageWidth,
+    pagerScrollX,
+  ]);
+
+  if (!hasMetrics) {
+    return null;
+  }
+
+  const animatedLeft = Animated.subtract(indicatorLeft, tabBarScrollX);
+
+  return (
+    <>
+      {showPill && (
+        <Animated.View
+          pointerEvents="none"
+          style={[
+            styles.indicatorPill,
+            pillStyle,
+            {
+              left: animatedLeft,
+              width: indicatorWidth,
+            },
+          ]}
+        />
+      )}
+      {showUnderline && (
+        <Animated.View
+          pointerEvents="none"
+          style={[
+            styles.indicatorUnderline,
+            underlineStyle,
+            {
+              left: animatedLeft,
+              width: indicatorWidth,
+            },
+          ]}
+        />
+      )}
+    </>
+  );
+};
+
+export default AnimatedTabIndicator;

package/src/components/customSlideTabs/TabBarItem.tsx

@@ -0,0 +1,118 @@
+import type { ReactNode } from 'react';
+import {
+  Image,
+  Pressable,
+  Text,
+  View,
+  type ImageStyle,
+  type LayoutChangeEvent,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+
+import { styles } from './styles';
+import type { SlideTabItem } from './types';
+
+type TabBarItemProps = {
+  item: SlideTabItem;
+  index: number;
+  isActive: boolean;
+  showUnderline?: boolean;
+  useAnimatedIndicator?: boolean;
+  onPress: (index: number) => void;
+  onMeasure?: (index: number, width: number) => void;
+  renderTab?: (
+    tab: SlideTabItem,
+    index: number,
+    isActive: boolean
+  ) => ReactNode;
+  tabStyle?: StyleProp<ViewStyle>;
+  activeTabStyle?: StyleProp<ViewStyle>;
+  tabTextStyle?: StyleProp<TextStyle>;
+  activeTabTextStyle?: StyleProp<TextStyle>;
+  tabImageStyle?: StyleProp<ImageStyle>;
+  activeTabImageStyle?: StyleProp<ImageStyle>;
+  underlineStyle?: StyleProp<ViewStyle>;
+};
+
+const TabBarItem = ({
+  item,
+  index,
+  isActive,
+  showUnderline = true,
+  useAnimatedIndicator = true,
+  onPress,
+  onMeasure,
+  renderTab,
+  tabStyle,
+  activeTabStyle,
+  tabTextStyle,
+  activeTabTextStyle,
+  tabImageStyle,
+  activeTabImageStyle,
+  underlineStyle,
+}: TabBarItemProps) => {
+  const Icon = item.LeftIcon;
+
+  const handleLayout = (event: LayoutChangeEvent) => {
+    onMeasure?.(index, event.nativeEvent.layout.width);
+  };
+
+  return (
+    <Pressable
+      accessibilityRole="tab"
+      accessibilityState={{ selected: isActive }}
+      accessibilityLabel={item.title}
+      onLayout={handleLayout}
+      onPress={() => onPress(index)}
+      style={[
+        styles.tabItem,
+        useAnimatedIndicator && styles.tabItemTransparent,
+        tabStyle,
+        !useAnimatedIndicator && isActive && styles.tabItemActive,
+        !useAnimatedIndicator && isActive && activeTabStyle,
+      ]}
+    >
+      {renderTab ? (
+        renderTab(item, index, isActive)
+      ) : (
+        <View style={styles.tabContent}>
+          {item.image && (
+            <Image
+              resizeMode="contain"
+              source={item.image}
+              style={[
+                styles.tabImage,
+                tabImageStyle,
+                isActive && styles.tabImageActive,
+                isActive && activeTabImageStyle,
+              ]}
+            />
+          )}
+          {Icon && <Icon size={18} color={isActive ? '#0D6EFD' : '#6C757D'} />}
+          <Text
+            style={[
+              styles.tabText,
+              tabTextStyle,
+              isActive && styles.tabTextActive,
+              isActive && activeTabTextStyle,
+            ]}
+          >
+            {item.title}
+          </Text>
+          {item.badge != null && (
+            <View style={styles.badge}>
+              <Text style={styles.badgeText}>{item.badge}</Text>
+            </View>
+          )}
+        </View>
+      )}
+      {showUnderline && isActive && !renderTab && !useAnimatedIndicator && (
+        <View style={[styles.underline, underlineStyle]} />
+      )}
+    </Pressable>
+  );
+};
+
+export default TabBarItem;

package/src/components/customSlideTabs/TabScene.tsx

@@ -0,0 +1,136 @@
+import { useEffect, useRef } from 'react';
+import { Text, View } from 'react-native';
+
+import { useApi } from '../../customHooks/useApi';
+import { styles } from './styles';
+import type {
+  CustomSlideTabsProps,
+  SlideTabItem,
+  SlideTabSceneState,
+} from './types';
+
+type TabSceneProps<TData, TError> = {
+  tab: SlideTabItem;
+  index: number;
+  isActive: boolean;
+  shouldMount: boolean;
+  fetchSceneData?: CustomSlideTabsProps<TData, TError>['fetchSceneData'];
+  fetchWhenActive: boolean;
+  refetchOnRevisit: boolean;
+  keepPreviousSceneData: boolean;
+  renderScene: CustomSlideTabsProps<TData, TError>['renderScene'];
+  renderSceneHeader?: CustomSlideTabsProps<TData, TError>['renderSceneHeader'];
+  showSceneHeading?: boolean;
+  sceneStyle?: CustomSlideTabsProps<TData, TError>['sceneStyle'];
+  sceneHeaderStyle?: CustomSlideTabsProps<TData, TError>['sceneHeaderStyle'];
+  sceneHeadingStyle?: CustomSlideTabsProps<TData, TError>['sceneHeadingStyle'];
+  sceneSubtitleStyle?: CustomSlideTabsProps<
+    TData,
+    TError
+  >['sceneSubtitleStyle'];
+};
+
+const TabScene = <TData, TError = unknown>({
+  tab,
+  index,
+  isActive,
+  shouldMount,
+  fetchSceneData,
+  fetchWhenActive,
+  refetchOnRevisit,
+  keepPreviousSceneData,
+  renderScene,
+  renderSceneHeader,
+  showSceneHeading = true,
+  sceneStyle,
+  sceneHeaderStyle,
+  sceneHeadingStyle,
+  sceneSubtitleStyle,
+}: TabSceneProps<TData, TError>) => {
+  const hasFetchedRef = useRef(false);
+
+  const shouldFetch =
+    Boolean(fetchSceneData) &&
+    fetchWhenActive &&
+    isActive &&
+    shouldMount &&
+    (refetchOnRevisit || !hasFetchedRef.current);
+
+  const api = useApi<TData, TError>(
+    (signal) => fetchSceneData!(tab, index, signal),
+    {
+      enabled: shouldFetch && Boolean(fetchSceneData),
+      keepPreviousData: keepPreviousSceneData,
+      deps: [tab.key, index],
+    }
+  );
+
+  useEffect(() => {
+    if (api.isSuccess) {
+      hasFetchedRef.current = true;
+    }
+  }, [api.isSuccess]);
+
+  if (!shouldMount) {
+    return (
+      <View style={[styles.scene, sceneStyle]}>
+        <View style={styles.scenePlaceholder}>
+          <Text style={styles.scenePlaceholderText}>
+            Swipe to open this tab
+          </Text>
+        </View>
+      </View>
+    );
+  }
+
+  const sceneState: SlideTabSceneState<TData, TError> = {
+    tab,
+    index,
+    isActive,
+    data: api.data,
+    error: api.error,
+    isIdle: api.isIdle,
+    isLoading: api.isLoading,
+    isSuccess: api.isSuccess,
+    isError: api.isError,
+    refetch: api.refetch,
+    reset: api.reset,
+  };
+
+  const heading = tab.heading ?? tab.title;
+  const hasDefaultHeader = showSceneHeading && (heading || tab.subtitle);
+
+  const renderHeader = () => {
+    if (renderSceneHeader) {
+      return renderSceneHeader(sceneState);
+    }
+
+    if (!hasDefaultHeader) {
+      return null;
+    }
+
+    return (
+      <View style={[styles.sceneHeader, sceneHeaderStyle]}>
+        {!!heading && (
+          <Text style={[styles.sceneHeading, sceneHeadingStyle]}>
+            {heading}
+          </Text>
+        )}
+        {!!tab.subtitle && (
+          <Text style={[styles.sceneSubtitle, sceneSubtitleStyle]}>
+            {tab.subtitle}
+          </Text>
+        )}
+      </View>
+    );
+  };
+
+  return (
+    <View style={[styles.scene, sceneStyle]}>
+      {renderHeader()}
+      {renderScene(sceneState)}
+    </View>
+  );
+};
+
+export default TabScene;