https://github.com/dipanshkhandelwal/react-native-crazy-drawer
https://github.com/dipanshkhandelwal/react-native-crazy-drawer
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/dipanshkhandelwal/react-native-crazy-drawer
- Owner: DipanshKhandelwal
- Created: 2024-11-29T01:54:12.000Z (11 months ago)
- Default Branch: master
- Last Pushed: 2024-11-29T02:10:27.000Z (11 months ago)
- Last Synced: 2025-04-01T15:20:03.486Z (7 months ago)
- Language: TypeScript
- Size: 402 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Welcome to Crazy Drawer! 🎨
Are you struggling with implementing complex dribble designs? Look no further! This project is here to assist you in creating stunning and interactive UI designs with ease.
## Demo Video
Experience the magic in action by watching the demo video
https://github.com/user-attachments/assets/927086b9-9ec2-4667-9f98-d2a5efa597d9
## Technologies Used
This project leverages the following cutting-edge technologies to deliver a seamless experience:
- [Expo](https://expo.dev/): A framework for universal React applications.
- [@react-navigation](https://reactnavigation.org/): A library for routing and navigation in React Native apps.
- [@react-navigation/bottom-tabs](https://reactnavigation.org/docs/bottom-tab-navigator/): For creating bottom tab navigators.
- [@react-navigation/drawer](https://reactnavigation.org/docs/drawer-based-navigation/): For implementing drawer-based navigation.
- [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/): For creating smooth animations.
## Getting Started
Follow these simple steps to get up and running with this project:
1. **Install the necessary dependencies:**
Open your terminal and run the following command to install all required packages:
```bash
yarn
```
2. **Start the application:**
Once the dependencies are installed, start the application with:
```bash
yarn start
```
## System Overview
This project is designed to provide a flexible and dynamic user interface using React Native. It utilizes a combination of navigation libraries and animation tools to create a responsive and engaging user experience. The architecture is modular, allowing for easy customization and scalability.
## Approach to Navigation
This project adopts a robust approach using React Navigation to handle both simple and nested routes efficiently. By integrating both drawer and tab navigators, it provides users with intuitive navigation options:
- **Drawer Navigation**: Offers a side menu for easy access to different sections of the app. This is particularly useful for primary navigation.
- **Tab Navigation**: Provides a bottom tab bar for quick switching between key screens.
### Animation Wrapper
To enhance the user experience, this project implements an animation wrapper using `react-native-reanimated`. This wrapper handles animations for both simple and nested routes within the drawer navigation, ensuring smooth transitions and a polished look.
## Optimal Code Approach
Rather than building everything from scratch, this project improves upon existing libraries to achieve an optimal code approach. This allows leveraging the strengths of well-established libraries while customizing them to meet specific needs. This strategy not only saves development time but also ensures reliability and maintainability.
Enjoy using Crazy Drawer! If you have any questions or feedback, feel free to reach out. Happy coding! 🚀