How to convert a React web app into an iOS and Android app

You already have a React app that works in the browser. Getting it into the App Store and Google Play does not mean finding the right command to turn JSX into an APK, because that command does not exist.

The real choice is whether to rebuild the interface in React Native or keep the web app you already maintain and add a native shell around it. React Native makes sense when mobile is the product. A native wrapper makes sense when your web app is the product and you want app store distribution, push notifications, deep links, and device features without rebuilding every screen.

This guide walks through both options, then shows how to convert a React web app to a mobile app with Median, from the deployed URL through testing and app store submission.

TRY IT WITH YOUR URL

Enter your deployed React app URL and test it as a mobile app

When React Native is worth the rewrite

If you are starting a mobile-first product, React Native, often paired with Expo, is a sensible foundation. You keep the React component model, but the interface renders as native UI rather than inside a WebView. That gives you more room for gesture-heavy screens, complex transitions, and graphics that need consistently high frame rates.

Choose React Native when:

• Your product is mobile-first and your web version is secondary or does not exist.

• Your interface depends on native gestures, transitions, or animation throughout.

• You need hardware integration that a WebView and native plugins cannot provide cleanly.

• Your team can build and maintain a mobile codebase alongside the web app.

That last requirement is easy to underestimate. You can share business logic between React and React Native, but most teams still maintain separate navigation, UI components, build tooling, testing, and release cycles.

When keeping your React web app is the better fit

The calculation changes when your React app is already in production and your web version will remain the main product. Rebuilding working screens in React Native can buy you native UI, but your team then maintains that second codebase for the life of the product.

A native wrapper is usually a better fit when:

• Your web app is the product and mobile is another way for customers to use it.

• You are a small team or solo developer and cannot justify building and maintaining a second codebase.

• Web releases should appear in the installed app without another app store submission.

• The native features you need are push notifications, deep links, biometric login, camera and file access, and app store distribution rather than fully custom native screens.

This is also the point where progressive web apps, Capacitor, and managed web to app platforms tend to enter the conversation. A PWA can be installable from the browser, but it is not the same as shipping native iOS and Android binaries through both app stores. Capacitor gives you native projects and a plugin layer, which can be a good choice if your team wants to own the native build and release process. Median manages the native shell, cloud builds, and store tooling around the web app you already deploy.

One warning before you commit to any WebView app: Apple can reject an app that adds nothing beyond the website. Give the installed app a reason to exist, such as native navigation, push notifications, biometric login, or another device feature that suits the product. Median's App Studio exposes those options during setup, and the WebView app guide explains when this website to app architecture is a good fit.

How to convert a React web app to a mobile app with Median

Median builds native iOS and Android apps with a WebView pointed at your deployed URL. The wrapper handles the native pieces around your React app, including navigation, permissions, device plugins, signing, and the Median JavaScript Bridge your code can call.

Your deployed web app remains the source of truth. When you ship a web release, the installed apps load it the next time they start. You only need a new native build when you change native configuration, add plugins, or update signing.

Step 1: Deploy the React app to a stable URL

Median works from a URL, not a GitHub repository or ZIP file. Vercel, Netlify, Cloudflare, and your own infrastructure all work. You can use a preview or staging URL while testing, then point the production app at the domain you intend to keep.

Step 2: Create iOS and Android apps from the URL

Enter the URL at median.co/app, name the app, and open the generated iOS and Android previews in the browser-based simulators. Check the responsive layout carefully. A WebView without browser controls can expose spacing, safe-area, keyboard, and navigation issues that were less obvious in a mobile browser tab.

Step 3: Connect React to native features

Install the Median JavaScript Bridge library in your project:

npm install median-js-bridge --save

The median-js-bridge package is framework-agnostic. It gives your React code access to push notification registration and handlers, deep links, device information, the clipboard, app lifecycle events, and the other native APIs included in your plan.

Two details matter when you wire it in:

• Calls safely no-op in a regular browser. One React build can serve web and app customers. Use the bridge's app detection when a component should show different behavior inside the installed app.

