---
// React Native App Development — keyword-focused service landing page.
// Reuses GuaranteeBand, InlineLeadForm and ServiceFaq, and feeds Service + FAQ
// schema into SEO.astro.
//
// Case-study numbers are taken verbatim from the Pophealth entry on
// /portfolio: 10,000+ sessions · 100+ providers · 4.8★ rating.
import BaseLayout from '../../layouts/BaseLayout.astro';
import SEO from '../../components/SEO.astro';
import GuaranteeBand from '../../components/GuaranteeBand.astro';
import InlineLeadForm from '../../components/InlineLeadForm.astro';
import ServiceFaq from '../../components/ServiceFaq.astro';

const pageTitle = 'React Native App Development';
const pageDescription =
  'Cross-platform React Native & Expo app development — one codebase for iOS and Android, offline-first sync, push notifications, store-ready builds. WorkRoot ships apps rated 4.8★.';

const serviceName = 'React Native App Development';
const serviceDescription =
  'Cross-platform mobile app development with React Native and Expo — a single codebase shipped to both the App Store and Play Store, with offline-first architecture, push notifications, and Spring Boot backend integration. Proven with a health-sessions app handling 10,000+ sessions at a 4.8★ rating.';

const capabilities = [
  { title: 'One codebase, both stores', body: 'A single React Native/Expo codebase published to iOS and Android — no separate native teams to fund.' },
  { title: 'Offline-first sync', body: 'Apps that keep working through patchy connectivity and sync cleanly when back online — proven in the field.' },
  { title: 'Push notifications', body: 'Native push on both platforms for re-engagement, reminders, and transactional alerts.' },
  { title: 'Backend integration', body: 'Secure REST integration with Spring Boot and PostgreSQL/MySQL — the same backends behind our web platforms.' },
  { title: 'Store submission', body: 'We handle App Store and Play Store builds, review, and release — not just the code.' },
  { title: 'Native-like performance', body: 'Smooth, responsive UIs that feel native, with platform-aware navigation and gestures.' },
];

const stats = [
  { value: '3+', label: 'Mobile apps shipped' },
  { value: '10,000+', label: 'Sessions handled' },
  { value: '4.8★', label: 'User rating' },
  { value: '2', label: 'Stores, 1 codebase' },
];

// Comparison: cross-platform React Native vs two separate native builds.
const comparison = [
  { dimension: 'Codebases to maintain', native: 'Two (Swift + Kotlin)', rn: 'One (React Native/Expo)' },
  { dimension: 'Time to both stores', native: 'Two parallel builds', rn: 'Single build, ship together' },
  { dimension: 'Team needed', native: 'Separate iOS + Android engineers', rn: 'One cross-platform team' },
  { dimension: 'Feature parity', native: 'Drifts between platforms', rn: 'Identical features by default' },
  { dimension: 'Ongoing cost', native: 'Two maintenance tracks', rn: 'One maintenance track' },
  { dimension: 'Offline support', native: 'Built twice', rn: 'Built once, shared' },
];

const faqs = [
  {
    question: 'Why choose React Native over fully native apps?',
    answer:
      'React Native lets you ship one codebase to both the App Store and Play Store, so you fund a single cross-platform team instead of separate iOS and Android engineers, get identical features on both platforms, and maintain one codebase. For most products it is faster and cheaper to launch and to keep running, with native-like performance.',
  },
  {
    question: 'Do you publish to both the App Store and Play Store?',
    answer:
      'Yes. We handle the full release path — production builds with Expo/EAS, store metadata, review submission, and the first release — for both Apple’s App Store and Google Play. We can publish under your developer accounts or guide you through setting them up.',
  },
  {
    question: 'Can the app work offline?',
    answer:
      'Yes. We build offline-first architecture with local storage and background sync, so the app stays usable through poor connectivity and reconciles cleanly when the connection returns. Our Pophealth health-sessions app uses exactly this approach for field use.',
  },
  {
    question: 'How does the app connect to a backend?',
    answer:
      'Through secure REST APIs. We typically pair React Native apps with a Spring Boot backend and a PostgreSQL or MySQL database — the same backend stack behind our web and enterprise platforms — so your mobile and web products share one source of truth.',
  },
  {
    question: 'How long does it take to build a React Native app?',
    answer:
      'A focused MVP typically ships in around 6–12 weeks depending on the feature set and integrations. We work in 2-week sprints with a live build available early, so you can test on real devices and steer the roadmap as it develops.',
  },
  {
    question: 'What does a React Native app cost?',
    answer:
      'Mobile builds generally fall in the ₹2,00,000–₹15,00,000 range depending on scope, integrations, and whether a backend is included. Every quote is free, itemised, and fixed-price for well-defined scopes.',
  },
];
---

