tessl/npm-react-native-tab-view

Cross-platform Tab View component for React Native applications with swipeable, scrollable tab interfaces and smooth animations

—

Pending

Overview

Eval results

Files

Tab Bar Indicator

Name: tessl/npm-react-native-tab-view
Author: tessl

The TabBarIndicator component is an animated indicator that shows the active tab position. It automatically moves and resizes based on the current tab selection and supports both fixed and dynamic width configurations.

Capabilities

TabBarIndicator Component

Animated indicator component that highlights the currently active tab with smooth transitions.

/**
 * Animated indicator component for highlighting active tab
 * @param props - TabBarIndicator configuration and styling options
 * @returns JSX element containing the animated indicator
 */
function TabBarIndicator<T extends Route>(props: Props<T>): JSX.Element;

interface Props<T extends Route> extends SceneRendererProps {
  /** Required navigation state */
  navigationState: NavigationState<T>;
  /** Indicator width configuration - 'auto' for dynamic sizing or fixed values */
  width: 'auto' | `${number}%` | number;
  /** Function to get tab width by index for positioning calculations */
  getTabWidth: GetTabWidth;
  /** Text direction for RTL support */
  direction: LocaleDirection;
  /** Custom indicator styling */
  style?: StyleProp<ViewStyle>;
  /** Space between tabs for positioning calculations */
  gap?: number;
  /** Child components to render inside indicator */
  children?: React.ReactNode;
}

/**
 * Function type for getting tab width by index
 */
type GetTabWidth = (index: number) => number;

Usage Examples:

import React from 'react';
import { TabBar, TabBarIndicator } from 'react-native-tab-view';

// Custom indicator with fixed width
const renderTabBar = (props) => (
  <TabBar
    {...props}
    renderIndicator={(indicatorProps) => (
      <TabBarIndicator
        {...indicatorProps}
        width={100}
        style={{
          backgroundColor: '#ff4081',
          height: 4,
          borderRadius: 2,
        }}
      />
    )}
  />
);

// Dynamic width indicator (auto-sizing)
const renderTabBarWithAutoIndicator = (props) => (
  <TabBar
    {...props}
    renderIndicator={(indicatorProps) => (
      <TabBarIndicator
        {...indicatorProps}
        width="auto"
        style={{
          backgroundColor: '#2196f3',
          height: 3,
          bottom: 2,
        }}
      />
    )}
  />
);

// Percentage-based width indicator
const renderTabBarWithPercentIndicator = (props) => (
  <TabBar
    {...props}
    renderIndicator={(indicatorProps) => (
      <TabBarIndicator
        {...indicatorProps}
        width="80%"
        style={{
          backgroundColor: '#4caf50',
          height: 2,
          borderTopLeftRadius: 1,
          borderTopRightRadius: 1,
        }}
      />
    )}
  />
);

// Custom indicator with child content
const renderTabBarWithCustomIndicator = (props) => (
  <TabBar
    {...props}
    renderIndicator={(indicatorProps) => (
      <TabBarIndicator
        {...indicatorProps}
        width="auto"
        style={{
          backgroundColor: 'transparent',
          height: 6,
        }}
      >
        <View
          style={{
            flex: 1,
            backgroundColor: '#ffeb3b',
            borderRadius: 3,
            margin: 1,
          }}
        />
      </TabBarIndicator>
    )}
  />
);

Animation and Positioning

The indicator automatically animates between tab positions using React Native's Animated API.

/**
 * Animation configuration for indicator movement
 */
interface AnimationConfig {
  /** Whether to use native driver for animations */
  useNativeDriver: boolean;
  /** Animation easing function */
  easing: Animated.EasingFunction;
  /** Animation duration in milliseconds */
  duration: number;
}

Width Configuration Options

The indicator supports three width modes for different use cases:

Fixed Width (number):

Indicator maintains constant width regardless of tab size
Useful for consistent visual appearance across all tabs

Percentage Width ("${number}%"):

Indicator width is percentage of individual tab width
Scales proportionally with each tab

Auto Width ("auto"):

Indicator dynamically sizes to match each tab's content width
Provides the most natural appearance but requires tab width measurements

RTL Support

The indicator automatically adapts to right-to-left text direction.

/**
 * Text direction enumeration
 */
type LocaleDirection = 'ltr' | 'rtl';

RTL Examples:

// Automatic RTL detection
import { I18nManager } from 'react-native';

const direction = I18nManager.getConstants().isRTL ? 'rtl' : 'ltr';

const renderTabBar = (props) => (
  <TabBar
    {...props}
    direction={direction}
    renderIndicator={(indicatorProps) => (
      <TabBarIndicator
        {...indicatorProps}
        direction={direction}
      />
    )}
  />
);

Performance Optimization

The indicator uses optimized animations and memoization for smooth performance.

/**
 * Performance optimization features
 */
interface PerformanceFeatures {
  /** Uses React.memo for component optimization */
  memoized: boolean;
  /** Native driver animations for better performance */
  nativeDriver: boolean;
  /** Lazy opacity animations for auto-width indicators */
  lazyOpacity: boolean;
}

Platform-Specific Behavior

The indicator handles platform differences automatically:

Web Platform:

Uses different transform approach for better browser compatibility
Fallback positioning for browsers that don't support scaleX properly

Native Platforms:

Utilizes native animation drivers for optimal performance
Hardware acceleration for smooth transitions

Styling Customization

Complete control over indicator appearance through styling props.

/**
 * Default indicator styles that can be overridden
 */
interface DefaultStyles {
  /** Default background color */
  backgroundColor: '#ffeb3b';
  /** Default position */
  position: 'absolute';
  /** Default placement */
  start: 0;
  bottom: 0;
  end: 0;
  /** Default height */
  height: 2;
}

Advanced Styling Examples:

// Gradient indicator
const GradientIndicator = (props) => (
  <TabBarIndicator
    {...props}
    style={{ backgroundColor: 'transparent', height: 4 }}
  >
    <LinearGradient
      colors={['#ff4081', '#3f51b5']}
      start={{ x: 0, y: 0 }}
      end={{ x: 1, y: 0 }}
      style={{ flex: 1, borderRadius: 2 }}
    />
  </TabBarIndicator>
);

// Animated dot indicator
const DotIndicator = (props) => (
  <TabBarIndicator
    {...props}
    width={8}
    style={{
      backgroundColor: '#2196f3',
      height: 8,
      borderRadius: 4,
      bottom: -4,
    }}
  />
);

// Multi-layer indicator
const MultiLayerIndicator = (props) => (
  <TabBarIndicator
    {...props}
    style={{ backgroundColor: 'transparent', height: 6 }}
  >
    <View style={{ flex: 1, backgroundColor: '#e3f2fd', borderRadius: 3 }}>
      <View
        style={{
          height: 2,
          backgroundColor: '#1976d2',
          borderRadius: 1,
          margin: 2,
        }}
      />
    </View>
  </TabBarIndicator>
);

Install with Tessl CLI

npx tessl i tessl/npm-react-native-tab-view

docs