• React Router still handles client-side navigation. A push notification or deep link can arrive with a target URL. The package's jsNavigation listener passes that URL to your router so the app can navigate without reloading the entire page. Enable "JavaScript Frameworks and NPM" in App Studio, then register the listener once next to your router setup.

The NPM package documentation lists the bridge APIs. The SPA navigation guide shows the listener pattern for React Router and other client-side routers.

Step 4: Add native features and test on real devices

Add the native plugins your product actually needs. That might include OneSignal or Firebase push notifications, biometrics, offline access, or in-app purchases through RevenueCat.

Then test on hardware. Pay particular attention to login, OAuth redirects, deep links, file uploads, the keyboard, and anything that relies on browser storage or permissions. These flows can behave differently inside an installed WebView than they do in a browser tab.

Step 5: Build and submit to both app stores

Median's cloud-based build platform creates the signed IPA and AAB. For iOS, connect your Apple Developer account with an App Store Connect API key, and the build uploads to App Store Connect for TestFlight and App Store review. You do not need a Mac or Xcode for the build. For Android, generate the AAB and submit it through Play Console.

The app publishing guide covers the store-side work. Median's publishing service can also manage the submission if you do not want to handle the certificates, listings, and review process yourself.

What a React to APK converter actually produces

"React to APK" sounds like a compilation step, but a React web app and an Android package are different things. JSX becomes JavaScript that runs in a browser. An APK contains an Android application. A React to APK converter therefore has to wrap the deployed web app or rebuild the interface with a mobile framework.

For Android testing, Median can generate an APK from your deployed React app. For Google Play submission, it generates the AAB the store requires. The same project also produces an iOS app, so you are not left looking for a separate APK to iOS conversion that cannot exist.

Some source code to APK tools accept a GitHub repository or ZIP file and package a snapshot of the site. That can be useful for a quick Android build, but every web change may require another package and distribution step. Median loads the deployed URL instead, so your usual production deployment updates the web content inside both installed apps.

Questions React developers usually ask before converting

Can I convert JSX or React code directly to an APK?

No. JSX transpiles to JavaScript for the browser, while an APK is a packaged Android project. To make an Android app from React code, you either rebuild the interface in React Native or wrap the deployed React web app in a native Android app.

Do I need to rewrite my React app in React Native?

Not if the web app will remain your main product. React Native is the stronger choice when you need native UI throughout and can maintain a separate mobile codebase. If you mainly need iOS and Android distribution plus push notifications, deep links, and similar native features, a wrapper lets you keep the React web app you already have.

Is a PWA enough, or do I need an app store app?

A PWA may be enough if browser installation and web capabilities meet your needs. Choose an app store build when customers expect to find you in the App Store or Google Play, or when you need native navigation, plugins, store-managed distribution, and other capabilities outside the PWA experience.

Should I use Capacitor or a managed web to app platform?

Use Capacitor when your team wants direct control of the native iOS and Android projects and is comfortable owning builds, plugins, signing, and store releases. Use a managed platform such as Median when you want to keep working mainly in React and have the native shell and cloud build process handled for you.

How does React access push notifications and other native features?

Your components call the Median JavaScript Bridge through the median-js-bridge NPM package. The bridge covers push registration, deep links, device information, and other native APIs. In a normal browser those calls no-op, so the same React build can run on the web and inside the app.

Will React Router work inside the native app?

Yes. Client-side routing works normally after the WebView loads the SPA. When a native event includes a URL, register the package's jsNavigation listener and pass the destination to React Router so the app navigates without a full reload.

Can I put a React web app in the Apple App Store?

Yes, but the app needs to offer more than the website inside a frame. Native navigation, push notifications, biometric login, or another useful device feature can help meet Apple's minimum functionality requirement. Median handles the cloud build, signing, and App Store Connect upload without requiring a Mac.

Will the installed app update when I deploy new React code?

Yes, for changes that live in the web app. The installed iOS and Android apps load your deployed URL, so a production release appears the next time the app starts. Changes to native configuration, plugins, or signing still require a new build.

READY WHEN YOU ARE

See your React app as an installable mobile app