Skip to content

da-war/ReactNative-AnimatedTab

Repository files navigation

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

2. Install Dependencies

Use npx expo or yarn or npm to install the required dependencies:

npx expo install
# OR
npm install
# OR
yarn install

3. Run the App

Run the app on iOS or Android using Expo:

npx expo start -c

🛠 Dependencies

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.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published