<BaseLayout title={pageTitle} description={pageDescription}>
  <SEO
    slot="head"
    type="Service"
    breadcrumbs={[
      { name: 'Home', url: '/' },
      { name: 'Services', url: '/services' },
      { name: 'React Native App Development', url: '/services/react-native-app-development' },
    ]}
    service={{ name: serviceName, description: serviceDescription }}
    faq={faqs}
  />

  <!-- Hero -->
  <section class="relative bg-gradient-to-br from-secondary-900 via-secondary-800 to-secondary-900 py-20 lg:py-28 overflow-hidden">
    <div class="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
      <div class="absolute top-1/4 left-0 w-80 h-80 bg-green-500/10 rounded-full blur-3xl animate-pulse-slower"></div>
      <div class="absolute bottom-0 right-1/4 w-96 h-96 bg-emerald-500/10 rounded-full blur-3xl animate-pulse-slow"></div>
      <div class="absolute inset-0 opacity-5" style="background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 60px 60px;"></div>
    </div>
    <div class="container-wrapper relative">
      <div class="max-w-3xl">
        <nav aria-label="Breadcrumb" class="mb-6">
          <ol class="flex flex-wrap items-center gap-2 text-sm text-secondary-400">
            <li><a href="/" class="hover:text-primary-300">Home</a></li>
            <li aria-hidden="true">/</li>
            <li><a href="/services" class="hover:text-primary-300">Services</a></li>
            <li aria-hidden="true">/</li>
            <li class="text-secondary-200" aria-current="page">React Native App Development</li>
          </ol>
        </nav>
        <span class="inline-flex items-center gap-2 px-4 py-1.5 mb-6 text-sm font-semibold text-green-300 bg-green-500/10 rounded-full border border-green-500/20">
          <span class="w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse" aria-hidden="true"></span>
          Cross-platform mobile
        </span>
        <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight">
          React Native apps for
          <span class="text-transparent bg-clip-text bg-gradient-to-r from-green-400 via-emerald-300 to-teal-300"> iOS and Android — from one codebase.</span>
        </h1>
        <p class="text-lg sm:text-xl text-secondary-300 max-w-2xl mb-8 leading-relaxed">
          Launch on both stores without the native-team overhead. We build offline-first React Native and Expo apps with push
          notifications and Spring Boot backends — and ship them store-ready. Our last health app holds a 4.8★ rating across
          10,000+ sessions.
        </p>
        <div class="flex flex-col sm:flex-row gap-4">
          <a href="#inline-lead-form" data-cta="rn-hero-primary" class="inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-primary-500 to-primary-600 px-8 py-4 text-base font-bold text-white shadow-lg hover:shadow-xl hover:scale-105 transition-all focus:outline-none focus:ring-2 focus:ring-primary-400 focus:ring-offset-2 focus:ring-offset-secondary-900">
            Get my free app scope
            <svg class="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M17 8l4 4m0 0l-4 4m4-4H3" /></svg>
          </a>
          <a href="tel:+919561417403" data-cta="rn-hero-call" class="inline-flex items-center justify-center rounded-xl border-2 border-white/30 bg-white/5 px-8 py-4 text-base font-bold text-white hover:bg-white/10 transition-all focus:outline-none focus:ring-2 focus:ring-white/50">
            Talk to a developer
          </a>
        </div>
      </div>

      <div class="mt-14 grid grid-cols-2 sm:grid-cols-4 gap-4 lg:gap-6">
        {stats.map((stat) => (
          <div class="bg-white/5 backdrop-blur-sm rounded-xl p-4 lg:p-5 text-center border border-white/10">
            <p class="text-2xl lg:text-3xl font-bold text-white">{stat.value}</p>
            <p class="text-secondary-400 text-sm mt-1">{stat.label}</p>
          </div>
        ))}
      </div>
    </div>
  </section>

  <!-- Overview -->
  <section class="py-16 lg:py-24 bg-white dark:bg-secondary-900">
    <div class="container-wrapper">
      <div class="max-w-3xl mx-auto">
        <span class="text-green-600 dark:text-green-400 font-semibold text-sm uppercase tracking-wider">Why cross-platform</span>
        <h2 class="text-3xl sm:text-4xl font-bold text-secondary-900 dark:text-secondary-100 mt-2 mb-6">One codebase in every customer’s pocket</h2>
        <div class="space-y-5 text-lg text-secondary-700 dark:text-secondary-300 leading-relaxed">
          <p>
            Building separate native apps for iOS and Android means funding two engineering teams, two release pipelines, and two
            sets of bugs — and watching feature parity quietly drift apart over time. React Native collapses that into a single
            codebase that ships to both the App Store and Google Play. For the vast majority of products, that means launching
            sooner, spending less, and maintaining one track instead of two — without giving up the native-like feel users expect.
          </p>
          <p>
            WorkRoot builds cross-platform apps with <strong>React Native and Expo</strong>, backed by <strong>Spring Boot</strong>
            APIs and <strong>PostgreSQL</strong>. We design offline-first from the start, because real users lose signal — in
            transit, in basements, in rural areas — and an app that freezes the moment connectivity drops is an app people delete.
            Local storage plus background sync keeps the experience smooth and reconciles data the moment the connection returns.
          </p>
          <p>
            Push notifications, secure authentication, deep links, and clean backend integration come standard, and we don’t stop
            at the code: we handle the production builds, store metadata, and review submission to get you live on both stores.
            Because the backend stack matches our web and enterprise platforms, your mobile app and any web product can share one
            source of truth rather than drifting into separate data silos.
          </p>
          <p>
            The proof is in production. Our Pophealth health-sessions app — built with Expo and Spring Boot — went live for a
            healthcare client, onboarded <strong>100+ providers</strong>, handled <strong>10,000+ sessions</strong> with
            offline-first sync for areas of poor connectivity, and earned a <strong>4.8★</strong> user rating. If you have a mobile
            product to launch, we can take it from idea to both stores.
          </p>
        </div>
      </div>
    </div>
  </section>

  <!-- Capabilities grid -->
  <section class="py-16 lg:py-24 bg-secondary-50 dark:bg-secondary-800/50">
    <div class="container-wrapper">
      <div class="text-center max-w-2xl mx-auto mb-12">
        <h2 class="text-3xl sm:text-4xl font-bold text-secondary-900 dark:text-secondary-100 mb-4">What we ship</h2>
        <p class="text-secondary-600 dark:text-secondary-400 text-lg">Everything a production mobile app needs, on both platforms.</p>
      </div>
      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
        {capabilities.map((c) => (
          <div class="bg-white dark:bg-secondary-800 rounded-2xl p-7 border border-secondary-100 dark:border-secondary-700 shadow-sm hover:shadow-lg transition-shadow">
            <div class="w-12 h-12 rounded-xl bg-green-50 dark:bg-green-900/30 text-green-600 dark:text-green-300 flex items-center justify-center mb-4" aria-hidden="true">
              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" /></svg>
            </div>
            <h3 class="text-lg font-bold text-secondary-900 dark:text-secondary-100 mb-2">{c.title}</h3>
            <p class="text-secondary-600 dark:text-secondary-400 text-sm leading-relaxed">{c.body}</p>
          </div>
        ))}
      </div>
    </div>
  </section>

  <!-- Comparison table -->
  <section class="py-16 lg:py-24 bg-white dark:bg-secondary-900">
    <div class="container-wrapper">
      <div class="max-w-4xl mx-auto">
        <div class="text-center mb-10">
          <h2 class="text-3xl sm:text-4xl font-bold text-secondary-900 dark:text-secondary-100 mb-4">React Native vs two native builds</h2>
          <p class="text-secondary-600 dark:text-secondary-400 text-lg">Why one codebase usually wins.</p>
        </div>
        <div class="overflow-x-auto rounded-2xl border border-secondary-200 dark:border-secondary-700 shadow-sm">
          <table class="w-full text-left border-collapse min-w-[640px]">
            <caption class="sr-only">Comparison of separate native iOS and Android development versus cross-platform React Native</caption>
            <thead>
              <tr class="bg-secondary-50 dark:bg-secondary-800">
                <th scope="col" class="px-5 py-4 text-sm font-bold text-secondary-700 dark:text-secondary-200">Dimension</th>
                <th scope="col" class="px-5 py-4 text-sm font-bold text-secondary-500 dark:text-secondary-400">Two native apps</th>
                <th scope="col" class="px-5 py-4 text-sm font-bold text-primary-700 dark:text-primary-300">React Native (WorkRoot)</th>
              </tr>
            </thead>
            <tbody>
              {comparison.map((row, i) => (
                <tr class={i % 2 === 0 ? 'bg-white dark:bg-secondary-900' : 'bg-secondary-50/50 dark:bg-secondary-800/40'}>
                  <th scope="row" class="px-5 py-4 text-sm font-semibold text-secondary-900 dark:text-secondary-100 align-top">{row.dimension}</th>
                  <td class="px-5 py-4 text-sm text-secondary-600 dark:text-secondary-400 align-top">{row.native}</td>
                  <td class="px-5 py-4 text-sm text-secondary-700 dark:text-secondary-200 align-top font-medium">
                    <span class="inline-flex items-start gap-2">
                      <svg class="w-4 h-4 mt-0.5 flex-shrink-0 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
                      {row.rn}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </section>

  <!-- Case study -->
  <section class="py-16 lg:py-24 bg-gradient-to-br from-secondary-900 via-secondary-800 to-secondary-900">
    <div class="container-wrapper">
      <div class="max-w-4xl mx-auto">
        <span class="inline-flex items-center gap-2 px-4 py-1.5 mb-5 text-sm font-semibold text-green-300 bg-green-500/10 rounded-full border border-green-500/20">Case study · Mobile</span>
        <h2 class="text-3xl sm:text-4xl font-bold text-white mb-4">Pophealth — Health Sessions App</h2>
        <p class="text-lg text-secondary-300 leading-relaxed mb-8">
          A healthcare client needed a mobile-first tool to manage patient sessions and health data, with offline capability for
          areas of poor connectivity. We built it with <strong class="text-white">Expo (React Native)</strong> and a
          <strong class="text-white"> Spring Boot</strong> backend over <strong class="text-white">PostgreSQL</strong>, using an
          offline-first architecture with seamless sync for session management, appointment booking, and patient tracking.
        </p>
        <div class="grid grid-cols-3 gap-4 mb-8">
          {[{ v: '10,000+', l: 'Sessions managed' }, { v: '100+', l: 'Providers onboarded' }, { v: '4.8★', l: 'User rating' }].map((s) => (
            <div class="bg-white/5 border border-white/10 rounded-xl p-5 text-center">
              <p class="text-2xl sm:text-3xl font-bold text-white">{s.v}</p>
              <p class="text-secondary-400 text-xs sm:text-sm mt-1">{s.l}</p>
            </div>
          ))}
        </div>
        <a href="/portfolio#pophealth" class="inline-flex items-center gap-2 text-primary-300 font-semibold hover:text-primary-200">
          Read the full case study
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" /></svg>
        </a>
      </div>
    </div>
  </section>

  <ServiceFaq
    faqs={faqs}
    eyebrow="Before you build"
    heading="React Native app development — your questions answered"
    subheading="Cross-platform trade-offs, store publishing, offline support, timelines, and cost."
  />

  <GuaranteeBand />
  <InlineLeadForm />
</BaseLayout>
