### Install and Run Expo Linear-like Bottom Tabs

Source: https://github.com/rit3zh/expo-linear-like-bottom-tabs/blob/main/README.md

This snippet demonstrates the installation and execution commands for the expo-linear-like-bottom-tabs project. It includes cloning the repository, navigating into the directory, installing dependencies using bun, and running the application on iOS and Android simulators.

```bash
git clone https://github.com/rit3zh/expo-linear-like-bottom-tabs
cd expo-linear-like-bottom-tabs
bun install
bun ios
bun android
```

--------------------------------

### Gesture Handler for Swipe-Up Menu Expansion

Source: https://context7.com/rit3zh/expo-linear-like-bottom-tabs/llms.txt

Implements pan gesture recognition for controlling the expansion and collapse of a swipe-up menu. It uses react-native-gesture-handler and react-native-reanimated to manage gesture updates and animations. The handler triggers haptic feedback on gesture start and animates menu expansion/collapse based on swipe velocity and predefined thresholds.

```tsx
import { Gesture, GestureDetector } from "react-native-gesture-handler";
import { useSharedValue, withTiming, Easing } from "react-native-reanimated";
import * as Haptics from "expo-haptics";

function GestureExample() {
  const animationProgress = useSharedValue(0);
  const translationY = useSharedValue(0);

  const panGesture = Gesture.Pan()
    .onStart(async (event) => {
      await Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Rigid);
    })
    .onUpdate((event) => {
      translationY.value = event.translationY;
    })
    .onEnd((event) => {
      const velocity = event.velocityY;
      const threshold = 500;

      if (velocity < -threshold && animationProgress.value === 0) {
        // Expand menu
        animationProgress.value = withTiming(1, {
          duration: 400,
          easing: Easing.bezier(0.25, 0.1, 0.25, 1),
        });
      } else if (velocity > threshold && animationProgress.value === 1) {
        // Collapse menu
        animationProgress.value = withTiming(0, {
          duration: 400,
          easing: Easing.bezier(0.25, 0.1, 0.25, 1),
        });
      }

      translationY.value = 0;
    });

  return (
    <GestureDetector gesture={panGesture}>
      {/* Your content here */}
    </GestureDetector>
  );
}
```

--------------------------------

### Constants Configuration for Expo Bottom Tabs

Source: https://context7.com/rit3zh/expo-linear-like-bottom-tabs/llms.txt

Defines core animation and layout constants for consistent behavior in the tab navigator. It imports values like animation duration, menu item configurations, spring physics, and screen width. These constants are used to control animation timing, define expandable menu options, and manage layout based on device dimensions.

```typescript
import {
  ANIMATION_DURATION,
  EXPANDED_MENU_ITEMS,
  SPRING_CONFIG,
  WIDTH,
} from "@/constants";

// Animation duration in milliseconds
console.log(ANIMATION_DURATION); // 400

// Spring animation configuration
console.log(SPRING_CONFIG);
// { damping: 15, stiffness: 190, mass: 0.8 }

// Device screen width
console.log(WIDTH); // Dimensions.get("window").width

// Expanded menu items array
console.log(EXPANDED_MENU_ITEMS);
// [
//   { iconName: "home", label: "Home", route: "index" },
//   { iconName: "file-tray", label: "Inbox", route: "inbox" },
//   { iconName: "git-compare", label: "My Issues", route: "my-issues" },
//   ...
// ]
```

--------------------------------

### triggerHaptics Utility for Haptic Feedback

Source: https://context7.com/rit3zh/expo-linear-like-bottom-tabs/llms.txt

The triggerHaptics utility function provides customizable haptic feedback for user interactions. It allows control over intensity levels, from light to heavy, enhancing the user experience with tactile feedback. This utility is crucial for providing responsive feedback on touch events. Dependency: None external to React Native core.

```typescript
import { triggerHaptics } from "@/utils/trigger-haptics";

async function handleUserInteraction() {
  // Light haptic feedback (default)
  await triggerHaptics();

  // Soft haptic feedback
  await triggerHaptics("soft");

  // Normal (medium) haptic feedback
  await triggerHaptics("normal");

  // Heavy haptic feedback
  await triggerHaptics("heavy");
}
```

--------------------------------

### TypeScript Type Definitions for Tab Components

Source: https://context7.com/rit3zh/expo-linear-like-bottom-tabs/llms.txt

