From React on the web to React Native: what transfers, what doesn't

When I moved from building React web apps to React Native, I expected to start over. I didn't. Maybe 70% of what I knew came straight across - components, props, hooks, state, the whole mental model. What threw me was the other 30%, because it's stuff you do without thinking on the web and suddenly can't.

If you're making this jump, here's where your instincts will serve you and where they'll quietly betray you.

What comes with you#

Components and hooks are identical. useState, useEffect, useMemo, custom hooks, context - all the same. Your understanding of "the UI is a function of state" transfers completely. If you write clean function components on the web, you'll write clean ones on mobile.

Data fetching is the same. fetch works, your API layer barely changes, and a library like React Query behaves the same way it does on the web. The whole async/loading/error pattern you already know carries over untouched.

So the React part is genuinely React. That's the good news, and it's a lot.

What changes immediately#

There's no DOM. No div, no span, no p. You use View, Text, Image, ScrollView. Every piece of text must be inside a <Text> - you can't drop a bare string into a View like you would in a div. That one tripped me up constantly at first:

// web habit - breaks in RN
<View>Hello</View>
 
// correct
<View><Text>Hello</Text></View>

There's no CSS. You style with JavaScript objects via StyleSheet. A lot of properties have the same names, but it's a subset, units are unitless numbers (density-independent pixels), and there are no cascading styles or class selectors. Each component carries its own styles.

const styles = StyleSheet.create({
  card: { padding: 16, borderRadius: 12, backgroundColor: "#fff" },
});

Flexbox is the only layout, and the default is different. On the web, flex-direction defaults to row. In React Native it defaults to column, because screens are tall. I lost real time to layouts that "made no sense" before this clicked. Once you internalize "everything is flex, default is column," layout gets predictable fast.

The genuinely new stuff#

Navigation isn't the URL. On the web the address bar is your router. On mobile there's no URL bar - you bring your own navigation with something like React Navigation, and you have to think in stacks and tabs and screens rather than routes and links. This is probably the biggest conceptual addition.

"It runs" is two platforms, not one. Your code runs on iOS and Android, and they don't behave identically. Shadows, fonts, status bars, keyboard behavior, safe areas around notches - all differ. You will test on both. Something that looks perfect on an iPhone simulator can look off on a Pixel, and vice versa.

The native layer is right there. Permissions, push notifications, the camera, secure storage - these route through native modules. Most of the time a community library covers it, but you're now aware of an iOS and Android implementation under the JavaScript, which you never had to think about on the web.

What I'd tell someone making the jump#

Don't relearn React - you already know it. Spend your energy on the three things that are actually new: styling with objects and flex (with column as default), navigation as an explicit library, and the reality of two platforms. Build one small real app end to end, run it on both an iPhone and an Android device, and the gaps in your mental model show up quickly.

The jump is smaller than it looks. It's the same React, wearing very different clothes.