React Native runs your React code and renders real platform views. That one sentence hides the whole learning curve. There is no browser to smooth over the two operating systems underneath, and most of what trips up an experienced React developer is not unfamiliar API — it is a familiar name whose defaults changed, or a cost the browser used to absorb. This guide is about those deltas: what you are really rendering, why styling only resembles CSS, where the JavaScript-to-native boundary sits, and which platform differences you cannot postpone.
Each chapter opens with the short version. Tap one to read the detail.
There is no DOM — what you are actually rendering
~2 min
Your elements become real platform views: a <View> is an Android ViewGroup or an iOS UIView, not a div. Two consequences bite at once — every string must sit inside a <Text>, and the built-in component set is small.
Styling and layout: it resembles CSS and it is not CSS
~3 min
Styles are plain JavaScript objects with camel-cased names, and the resemblance ends there: no selectors, no cascade, no inheritance outside a text subtree. Layout is flexbox computed by Yoga, and four of its defaults differ from the web — flexShrink: 0 being the one that ships bugs.
Touch is a negotiation, and text entry is a controlled input
~2 min
There is no click. Touches run through a responder system in which exactly one view holds the touch at a time, and a parent can claim it from a child. TextInput is controlled much as a web input is, but its props are full of one-platform values.
Scrolling: the decision that makes an app feel native
~2 min
ScrollView renders every child immediately; FlatList mounts rows as they approach and drops ones that scroll away. Choosing wrong is the commonest cause of a slow screen, and the blank flashes people blame on the framework are a tuning problem with named knobs.
Animation belongs on the other thread
~2 min
Without useNativeDriver: true an animation is driven frame by frame from JavaScript, so it stutters whenever your code is busy. With it, the animation is handed to native before it starts — but only non-layout properties qualify, and asking for a layout property fails quietly.
Two platforms, and the users neither of them assumes
~2 min
One codebase is not one interface. Platform.select and .ios.tsx / .android.tsx handle the forks you plan for; the costly differences are the silent ones — right-to-left layout that flips only after a restart, and accessibility props that exist on one platform only.
The boundary: what crossing between JavaScript and native costs
~2 min
Your code runs in a JavaScript engine; the views live in native. The old architecture passed serialized messages across an asynchronous bridge; the current one lets JavaScript hold a direct reference to a C++ object, which is what made synchronous layout access possible.
Screens stay mounted, and other long-lived-process surprises
~2 min
Navigation is a library choice, not a framework feature, and a native stack navigator wraps the platform's own controller. The consequence people trip on: navigating away does not unmount the screen, so an effect that runs on mount runs once and never again.
Talking to the outside world, and what the client cannot protect
~2 min
fetch works and the browser's rules around it do not: there is no cross-origin check in a native app, but both platforms block unencrypted traffic by default. Storage is unencrypted unless you choose an encrypted store, and anything inside the bundle is readable.
Measuring, debugging and shipping
~3 min
You get about 16.67 ms per frame, and a blocked JavaScript thread looks nothing like a blocked UI thread — telling them apart is most of the diagnosis. Every number from a development build is wrong, and the tooling you rely on is absent from the build users get.
Written by Keentune. We are not affiliated with or endorsed by the organizations whose documentation informs this guide, and any linked sources belong to their respective owners.
All exam, test, and product names and trademarks are the property of their respective owners and are used here for identification and reference only. Keentune is independent study practice — not affiliated with, authorized, or endorsed by any of these organizations.