Skip to main content

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

  1. Add interaction with Button and Alert.
  2. Fetch data using fetch (same API as browsers).
  3. Try Expo for a zero‑build workflow and over‑the‑air updates.
  4. 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