Design a mobile-friendly React Native UI for a blood donation app . The app should allow users to request blood, donate blood, and find donors based on their location. The UI should be intuitive, modern, and accessible, ensuring an easy user experience for hospitals, blood banks, and individual donors.
Key Features & Screens:
Onboarding & Authentication
Welcome screen with app logo and tagline User authentication (Sign up/Login) using email, phone number, or social login Location permission request for personalized blood donor matching Home Screen (Dashboard)
Clean dashboard with quick access buttons for: "Request Blood" "Donate Blood" "Find Donors Near Me" Real-time stats (Available donors, Urgent requests) Notification section for urgent donation alerts Blood Request Form
Input fields: Blood type, Units needed, Hospital/Location, Contact details Urgency level selection (Normal, Urgent, Emergency) Submit button with confirmation modal Find Blood Donors Nearby
Interactive map integration to show available donors and blood banks nearby Filter by blood type, distance, and availability Contact donor button with call/message option Donor Registration & Profile
User profile with: Name, Age, Blood Type Last donation date & eligibility status Toggle availability for blood donation Badge system for frequent donors Request Feed & Notifications
List of recent blood requests sorted by proximity & urgency Push notifications for urgent blood requests Admin Panel (Optional)
Verified requests and donor approval system Blood bank inventory tracking Design Preferences:
Color Theme: Red, White, and Soft Grey for a medical feel Typography: Clean and readable fonts Icons: Simple and intuitive Navigation: Bottom tab navigation with icons for Home, Requests, Donate, Profile
I'll create a modern, accessible React Native UI for a blood donation app with all the requested features.
This mobile-friendly React Native UI for a blood donation app includes all the requested features:
The UI follows the requested design preferences with a medical-themed color palette of red, white, and soft grey. The navigation uses a bottom tab system with intuitive icons for easy access to all main sections of the app.