Skip to main content
Rajendra Kumar
React NativeMobile app

Abeona: Hotel, Suite & Event Space Marketplace

Two-sided React Native booking marketplace for rooms, suites, banquet halls and local experiences, with radius-based search, a map location picker and full English/Arabic (RTL) support.

Platform
Mobile app
Built with
React Native
Tech stack
7 technologies

Project highlights

  • Two apps in one: traveller booking flow and vendor operations portal
  • 5 km to 10 km radius search with a Google Maps location picker
  • Full English and Arabic support with right-to-left layouts
  • Unified booking state machine for hourly halls and multi-night stays

Overview

Abeona is a hospitality and event-space booking app for iOS and Android. Travellers discover and reserve rooms, extended-stay suites, wedding and event banquet halls and curated local activities, while hoteliers and venue managers run their inventory from a dedicated vendor portal. I led the mobile frontend architecture.

The problem

Travellers needed to find stays and event venues near them, and vendors needed one place to manage availability, rates and reservation requests. The product also had to feel native to Arabic-speaking users, not like a translated English app.

The solution

A dual-role app with a client booking flow and a vendor operations portal. Role-based routing, driven by the authenticated user's role, keeps browsing and property management in separate navigation stacks.

Discovery uses the device's GPS position with a 5 km to 10 km radius filter, a Google Maps location picker with pin dropping, and Google Places Autocomplete for landmark and address search. Place queries are debounced and recurring coordinates are cached to cut redundant Places API calls.

Rate trends, seasonal pricing and booking analytics are shown in custom animated graphs built on React Native's animation primitives, with animation work kept on the native UI thread.

The app ships in English and Arabic with a language switcher, translated key-value stores, font scaling and full right-to-left layout mirroring.

  • Sign-in

    the login screen has separate Service Provider and User Profile tabs, sign-in with a username, email or phone number, Facebook and Google options, and a language switch.

  • Vendor dashboard

    bookings and the amount collected, with week, month and year views and a daily bar chart, plus Home, Revenue, Booked and Account tabs.

  • Menu

    a side menu with favourites, notifications, payment, rate the app, help, language, terms and conditions and logout.

Architecture

  • Client search and vendor listings share one set of data contracts through a centralised service layer, so a listing edited by a vendor appears to travellers in the same shape.
  • Hourly hall bookings and multi-night room stays are modelled in a single booking state machine, so both inventory types move through the same request, confirmation and completion states.
  • The map view's state is decoupled from the property list state, so map interaction does not re-render the list.

Challenges solved

  • 1

    Dense marker clusters

    map view-state was separated from list state so panning, zooming and marker selection stay smooth with many properties on screen.

  • 2

    RTL regressions

    mirroring broke nested scrollable tabs and custom slider components. Enforcing logical layout rules (start/end instead of left/right), mirrored icons and asymmetric padding resolved them.

  • 3

    Two inventory models

    hourly and nightly bookings have different pricing and availability rules, which the unified state machine had to cover without special-casing each screen.

Outcomes

One codebase serves travellers and vendors in English and Arabic, with native-feeling RTL layouts for Middle Eastern markets, smooth animated charts and map interactions, and fewer redundant Places API calls.

Technology stack

  • React Native
  • TypeScript
  • Google Maps SDK
  • Google Places API
  • Reanimated
  • i18n
  • RTL layouts

Screenshots

  • Vendor dashboard with week, month and year views, bookings and amount collected, a daily bar chart and Home, Revenue, Booked and Account tabs
  • Sign-in screen with Service Provider and User Profile tabs, a language switch, email or phone and password fields, and Facebook and Google sign-in
  • Onboarding screen over a photo of an arched building with a Get Started button
  • Abeona splash screen with the logo and a loading message
  • Side menu with Favorites, Notification, Payment, Rate app, Help, Language, Terms and Conditions and Logout

More React Native work

Need something similar?

Tell me about your project and I will suggest a plan.

Start a conversation

All projects