Going Mobile with React Native (Basics)
November 20, 2016
React Native lets you write JavaScript and render real native UI components on iOS and Android.
By late 2016 the framework had stabilised (v0.39, November 2016) and many teams moved prototypes to production.
Why React Native
- Share business logic with web React projects.
- Hot Reload speeds up iteration without recompiling Xcode or Android Studio.
- Access native APIs (camera, GPS) through a growing library ecosystem.
- Performance close to fully native, thanks to true platform widgets.
Install the CLI
# Global CLI (historical 2.x line)
npm install -g react-native-cli@2
# Create a project
react-native init HelloMobile
cd HelloMobile
Open the project in one terminal and run:
# iOS simulator (macOS only)
npx react-native run-ios
# Android emulator
npx react-native run-android
Hello World component
Edit App.js
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.title}>Hello React Native</Text>
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
title: { fontSize: 24, color: '#333' }
});
View
and Text
are native equivalents of <div>
and text nodes.
StyleSheet.create
uses a subset of CSS with camel‑cased properties.
Parallels with web React
- Components and props work the same.
- State and hooks/API (
useState
,useEffect
) behave identically. - Instead of HTML, you compose native primitives (
View
,ScrollView
,TextInput
). - Styling uses inline objects rather than external CSS files.
- Navigation handled by libraries like react‑navigation, similar to React Router.
Next steps
- Add interaction with
Button
andAlert
. - Fetch data using
fetch
(same API as browsers). - Try Expo for a zero‑build workflow and over‑the‑air updates.
- Explore native modules to access sensors or platform features.
React Native bridges the gap between web experience and native performance, opening mobile development to anyone who already knows React.
Recent posts
- At-Least-Once vs. Exactly-Once - Understanding Message Delivery Guarantees
June 12, 2025
Learn about message delivery guarantees in distributed systems. Understand why most production systems implement at-least-once delivery with idempotency rather than attempting exactly-once delivery.
- How Idempotency Saves Your API from Chaos
June 11, 2025
Learn how to implement idempotency in your APIs to prevent duplicate actions and ensure data consistency. Includes practical examples with Supabase and Node.js.
- Vibe Coding ‑ Notes from the First Try
June 6, 2025
Quick lessons from spinning up a new blog with an AI pair‑programmer and Cursor.