React Native

A Meta-developed framework that lets you build native iOS and Android apps using React and JavaScript, with a shared codebase and native UI rendering.

Category: Mobile Development (also: Front End)

Author: Atomic Glue Editorial Team

## Definition

React Native is an open-source framework created by Meta for building mobile apps using JavaScript and React. Unlike hybrid WebView approaches, React Native renders real native UI components through a JavaScript-to-native bridge. The result is a mobile app that looks and feels native but is written in the same codebase for both platforms. React Native is one of the most widely adopted cross-platform frameworks, used by Meta, Shopify, Coinbase, Discord, and many others.

## Architecture

React Native's architecture has three main threads. The **JavaScript thread** runs your React code and business logic. The **native thread** handles UI rendering and platform API calls. The **bridge** (soon to be Fabric + JSI) serializes communication between JS and native threads. When you write `<View>` in React Native, it renders as a real `UIView` on iOS or a real `View` on Android. This is the key difference from hybrid apps: React Native does not use a WebView.

## The New Architecture (Fabric + JSI)

React Native's new architecture has been rolling out since version 0.68. **Fabric** is the new rendering system that allows synchronous communication between JavaScript and native UI. **JSI (JavaScript Interface)** replaces the old asynchronous bridge, enabling direct C++ calls between JS and native code. The result is faster startup, lower memory usage, better interop with host APIs, and support for concurrent React features. React Native 0.76+ defaults to the new architecture.

## Ecosystem and Community

React Native has the largest third-party ecosystem of any cross-platform framework. Expo is the recommended toolchain, providing a managed development environment, over-the-air updates, and a library of pre-built native modules. The npm registry has thousands of React Native libraries. Debugging tools include React DevTools, Flipper, and Hermes (a JavaScript engine optimized for mobile). Community support is extensive, with active Discord servers, weekly GitHub discussions, and a yearly conference.

## In code

import React from 'react';
import { View, Text, StyleSheet, Pressable } from 'react-native';

const WelcomeScreen = () => (
  <View style={styles.container}>
    <Text style={styles.title}>Welcome to React Native</Text>
    <Pressable style={styles.button} onPress={() => {}}>
      <Text style={styles.buttonText}>Get Started</Text>
    </Pressable>
  </View>
);

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  title: { fontSize: 24, fontWeight: 'bold' },
  button: { backgroundColor: '#6C63FF', padding: 16, borderRadius: 8, marginTop: 16 },
  buttonText: { color: '#FFFFFF', fontSize: 16 }
});

## Common questions

Q: Is React Native good for complex animations?

A: Yes with some caveats. React Native's Animated API and Reanimated library handle most animation needs at 60fps. For very complex GPU-bound animations, Flutter or native may still be better choices.

Q: Does React Native use WebViews?

A: No. React Native renders real native components. This is a common misconception. The confusion comes from comparing React Native to hybrid frameworks like Capacitor and Cordova.

## Key takeaways

• React Native builds native mobile apps using JavaScript and React.
• Renders real native UI components, not WebViews.
• The new architecture (Fabric + JSI) brings near-native performance and better native interop.
• Expo is the recommended starting point for new React Native projects.
• Largest ecosystem of any cross-platform mobile framework.

## Related entries

• [Cross-Platform Development](atomicglue.co/glossary/cross-platform-development)
• [Flutter](atomicglue.co/glossary/flutter)
• [Hybrid App](atomicglue.co/glossary/hybrid-app)
• [Native App](atomicglue.co/glossary/native-app)

Last updated June 2025. Permalink: atomicglue.co/glossary/react-native