React vs. React Native: Key Differences

React is the UI library and programming model; React DOM renders React components into a browser’s DOM, while React Native renders its own components into native platform UI. The names share React concepts, but the rendering targets, component vocabularies, platform APIs, and release workflows differ. Choose based on whether the product needs a website or native mobile experience, then evaluate device integration, code sharing, and team needs.

What is the difference between React and React Native?

Area	React for the web	React Native
Rendering target	Browser DOM, using React DOM.	Native platform UI using React Native host components.
UI components	HTML and SVG elements such as div, plus browser APIs.	Components such as View, Text, Image, TextInput, and Pressable.
Platform access	Browser capabilities and web APIs.	iOS and Android APIs and platform-specific behavior.
Navigation	Usually browser-oriented routing; React DOM is not itself a router.	Usually a navigator library, such as React Navigation for common stack and tab patterns.
Delivery	Website or browser application.	Mobile applications for native platforms; it can also be integrated into existing Android or iOS apps.

React DOM’s APIs are explicitly for web applications in a browser DOM environment. React Native’s primitives correspond to platform UI building blocks. The React Native project describes the shared technology as “Learn once, write anywhere,” but that does not mean a browser UI automatically runs as native UI.

Sources: React DOM APIs, React DOM components, React Native overview, React Native components and APIs.

How the code differs

These small examples show the host-component difference. They are component examples; a complete app also needs the project setup, entry point, and run or build configuration for its target.

Web component with React DOM

import { createRoot } from 'react-dom/client';

function Greeting() {
  return <main>
    <h1>Hello</h1>
    <button onClick={() => alert('Hello from the browser')}>
      Say hello
    </button>
  </main>;
}

createRoot(document.getElementById('root')).render(<Greeting />);

This uses a DOM element as the mount point and HTML elements such as main, h1, and button.

React Native component

import { Button, Text, View } from 'react-native';

export default function Greeting() {
  return (
    <View>
      <Text>Hello</Text>
      <Button title="Say hello" onPress={() => console.log('Hello from the app')} />
    </View>
  );
}

React Native uses its own components and event props such as onPress. It does not mount this interface into a browser DOM.

Sources: React DOM createRoot, React Native core components.

What transfers—and what needs a separate implementation?

Components, declarative UI concepts, and many JavaScript or TypeScript functions can transfer. Business rules, data transformations, validation, and API client logic are often good candidates for sharing when their dependencies are platform-neutral.

Presentation code does not transfer automatically. A web component returning div and relying on DOM methods, CSS behavior, or browser-only APIs cannot simply be rendered by React Native. Native screens need native host components and may need platform-specific interaction, styling, and integration.

React Native supports platform choices through the Platform module and file naming conventions such as .ios.js and .android.js. Its guide also describes .native.js as an option for sharing code between web or Node and native where appropriate. Treat shared business logic and platform-specific presentation as separate planning questions; estimate sharing module by module rather than assuming a single shared interface.

Source: React Native platform-specific code.

Which should you choose?

Choose React with React DOM when…	Choose React Native when…
The main deliverable is a website or browser application.	The main deliverable is a native mobile experience for iOS or Android.
The product depends on browser standards, DOM behavior, or web deployment.	Native platform components, device integration, or mobile platform behavior are central.
Your team’s web skills and browser release workflow fit the product.	Your team is prepared to handle mobile platform differences and app delivery.

Before deciding, list the target devices, required device integrations, expected UI behavior, platform-specific features, navigation needs, and the modules that could be shared. React Native can be adopted inside an existing native Android or iOS app, so the choice does not always require replacing an entire application.

Sources: React Native navigation, Integration with existing apps.

Performance: measure the target application

There is no universal speed winner established by the documentation cited here. Performance depends on the application’s work, implementation, browser or device, and build mode. A comparison is meaningful only when it uses a defined workload and representative target hardware.

React Native’s performance guide describes work across JavaScript and native UI threads. Heavy JavaScript-thread work can contribute to dropped frames, while scrolling and some native navigation transitions can continue on the native UI thread. Development mode affects JavaScript-thread performance, so assess release builds on the actual target devices. These points do not establish that React Native is categorically faster or slower than a web React application.

Source: React Native performance.

Or skip the browser setup

If your React project needs a screenshot of a web page for previews, checks, or agent workflows, ScreenshotNeo is a website screenshot API and MCP server. One GET request returns a PNG, JPEG, WebP, or PDF. See the ScreenshotNeo API documentation.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('shot.webp', res);

Cookie and consent banners are accepted like a visitor and removed along with known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers report the page verdict and billing status. An MCP server gives AI agents tools to take screenshots, get page information, and capture PDFs. The free plan includes 1,000 shots each month with no card; paid plans start at $5 for 3,000 shots. Sign up for 1,000 free screenshots a month, no card required.

Troubleshooting common confusion

Symptom	Cause	Fix
A web component fails in a React Native screen.	It returns browser elements or uses DOM APIs.	Replace the presentation with React Native components; isolate reusable platform-neutral logic.
A React Native component is unknown in a browser app.	React DOM and React Native have different host-component sets.	Use web elements for the web target, or provide a platform-specific implementation.
An interface works on iOS but not Android, or the reverse.	The platforms differ in APIs or behavior.	Use documented platform checks or platform-specific files, and review the platform-specific code guide.
Mobile transitions or scrolling look smooth, but another interaction stutters.	Some work can run on different threads; heavy JavaScript work can bottleneck the JS thread.	Profile the problematic interaction in a release build on representative devices.
A React web project has no navigation API built in.	React DOM is a rendering package, not a routing system.	Select a browser-oriented routing solution appropriate to the application.

FAQ

Can I use React Native for a website?

React Native targets native platform UI. Some code can be shared with web through appropriate tooling and platform-specific implementations, but React Native components are not browser DOM elements.

How much React code can I reuse in React Native?

There is no fixed percentage. Platform-neutral logic is often reusable; UI and platform integrations need review and may need separate implementations.

Should I learn React before React Native?

Knowing React concepts helps because React Native uses React, but you still need to learn its components, platform APIs, and mobile development workflow.

Is React Native faster than React?

That comparison is underspecified: one targets native UI and the other browser UI. Measure the actual experience on the target devices and report the build mode and workload.

Is React Native a replacement for React?

No. It is a separate rendering target that uses React concepts. Choose the target that matches the product experience.