https://github.com/sufyanism/gallery-application-in-react-native
A React Native Gallery Application that allows users to browse, view, and manage images seamlessly. Features include image grid display, full-screen viewer, image upload, and basic editing capabilities.
https://github.com/sufyanism/gallery-application-in-react-native
expo gallery-application react-native-app react-native-gallery-application
Last synced: about 1 month ago
JSON representation
A React Native Gallery Application that allows users to browse, view, and manage images seamlessly. Features include image grid display, full-screen viewer, image upload, and basic editing capabilities.
- Host: GitHub
- URL: https://github.com/sufyanism/gallery-application-in-react-native
- Owner: sufyanism
- Created: 2025-10-03T04:27:31.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-10-05T11:33:13.000Z (8 months ago)
- Last Synced: 2025-10-05T13:19:41.987Z (8 months ago)
- Topics: expo, gallery-application, react-native-app, react-native-gallery-application
- Language: JavaScript
- Homepage: https://code.zeba.academy/
- Size: 180 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Native Gallery App šø
A React Native mobile application built with [`@react-native-community/cli`](https://github.com/react-native-community/cli).
This app is a complete tutorial project by **Zeba Academy**, teaching how to build a beautiful and interactive **image gallery** using React Native.
## š Getting Started
### 1. Clone the repository
```sh
git clone https://github.com/sufyanism/gallery-application-in-react-native.git
cd react-native-gallery-app
```
### 2. Install dependencies
```sh
npm install
# OR
yarn install
```
### 3. Run the app
```sh
npm run android
# OR
npm run ios
```
## āØ Features
### š¼ Gallery Grid & Image Preview Modal
- Displays all images in a **2-column responsive grid**.
- Tap any image to **view it fullscreen** in a smooth modal view.
### š Search Bar & Filters
- Search images by **title or keyword**.
- Filter by categories: **All, Nature, Urban, Other, and Favorites.**
### ā¤ļø Favorites Feature
- Tap the **heart icon** to add/remove favorites.
- View only liked images by switching to the **Favorites category.**
## āļø Usage
- Use the search bar at the top to filter images by title.
- Tap category buttons to view filtered results.
- Tap an image to open it in fullscreen.
- Tap the heart icon to favorite/unfavorite.
- Close fullscreen preview using the **X button.**
## š§© Code Overview
- **App.jsx** handles all main logic: gallery, search, filters, favorites, and modal preview.
- Uses React Native components like `FlatList`, `Modal`, `TextInput`, and `TouchableOpacity`.
- State is managed using **React Hooks** (`useState`, `useRef`).
- **Animated API** is used for smooth favorite toggle effects.
## š Tech Stack
- [React Native](https://reactnative.dev)
- JavaScript / JSX
- React Hooks
- React Native Animated API
## š¹ Demo
https://github.com/user-attachments/assets/e85f7575-0bed-4df6-b64e-b10cabaacf19
## About Me
āØ Iām **Sufyan bin Uzayr**, an open-source developer passionate about building and sharing meaningful projects.
You can learn more about me and my work at [sufyanism.com](https://sufyanism.com/) or connect with me on [Linkedin](https://www.linkedin.com/in/sufyanism)
## Your all-in-one learning hub!
š Explore courses and resources in coding, tech, and development at **zeba.academy** and **code.zeba.academy**. Empower yourself with practical skills through curated tutorials, real-world projects, and hands-on experience. Level up your tech game today! š»āØ
**Zeba Academy** is a learning platform dedicated to **coding**, **technology**, and **development**.
ā” Visit our main site: [zeba.academy](https://zeba.academy)
ā” Explore hands-on courses and resources at: [code.zeba.academy](https://code.zeba.academy)
ā” Check out our YouTube for more tutorials: [zeba.academy](https://www.youtube.com/@zeba.academy)
ā” Follow us on Instagram: [zeba.academy](https://www.instagram.com/zeba.academy/)
**Thank you for visiting!**