React vs React Native Cheat Sheet: DOM vs Native, Styling & Shared Code

React and React Native share a component model, hooks, and JavaScript. They do not share a renderer: web React talks to the DOM and CSS; React Native talks to native views and StyleSheet. Share business logic, validation, and API clients. Split UI files (Button.web.tsx vs native Pressable) instead of pretending div exists on phones.

This React cheat sheet is written for people searching for a fast, accurate reference: students, junior developers, and teams shipping production software. Pin it, copy the snippets, and come back when syntax slips.

Quick reference

• Renderer: Web: react-dom. Native: react-native fabric/views.
• Primitives: Web: div, span, input. Native: View, Text, TextInput.
• Style: Web: CSS files, modules, Tailwind. Native: JS StyleSheet, Flexbox column default.
• Navigation: Web: URL + React Router or Next. Native: React Navigation / Expo Router.
• Gestures: Web: mouse/keyboard. Native: touches, BackHandler, permissions.
• Share: Pure TS modules: money math, Zod schemas, fetch wrappers.
• Do not share: JSX that uses DOM APIs, window, document, CSS imports.
• Universal: Expo Router / React Native Web can reuse more UI if you design for it from day one.

Copy-paste examples

Shared logic, split UI

Keep this file free of DOM and RN imports so both apps can import it.

export function lineTotal(price, qty) {
  const p = Number(price);
  const q = Number(qty);
  if (!Number.isFinite(p) || !Number.isFinite(q)) return 0;
  return Math.round(p * q * 100) / 100;
}
export function canSubmit(email) {
  return typeof email === 'string' && email.includes('@');
}

Common mistakes

• Copy-pasting a web dashboard into RN and replacing nothing but the import path.
• Using className in a native file.
• Assuming fetch CORS rules work the same on a device as in Chrome.
• Sharing Redux store shape is fine; sharing DOM selectors is not.

FAQ

1. Can one repo hold both? Yes (monorepo). Separate packages for ui-web, ui-native, and domain keep imports honest.

1. Is React Native just a WebView? No. It uses native widgets. A WebView is a different component you add on purpose.

1. Should web developers learn RN? If you ship a mobile app, yes — after you are solid on React hooks. The jump is primitives and styling, not the idea of components.

Related React cheat sheets

• React Js Cheat Sheet 2026
• React Hooks Cheat Sheet
• React Jsx Cheat Sheet

Build with this stack

When a cheat sheet is not enough — you need a production app, a student FYP, or a custom dashboard — ArpaNeuro builds custom web development and also sells ready-made source code. Request a quote and tell us the stack.

Browse software development services or the source code marketplace if you want a working codebase instead of starting from a blank file.