React Native Smooth Tabs

A React Native/Expo educational project that demonstrates smooth tab animations and gesture handling with React Native Reanimated.

Features

• Smooth Tab Animations: Animated tab indicator that smoothly transitions between tabs
• Gesture Handling: Built with react-native-gesture-handler for responsive touch interactions
• Spring Animations: Uses react-native-reanimated for fluid tab transitions and scaling effects
• Modern UI: Styled with NativeWind (Tailwind CSS for React Native)
• Cross-Platform: Runs on iOS, Android, and Web using Expo

Tech Stack

• React Native with Expo Router
• TypeScript for type safety
• NativeWind for styling (Tailwind CSS)
• React Native Gesture Handler for touch gestures
• React Native Reanimated for animations
• Expo for cross-platform development

Getting Started

Prerequisites

• Node.js (v18 or later)
• Expo CLI (npm install -g @expo/cli)
• iOS Simulator (for iOS development) or Android Studio (for Android development)

Installation

1. Clone the repository:

git clone <repository-url>
cd react-native-smooth-tabs

2. Install dependencies:

npm install
# or
bun install

3. Start the development server:

npm start
# or
bun start

4. Run on your preferred platform:

# iOS
npm run ios
# or
bun run ios

# Android
npm run android
# or
bun run android

# Web
npm run web
# or
bun run web

Project Structure

├── app/                    # Expo Router pages
│   ├── _layout.tsx         # Root layout with gesture handler
│   ├── index.tsx          # Main home screen
│   └── +html.tsx          # HTML template for web
├── components/            # Reusable components
│   ├── tab-view.tsx       # Main tab container with animations
│   ├── tab-item.tsx       # Individual tab component
│   ├── container.tsx      # Safe area container
│   └── button.tsx         # Custom button component
├── lib/                   # Utility functions
│   └── utils.ts           # Helper functions (cn utility)
├── assets/                # Images and icons
└── global.css             # Global styles

How It Works

1. Tab Layout: The app displays a horizontal scrollable tab bar with movie categories
2. Gesture Detection: Tap gestures are detected on each tab item
3. Animation: Tab indicator smoothly animates to the selected tab position
4. Spring Physics: Uses spring animations for natural, responsive transitions
5. Layout Measurement: Each tab's position and size is measured for precise indicator positioning

Key Components

TabView

• Main container component that manages tab state and animations
• Handles tab selection and indicator positioning
• Implements spring animations for smooth transitions
• Measures tab layouts for precise indicator positioning

TabItem

• Individual tab component with press handling
• Implements scale animations for active/inactive states
• Measures its own layout for indicator positioning
• Handles tab press events and visual feedback

Development

Available Scripts

• npm start - Start Expo development server
• npm run ios - Run on iOS simulator
• npm run android - Run on Android emulator
• npm run web - Run in web browser
• npm run lint - Run ESLint and Prettier checks
• npm run format - Format code with ESLint and Prettier

Code Quality

The project uses:

• ESLint for code linting
• Prettier for code formatting
• TypeScript for type checking

Learning Objectives

This project demonstrates:

• React Native animation libraries (Reanimated)
• Layout measurement and positioning techniques
• Spring physics for natural animations
• Component state management with React hooks
• Cross-platform development with Expo
• Modern React Native development patterns
• TypeScript usage in React Native
• Gesture handling and touch interactions

Contributing

This is an educational project. Feel free to fork and experiment with:

• Adding more tab categories
• Implementing different animation effects (bounce, elastic, etc.)
• Adding tab icons or badges
• Creating different tab styles (segmented control, underline, etc.)
• Adding haptic feedback on tab selection
• Implementing tab content switching