Here’s the final version of your README.md
that includes the GIF from the project folder and mentions Expo SDK 51:
# 🚀 Custom Animated Tabs in React Native
![Custom Tabs Demo](./demo.gif)
## ✨ Overview
This project showcases a **custom animated tab component** built using **Expo SDK 51**, featuring:
- 🎨 **React Native Reanimated** for smooth and performant animations.
- 🎉 **Moti** for simplified animation creation and sequencing.
- 🔥 **Lucide React Native** for beautifully crafted icons.
### 🌟 Features
- **Animated transitions** with smooth enter/exit animations.
- **Interactive tabs** that respond to user selection with stunning effects.
- **Lucide icons** for a clean, modern look.
- **Cross-platform compatibility** with both iOS and Android using **Expo SDK 51**.
## 🎬 Demo
Here's a GIF showcasing the custom animated tabs in action:
![Tabs Animation](./demo.gif)
## 🛠️ Technologies Used
- **Expo SDK 51**: Fast and powerful development tools for React Native.
- **React Native Reanimated**: High-performance animations for React Native.
- **Moti**: Simplified animations in React Native.
- **Lucide React Native**: Customizable icons for a sleek UI.
- **TypeScript**: Ensures type safety and code maintainability.
## 🚀 Getting Started
Follow these steps to run the project locally:
### 1. Clone the Repository
```bash
git clone https://github.com/your-username/custom-animated-tabs.git
cd custom-animated-tabs
Use npx expo or yarn or npm to install the required dependencies:
npx expo install
# OR
npm install
# OR
yarn install
Run the app on iOS or Android using Expo:
npx expo start -c
Key libraries used in this project:
{
"expo": "~51.0.28",
"react-native-reanimated": "~3.10.1",
"moti": "^0.29.0",
"lucide-react-native": "^0.446.0",
}
## 🚀 Project Structure
- `_layout.tsx`: Main Entry File.
- `index.tsx/`: Contains the Main App File.
- `Tabs.tsx/`: Contains the Main App File.
## 📂 Assets
Make sure the GIF (`demo.gif`) is located in the root folder of the project:
/project └── demo.gif
---
Enjoy creating beautiful animations in your React Native apps with Expo! 🎉
In this template:
- The GIF of the demo (
demo.gif
) is expected to be in the root folder. - The project setup and structure are clearly explained.