https://github.com/halilxibrahim/hexagon-mobile
Hexagon Grid Design with React Native
https://github.com/halilxibrahim/hexagon-mobile
cssanimations expo expo-cli mobile-app mobile-development react-native
Last synced: about 1 year ago
JSON representation
Hexagon Grid Design with React Native
- Host: GitHub
- URL: https://github.com/halilxibrahim/hexagon-mobile
- Owner: halilxibrahim
- Created: 2024-11-17T09:55:47.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-11-17T10:47:08.000Z (over 1 year ago)
- Last Synced: 2025-01-26T12:44:13.958Z (about 1 year ago)
- Topics: cssanimations, expo, expo-cli, mobile-app, mobile-development, react-native
- Language: JavaScript
- Homepage:
- Size: 138 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Hexagon Grid Design with React Native
Interactive and visually engaging hexagonal grid implementation built with **Expo**, **React Native**. This project features ripple animations, dynamic theme switching (light/dark modes), and coding-themed icons in a honeycomb structure.
https://github.com/user-attachments/assets/0f3fffce-2296-437e-b5d5-5ad877977b9d
## 🌟 Features
- **Interactive Animations**: Ripple effect on hexagons when pressed.
- **Dynamic Theme Switching**: Toggle between light and dark modes.
- **Responsive Design**: Optimized for various screen sizes.
- **Coding-Themed Icons**: Fun and relatable icons for developers.
## 🛠️ Built With
- **React Native**: Framework for building cross-platform mobile apps.
- **Expo**: Managed workflow for hassle-free development.
- **Animated API**: For smooth animations.
- **Dimensions API**: To adapt UI elements to different screen sizes.
## 🚀 Getting Started
### Installation
1. Clone this repository:
```bash
git clone https://github.com/halilxibrahim/hexagon-mobile.git
```
2. Navigate to the project directory:
```bash
cd hexagon-mobile
```
3. Install dependencies:
```bash
npm install
```
### Running the Project
1. Start the development server:
```bash
expo start
```
2. Scan the QR code using the Expo Go app on your mobile device or run the app on an emulator.
## 🔄 How It Works
### Honeycomb Layout
The grid is structured using a predefined `HONEYCOMB_STRUCTURE` array, determining the number of hexagons in each row.
### Ripple Animation
The ripple effect is achieved by calculating the distance from the pressed hexagon to others and triggering animations sequentially.
### Dynamic Themes
A `useState` hook toggles between light and dark themes, changing styles dynamically.
## 🤝 Contributing
Contributions are welcome! Please follow these steps:
1. Fork the repository.
2. Create a new branch (`feature/my-feature`).
3. Commit your changes (`git commit -m 'Add feature'`).
4. Push to the branch (`git push origin feature/my-feature`).
5. Open a Pull Request.
## 📄 License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
## 🐛 Issues
If you encounter any issues, please create an issue [here](https://github.com/halilxibrahim/hexagon-mobile/issues).
## 📬 Contact
- **Author**: Halil ibrahim Kamacı
- **GitHub**: [halilxibrahim](https://github.com/halilxibrahim)
- **LinkedIn**: [halilxibrahim](https://linkedin.com/in/halilxibrahim)