Provides comprehensive TypeScript type definitions for component props and data structures used in the tab navigator. This includes types for animated tab bar items, dummy tabs, expanded menu items, and their respective props. These definitions enhance code maintainability, prevent runtime errors, and improve developer experience by enabling static type checking.

```typescript
import { SharedValue } from "react-native-reanimated";
import { Ionicons } from "@expo/vector-icons";

type HapticFeedBackWeight = "soft" | "normal" | "heavy";

interface AnimatedTabProps {
  isFocused: boolean;
  options: any;
  colors: {
    primary: string;
    text: string;
  };
  onPress: () => void;
  onLongPress: () => void;
  animationProgress: SharedValue<number>;
  index: number;
}

interface DummyTabProps {
  animationProgress: SharedValue<number>;
  onPress?: () => void;
  colors: {
    primary: string;
    text: string;
  };
}

interface ExpandedMenuItem {
  iconName: keyof typeof Ionicons.glyphMap;
  label: string;
  route: string;
}

interface ExpandedMenuItemProps {
  item: ExpandedMenuItem;
  index: number;
  animationProgress: SharedValue<number>;
  totalItems: number;
  isSelected: boolean;
  onPress: () => void;
}
```

--------------------------------

### Configure Stylesheet for Linear-Like Bottom Tabs (TypeScript)

Source: https://context7.com/rit3zh/expo-linear-like-bottom-tabs/llms.txt

Defines the StyleSheet object used for styling the gesture container, floating bar, blur view, tabs, and menu items. This configuration ensures a consistent visual appearance across different components of the navigation bar. It relies on the 'react-native' StyleSheet API.

```typescript
import { StyleSheet } from "react-native";

const styles = StyleSheet.create({
  gestureContainer: {
    position: "absolute",
    bottom: 30,
    left: 20,
    right: 20,
  },
  floatingBarWrapper: {
    overflow: "hidden",
    backgroundColor: "transparent",
  },
  blurView: {
    flex: 1,
    width: "100%",
    height: "100%",
    justifyContent: "flex-end",
    backgroundColor: "transparent",
  },
  tab: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    borderRadius: 200,
    margin: 5,
    position: "relative",
  },
  tabBackground: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    borderRadius: 200,
    backgroundColor: "rgba(126, 126, 126, 0.1)",
  },
  menuItem: {
    flexDirection: "row",
    alignItems: "center",
    paddingVertical: 10,
    paddingHorizontal: 16,
    borderRadius: 99,
    position: "relative",
  },
  menuLabel: {
    fontSize: 15,
    fontWeight: "600",
    flex: 1,
  },
});
```

--------------------------------

### LinearTabBar Component for Expo Router Tabs

Source: https://context7.com/rit3zh/expo-linear-like-bottom-tabs/llms.txt

The main LinearTabBar component integrates with Expo Router's Tabs API to render a floating bottom tab bar. It supports custom press handlers for the main tab bar and individual menu items within an expandable menu. Dependencies include expo-router/tabs and @expo/vector-icons.

```tsx
import { LinearTabBar } from "@/components/linear-tab-bar";
import { Tabs } from "expo-router/tabs";
import { Ionicons } from "@expo/vector-icons";

export default function RootLayout() {
  const handleLinearTabPress = () => {
    console.log("Expand button pressed");
  };

  const handleMenuItemPress = (index: number) => {
    console.log(`Menu item ${index} selected`);
  };

  return (
    <Tabs
      tabBar={(props) => (
        <LinearTabBar
          {...props}
          onLinearTabPress={handleLinearTabPress}
          onMenuItemPress={handleMenuItemPress}
        />
      )}
      screenOptions={{
        headerShown: false,
        animation: "fade",
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          tabBarIcon: () => (
            <Ionicons name="home" size={24} color="#fff" />
          ),
        }}
      />
      <Tabs.Screen
        name="inbox"
        options={{
          tabBarIcon: () => (
            <Ionicons name="file-tray" size={24} color="#fff" />
          ),
        }}
      />
    </Tabs>
  );
}
```

--------------------------------

### DummyTab Component for Expand/Collapse Toggle

Source: https://context7.com/rit3zh/expo-linear-like-bottom-tabs/llms.txt

The DummyTab component serves as the special expand/collapse button for the tab bar. It visually toggles the expanded menu state and handles press events. It relies on react-native-reanimated for animations and accepts color props and a press handler. Dependency: react-native-reanimated.

