https://github.com/pakenfit/react-native-smooth-tabs-nativewind
A React Native/Expo educational project that demonstrates smooth tab animations and gesture handling with React Native Reanimated.
https://github.com/pakenfit/react-native-smooth-tabs-nativewind
expo nativewind react-native react-native-gesture-handler react-native-reanimated tabs tailwind
Last synced: about 2 months ago
JSON representation
A React Native/Expo educational project that demonstrates smooth tab animations and gesture handling with React Native Reanimated.
- Host: GitHub
- URL: https://github.com/pakenfit/react-native-smooth-tabs-nativewind
- Owner: pakenfit
- Created: 2025-09-20T08:29:46.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-09-20T17:33:24.000Z (10 months ago)
- Last Synced: 2025-10-05T21:58:29.393Z (9 months ago)
- Topics: expo, nativewind, react-native, react-native-gesture-handler, react-native-reanimated, tabs, tailwind
- Language: TypeScript
- Homepage:
- Size: 181 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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:
```bash
git clone
cd react-native-smooth-tabs
```
2. Install dependencies:
```bash
npm install
# or
bun install
```
3. Start the development server:
```bash
npm start
# or
bun start
```
4. Run on your preferred platform:
```bash
# 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