Airbnb App Component
A modern React Native interface replicating Airbnb's design with Material Top Tabs navigation, search functionality, and smooth animations.
Features
- Material Top Tabs with swipe navigation
- BlurView Header with semi-transparent background
- Interactive Search Bar with TextInput
- Custom Tab Indicator with smooth animations
- Badge System for NEW items
- Responsive Design with proper styling
- Fast Navigation with optimized timing
Dependencies
bash
npm install @react-navigation/material-top-tabs
npm install react-native-tab-view
npm install react-native-reanimated
npm install expo-blurStructure
app/airbnb-app/
├── _layout.tsx # Main layout with tabs
├── homes.tsx # Property listings
├── experiences.tsx # Experience cards
├── services.tsx # Service offerings
└── README.md # This file
Usage
The component automatically creates three tabs:
- Homes - Property listings with images and ratings
- Experiences - Activities with duration and NEW badge
- Services - Booking services with NEW badge
Customization
Tab Configuration
typescript
const tabs = [
{
name: 'homes',
title: 'Homes',
icon: HourseImage,
iconType: 'image',
badge: null
},
// Add more tabs...
];Animation Settings
typescript
indicatorPosition.value = withTiming(indicatorPos, {
duration: 250,
easing: Easing.out(Easing.cubic),
});BlurView Intensity
typescript
<BlurView intensity={1} tint="extraLight">Styling
Uses StyleSheet.create() for organized styling with sections for:
- Layout containers
- Search bar
- Tab components
- Badge styling
- Animated indicator
Navigation
Integrated with Expo Router and Material Top Tabs for:
- Swipe gestures
- Tab press navigation
- Smooth transitions
- Responsive indicators
Perfect for modern app interfaces requiring clean navigation and visual appeal.