https://github.com/stackmasteraliza/dr-smith
A React Native project that includes features like a bottom tab navigator with active tab highlighting, a step slider with icons, a profile picture with shadows, and various UI enhancements.
https://github.com/stackmasteraliza/dr-smith
Last synced: about 22 hours ago
JSON representation
A React Native project that includes features like a bottom tab navigator with active tab highlighting, a step slider with icons, a profile picture with shadows, and various UI enhancements.
- Host: GitHub
- URL: https://github.com/stackmasteraliza/dr-smith
- Owner: stackmasteraliza
- License: mit
- Created: 2025-01-30T11:54:47.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-30T12:05:28.000Z (about 1 year ago)
- Last Synced: 2025-01-30T12:32:42.151Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# React Native Project
## 📌 Overview
This is a **React Native** project that includes features like a bottom tab navigator with active tab highlighting, a step slider with icons, a profile picture with shadows, and various UI enhancements.
## 🚀 Features
- **Bottom Tab Navigation** with active tab indication.
- **Step Slider** that moves based on time and uses icons instead of numbers.
- **Profile Picture with Shadow** for a more aesthetic look.
- **Custom Styling** for a seamless and modern UI.
## 📂 Project Structure
```
/ProjectRoot
│── /assets # Image and static assets
│── /screens # App screens
│── /components # Reusable UI components
│── /constants # Colors, Dimensions, and other constants
│── App.tsx # Main app entry point
│── /routes # Handles navigation setup
│── package.json # Project dependencies
│── README.md # Project documentation
```
## 🛠 Installation
1. **Clone the repository:**
```sh
git clone https://github.com/stackmasteraliza/dr-smith
cd dr-amith
```
2. **Install dependencies:**
```sh
npm install
# or
yarn install
```
3. **Run the project:**
```sh
npx react-native run-android # For Android
npx react-native run-ios # For iOS
```
## 📌 Usage
- Navigate between screens using the bottom tab.
- Observe the step slider as it progresses based on time.
- The profile picture has an elegant shadow effect.
## 📷 Preview
## ✨ Dependencies
- **React Navigation**: For handling screen transitions.
- **react-native-vector-icons**: For custom icons in the step slider and navigation.
- **react-native-step-indicator**: For the animated step indicator component.
## 📜 License
This project is licensed under the MIT License.
---
Made with ❤️ by **Aliza ALi**