React Native — Build Native Mobile Apps with React

What it is

React Native is a framework for building native mobile applications using React. Unlike hybrid frameworks that wrap web content in a webview, React Native translates React components into native iOS (UIKit) and Android platform views. You write shared business logic in JavaScript or TypeScript while retaining access to platform-specific APIs.

React Native is used by Meta (Facebook, Instagram, Messenger), Microsoft (Office, Outlook), Shopify, Discord, and Bloomberg. It is the most widely adopted cross-platform mobile framework.

How it saves time or tokens

React Native eliminates the need to maintain separate iOS and Android codebases. One team writes shared logic once, reducing code duplication by 70-90% on typical projects. Hot reloading lets developers see changes instantly without recompiling. The new architecture (Fabric renderer plus TurboModules) provides direct synchronous access to native APIs, closing the performance gap with fully native apps.

How to use

1. Create a new project using Expo (recommended) or the bare React Native CLI.
2. Run the development server and open the app on a simulator or physical device.
3. Write React components that map to native views.

# Expo (recommended)
npx create-expo-app@latest my-app
cd my-app && npx expo start

# Bare React Native
npx @react-native-community/cli init MyApp
cd MyApp
npx react-native run-ios

Example

A minimal React Native component rendering native text and a button:

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

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 24 }}>Hello, React Native</Text>
      <Button
        title='Press me'
        onPress={() => Alert.alert('Button pressed')}
      />
    </View>
  );
}

This renders a truly native UILabel on iOS and a TextView on Android, not a webview.

Related on TokRepo

• AI Tools for Coding — AI-powered development tools for mobile and web projects
• AI Tools for Design — Design tools that complement mobile app development

Common pitfalls

• Navigation libraries (React Navigation, Expo Router) each have tradeoffs. Choosing the wrong one mid-project is expensive to reverse.
• Native modules that bridge platform code require Xcode and Android Studio knowledge. Pure JS developers may struggle with linking and debugging native crashes.
• The old bridge architecture is being replaced by the new architecture (Fabric, TurboModules). Libraries that have not migrated may cause compatibility issues.