# arunabhverma/expo-fuse-carousel architecture

> Architecture diagram of the GitHub repository arunabhverma/expo-fuse-carousel, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-10-01). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/arunabhverma/expo-fuse-carousel
- Repository: https://github.com/arunabhverma/expo-fuse-carousel

## Overview

This is a small Expo/React Native carousel app, not a backend service. The user opens the tabbed interface, selects Home, and browses animated carousel cards with matching pagination; the other tabs currently show simple Earn, Security, and Settings screens. The root layout provides navigation theme and status-bar setup, while the tab layout configures tab navigation and its button/background components. Carousel data and screen implementations are only represented where supported by the file tree or source index; unsampled details are not inferred.

Main entry points: [`app/(tabs)/_layout.tsx`](https://github.com/arunabhverma/expo-fuse-carousel/blob/main/app/(tabs)/_layout.tsx) (Tab Layout), [`components/Carousel.tsx`](https://github.com/arunabhverma/expo-fuse-carousel/blob/main/components/Carousel.tsx) (Carousel), [`app/(tabs)/index.tsx`](https://github.com/arunabhverma/expo-fuse-carousel/blob/main/app/(tabs)/index.tsx) (Home Screen), [`app/_layout.tsx`](https://github.com/arunabhverma/expo-fuse-carousel/blob/main/app/_layout.tsx) (Root Layout)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["App Navigation"]
  node_root_layout["Root Layout<br/>[_layout.tsx]"]
  node_tab_layout["Tab Layout<br/>[_layout.tsx]"]
  node_haptic_tab["Haptic Tab Button<br/>[HapticTab.tsx]"]
  node_tab_background["Tab Background"]
  node_ios_background["iOS Blur Background"]
end

subgraph group_carousel["Carousel Experience"]
  node_carousel["Carousel<br/>[Carousel.tsx]"]
  node_carousel_data["Carousel Data<br/>[carousel-data.ts]"]
  node_render_item["Carousel Card<br/>[RenderItem.tsx]"]
  node_pagination["Pagination Dots<br/>[PaginationDots.tsx]"]
end

subgraph group_screens["Tab Screens"]
  node_home_screen["Home Screen<br/>[index.tsx]"]
  node_earn_screen["Earn Screen<br/>[earn.tsx]"]
  node_security_screen["Security Screen<br/>[security.tsx]"]
  node_settings_screen["Settings Screen<br/>[settings.tsx]"]
end

node_user(("App User"))

node_user -->|"opens app"| node_root_layout
node_root_layout -->|"routes to tabs"| node_tab_layout
node_user -->|"selects tab"| node_tab_layout
node_tab_layout -->|"registers route"| node_home_screen
node_tab_layout -->|"registers route"| node_earn_screen
node_tab_layout -->|"registers route"| node_security_screen
node_tab_layout -->|"registers route"| node_settings_screen
node_tab_layout -->|"uses button"| node_haptic_tab
node_tab_layout -->|"uses background"| node_tab_background
node_user -->|"views screen"| node_home_screen
node_home_screen -->|"renders"| node_carousel
node_carousel -->|"reads items"| node_carousel_data
node_carousel -->|"renders cards"| node_render_item
node_carousel -->|"renders dots"| node_pagination
node_render_item -->|"uses item type"| node_carousel_data

click node_root_layout "https://github.com/arunabhverma/expo-fuse-carousel/blob/main/app/_layout.tsx"
click node_tab_layout "https://github.com/arunabhverma/expo-fuse-carousel/blob/main/app/(tabs)/_layout.tsx"
click node_haptic_tab "https://github.com/arunabhverma/expo-fuse-carousel/blob/main/components/HapticTab.tsx"
click node_tab_background "https://github.com/arunabhverma/expo-fuse-carousel/blob/main/components/ui/TabBarBackground.tsx"
click node_ios_background "https://github.com/arunabhverma/expo-fuse-carousel/blob/main/components/ui/TabBarBackground.ios.tsx"
click node_home_screen "https://github.com/arunabhverma/expo-fuse-carousel/blob/main/app/(tabs)/index.tsx"
click node_earn_screen "https://github.com/arunabhverma/expo-fuse-carousel/blob/main/app/(tabs)/earn.tsx"
click node_security_screen "https://github.com/arunabhverma/expo-fuse-carousel/blob/main/app/(tabs)/security.tsx"
click node_settings_screen "https://github.com/arunabhverma/expo-fuse-carousel/blob/main/app/(tabs)/settings.tsx"
click node_carousel "https://github.com/arunabhverma/expo-fuse-carousel/blob/main/components/Carousel.tsx"
click node_carousel_data "https://github.com/arunabhverma/expo-fuse-carousel/blob/main/mock/carousel-data.ts"
click node_render_item "https://github.com/arunabhverma/expo-fuse-carousel/blob/main/components/RenderItem.tsx"
click node_pagination "https://github.com/arunabhverma/expo-fuse-carousel/blob/main/components/PaginationDots.tsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_root_layout,node_tab_layout,node_haptic_tab,node_tab_background,node_ios_background,node_user toneBlue
class node_carousel,node_carousel_data,node_render_item,node_pagination toneAmber
class node_home_screen,node_earn_screen,node_security_screen,node_settings_screen toneMint
```

## Components

### App Navigation

- [Root Layout](https://github.com/arunabhverma/expo-fuse-carousel/blob/main/app/_layout.tsx): `app/_layout.tsx`
- [Tab Layout](https://github.com/arunabhverma/expo-fuse-carousel/blob/main/app/(tabs)/_layout.tsx): `app/(tabs)/_layout.tsx`
- [Haptic Tab Button](https://github.com/arunabhverma/expo-fuse-carousel/blob/main/components/HapticTab.tsx): `components/HapticTab.tsx`
- [Tab Background](https://github.com/arunabhverma/expo-fuse-carousel/blob/main/components/ui/TabBarBackground.tsx): `components/ui/TabBarBackground.tsx`
- [iOS Blur Background](https://github.com/arunabhverma/expo-fuse-carousel/blob/main/components/ui/TabBarBackground.ios.tsx): `components/ui/TabBarBackground.ios.tsx`

### Carousel Experience

- [Carousel](https://github.com/arunabhverma/expo-fuse-carousel/blob/main/components/Carousel.tsx): `components/Carousel.tsx`
- [Carousel Data](https://github.com/arunabhverma/expo-fuse-carousel/blob/main/mock/carousel-data.ts): `mock/carousel-data.ts`
- [Carousel Card](https://github.com/arunabhverma/expo-fuse-carousel/blob/main/components/RenderItem.tsx): `components/RenderItem.tsx`
- [Pagination Dots](https://github.com/arunabhverma/expo-fuse-carousel/blob/main/components/PaginationDots.tsx): `components/PaginationDots.tsx`

### Tab Screens

- [Home Screen](https://github.com/arunabhverma/expo-fuse-carousel/blob/main/app/(tabs)/index.tsx): `app/(tabs)/index.tsx`
- [Earn Screen](https://github.com/arunabhverma/expo-fuse-carousel/blob/main/app/(tabs)/earn.tsx): `app/(tabs)/earn.tsx`
- [Security Screen](https://github.com/arunabhverma/expo-fuse-carousel/blob/main/app/(tabs)/security.tsx): `app/(tabs)/security.tsx`
- [Settings Screen](https://github.com/arunabhverma/expo-fuse-carousel/blob/main/app/(tabs)/settings.tsx): `app/(tabs)/settings.tsx`

### Other components

- **App User**

## Connections

- App User → Root Layout: opens app
- Root Layout → Tab Layout: routes to tabs (evidence: `app/_layout.tsx`)
- App User → Tab Layout: selects tab
- Tab Layout → Home Screen: registers route (evidence: `app/(tabs)/_layout.tsx`)
- Tab Layout → Earn Screen: registers route (evidence: `app/(tabs)/_layout.tsx`)
- Tab Layout → Security Screen: registers route (evidence: `app/(tabs)/_layout.tsx`)
- Tab Layout → Settings Screen: registers route (evidence: `app/(tabs)/_layout.tsx`)
- Tab Layout → Haptic Tab Button: uses button (evidence: `app/(tabs)/_layout.tsx`)
- Tab Layout → Tab Background: uses background (evidence: `app/(tabs)/_layout.tsx`)
- App User → Home Screen: views screen
- Home Screen → Carousel: renders (evidence: `app/(tabs)/index.tsx`)
- Carousel → Carousel Data: reads items (evidence: `components/Carousel.tsx`)
- Carousel → Carousel Card: renders cards (evidence: `components/Carousel.tsx`)
- Carousel → Pagination Dots: renders dots (evidence: `components/Carousel.tsx`)
- Carousel Card → Carousel Data: uses item type (evidence: `components/RenderItem.tsx`)