React Native for Frontend Developers

If you’re already confident with React or Next.js, your path to React Native (RN) is shorter than you think. This guide maps familiar web concepts to their mobile equivalents, showing what to expect, which tools to use, and how to build your first production app in just a few weeks.

TL;DR: React Native uses the same React logic (state, props, hooks) but renders native widgets instead of the DOM. Expo takes care of 80% of the setup — builds, splash screens, icons, OTA updates, and deep linking.

1) Concept Map: Web → React Native

2) Example: A “Button” in Web vs RN

Web (React)

export default function Button({children}) {
  return (
    <button className="px-4 py-2 rounded bg-black text-white hover:opacity-90">
      {children}
    </button>
  )
}

React Native

import {Pressable, Text} from 'react-native'

export default function Button({children}) {
  return (
    <Pressable style={({pressed}) => ({
      paddingVertical: 8,
      paddingHorizontal: 16,
      borderRadius: 8,
      backgroundColor: '#000',
      opacity: pressed ? 0.9 : 1,
    })}>
      <Text style={{color: '#fff'}}>{children}</Text>
    </Pressable>
  )
}

React Native + NativeWind

import {Pressable, Text} from 'react-native'

export default function Button({children}) {
  return (
    <Pressable className="px-4 py-2 rounded-xl bg-black active:opacity-90">
      <Text className="text-white">{children}</Text>
    </Pressable>
  )
}

3) Recommended Project Stack

• Expo SDK — start with npx create-expo-app.
• Navigation — @react-navigation/native with stack/tabs.
• State — Zustand for local state, TanStack Query for async data.
• Styling — nativewind or StyleSheet.create.
• Forms — react-hook-form + community inputs.
• Storage — @react-native-async-storage/async-storage; upgrade to SQLite/WatermelonDB for offline-first apps.
• Analytics / Logs — Expo Analytics, Firebase, or Sentry.
• Builds — EAS Build (iOS/Android), EAS Submit to App Store / Play.

4) Navigation Example: Stack + Tabs

import {NavigationContainer} from '@react-navigation/native'
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
import {createNativeStackNavigator} from '@react-navigation/native-stack'

const Tabs = createBottomTabNavigator()
const Stack = createNativeStackNavigator()

function HomeScreen() {}
function SettingsScreen() {}
function DetailsScreen() {}

function TabsRoot() {
  return (
    <Tabs.Navigator>
      <Tabs.Screen name="Home" component={HomeScreen} />
      <Tabs.Screen name="Settings" component={SettingsScreen} />
    </Tabs.Navigator>
  )
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Root" component={TabsRoot} options={{headerShown: false}} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

5) Styling: From CSS to Native

• No DOM, no CSS — RN uses Flexbox layout and StyleSheet.
• Tailwind-like DX? Use NativeWind for utility-class styling.

<View className="flex-1 items-center justify-center bg-background">
  <Text className="text-xl font-semibold">Hello 👋</Text>
</View>

6) Data and Offline

• HTTP — same fetch/axios + TanStack Query for caching/refetch.
• Offline — AsyncStorage for simple key-value, WatermelonDB for complex sync.

const {data, isLoading} = useQuery({
  queryKey: ['todos'],
  queryFn: () => axios.get('/api/todos').then(r => r.data),
})

7) Animations and Gestures

• Reanimated — high-performance UI thread animations.
• Gesture Handler — swipes, drags, and long-presses.
• Moti — a simpler layer on top of Reanimated for easy animations.

8) CI/CD and Deployment

1. EAS Build — cloud builds for iOS/Android.
2. EAS Submit — upload builds to App Store / Play.
3. OTA Updates — ship JS changes instantly without store review.

9) Testing and Debugging

• Jest + @testing-library/react-native — for unit and render tests.
• Expo DevTools, React DevTools, Flipper for debugging.
• Sentry for crash and performance tracking.

10) Common Gotchas

• No DOM (no window/document) Use RN APIs like Dimensions, Linking, Appearance or Expo modules. DOM-dependent libraries won’t work.
• Images & Assets Use require('...') or expo-asset for local files. Remote images use <Image> with caching.
• Fonts Load custom fonts via expo-font before rendering UI.
• List Performance For large lists, prefer FlashList (Shopify) over FlatList.
• Platform Differences (iOS/Android) Test both platforms — handle StatusBar, SafeArea, permissions, and Android back button.

11) 4-Week Migration Roadmap

1. Expo app, navigation (Tabs+Stack), theme/styling, Zustand state, a few screens.
2. TanStack Query, forms (RHF), local storage, i18n.
3. Reanimated, gestures, push notifications.
4. EAS Build/Submit, splash/icons, analytics/crash reports, first store release.

12) Want a Shortcut?

If you’re a frontend dev looking to reach production‑grade React Native apps faster, check out NativeLaunch — a production‑ready Expo starter with authentication, offline storage, reusable UI modules, and EAS build workflows. Perfect for moving from Next.js to React Native without the friction.