```tsx
import { DummyTab } from "@/components/helpers/DummyTab";
import { useSharedValue } from "react-native-reanimated";

function ExpandButton() {
  const animationProgress = useSharedValue(0);
  const colors = { primary: "#5B6FE6", text: "#fff" };

  const handlePress = () => {
    console.log("Expand button toggled");
  };

  return (
    <DummyTab
      animationProgress={animationProgress}
      colors={colors}
      onPress={handlePress}
    />
  );
}
```

--------------------------------

### Animated Styles for Tab Bar Transitions

Source: https://context7.com/rit3zh/expo-linear-like-bottom-tabs/llms.txt

Defines interpolated styles for smooth transitions between collapsed and expanded states of the tab bar components. It utilizes react-native-reanimated's useAnimatedStyle hook to create dynamic styles based on an animation progress value. This enables animating properties like height, border radius, width, and opacity for different UI elements.

```tsx
import {
  useAnimatedStyle,
  interpolate,
  Extrapolation,
} from "react-native-reanimated";

function AnimatedStylesExample() {
  const animationProgress = useSharedValue(0);

  const animatedFloatingBarStyle = useAnimatedStyle(() => {
    const height = interpolate(
      animationProgress.value,
      [0, 0.4, 0.7, 1],
      [50, 50, 250, 400],
      Extrapolation.CLAMP
    );

    const borderRadius = interpolate(
      animationProgress.value,
      [0, 0.2, 1],
      [25, 100, 40],
      Extrapolation.CLAMP
    );

    const width = Dimensions.get("window").width - 150;

    return {
      height,
      borderRadius,
      width,
    };
  });

  const animatedOriginalTabBarStyle = useAnimatedStyle(() => {
    const opacity = interpolate(
      animationProgress.value,
      [0, 0.25, 0.4],
      [1, 0.2, 0],
      Extrapolation.CLAMP
    );

    return {
      opacity,
      pointerEvents: animationProgress.value > 0.25 ? "none" : "auto",
    };
  });

  return {
    animatedFloatingBarStyle,
    animatedOriginalTabBarStyle,
  };
}
```

--------------------------------

### ExpandedMenuItems Component for Menu Item Rendering

Source: https://context7.com/rit3zh/expo-linear-like-bottom-tabs/llms.txt

The ExpandedMenuItems component renders individual items within the expanded menu view, supporting staggered animations. It displays an icon and label, handles press events, and manages selection state. It uses react-native-reanimated for animations and requires item details, index, animation progress, total item count, and selection status. Dependencies: react-native-reanimated.

```tsx
import { ExpandedMenuItems } from "@/components/helpers/ExpandedMenuItem";
import { useSharedValue } from "react-native-reanimated";

function ExpandedMenu() {
  const animationProgress = useSharedValue(0);
  const [selectedIndex, setSelectedIndex] = useState(0);

  const menuItem = {
    iconName: "home" as const,
    label: "Home",
    route: "index",
  };

  const handlePress = () => {
    console.log("Menu item pressed");
    setSelectedIndex(0);
  };

  return (
    <ExpandedMenuItems
      item={menuItem}
      index={0}
      animationProgress={animationProgress}
      totalItems={8}
      isSelected={selectedIndex === 0}
      onPress={handlePress}
    />
  );
}
```

--------------------------------

### AnimatedTab Component for Individual Tabs

Source: https://context7.com/rit3zh/expo-linear-like-bottom-tabs/llms.txt

The AnimatedTab component represents an individual tab button within the tab bar, featuring focus animations and icon rendering. It utilizes react-native-reanimated for animations and accepts props for focus state, icons, colors, and press event handlers. Dependencies include react-native-reanimated and @expo/vector-icons.

```tsx
import { AnimatedTab } from "@/components/helpers/AnimatedTab";
import { useSharedValue } from "react-native-reanimated";
import { Ionicons } from "@expo/vector-icons";

function TabBarExample() {
  const animationProgress = useSharedValue(0);
  const colors = { primary: "#5B6FE6", text: "#fff" };

  const handlePress = () => {
    console.log("Tab pressed");
  };

  const handleLongPress = () => {
    console.log("Tab long pressed");
  };

  return (
    <AnimatedTab
      isFocused={true}
      options={{
        tabBarIcon: ({ focused, color }) => (
          <Ionicons
            name="home"
            size={24}
            color={focused ? "#5B6FE6" : "#888"}
          />
        ),
      }}
      colors={colors}
      onPress={handlePress}
      onLongPress={handleLongPress}
      animationProgress={animationProgress}
      index={0}
    />
  );
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.