React Native #1 — Introduction & Expo Setup

What Is React Native?

React Native lets you build iOS and Android apps using JavaScript and React. But it's not a web app wrapped in a browser — your React components compile to real native views:

<View>   → UIView (iOS)    / android.view.View (Android)
<Text>   → UILabel (iOS)   / android.widget.TextView (Android)
<Image>  → UIImageView     / android.widget.ImageView

You write one codebase. React Native renders platform-native UI on both iOS and Android. The result looks and performs like a native app because it is native under the hood.

React Native vs React Web

The concepts are the same — components, props, state, hooks. The platform layer is different:

React (Web)	React Native
`<div>`	`<View>`
`<p>`, `<span>`	`<Text>`
`<img>`	`<Image>`
`<input>`	`<TextInput>`
`<button>`	`<TouchableOpacity>` / `<Pressable>`
CSS	`StyleSheet.create({})`
`onClick`	`onPress`
Runs in browser	Runs in native app shell

ℹAll text must be inside <Text>

In React Native, you cannot render a string directly inside a <View>. It must always be wrapped in <Text>. This is one of the most common beginner errors.

Why Expo?

Expo is the standard way to start React Native development. It handles:

Build tooling (no Xcode/Android Studio required to start)
Over-the-air updates
A huge library of pre-built native modules (camera, location, notifications, etc.)
Expo Go — run your app on your real phone instantly, no cable needed

You can always "eject" to a bare React Native project later if you need something Expo doesn't support.

Setting Up

Prerequisites

node --version   # need v18+

Install the Expo CLI:

npm install -g expo-cli

Create Your First App

npx create-expo-app@latest MyApp --template blank-typescript
cd MyApp

MyApp/ ├── app/ ← screens (Expo Router) │ └── index.tsx ├── components/ ← reusable components ├── assets/ ← images, fonts, icons ├── constants/ ├── hooks/ ├── app.json ← Expo config (app name, icons, splash) ├── tsconfig.json └── package.json

Run It

npx expo start

This opens Expo Dev Tools in your browser and prints a QR code.

Install Expo Go on your phone

Download Expo Go from the App Store (iOS) or Google Play (Android). It's a container app that runs your JavaScript bundle.

Scan the QR code

Open your phone camera (iOS) or the Expo Go app (Android) and scan the QR code from your terminal. Your app loads on your real phone in seconds.

Make a change

Edit app/index.tsx and save. The app updates instantly on your phone — this is Fast Refresh.

Your First Screen

App.tsx

Loading editor...

Replace app/index.tsx with this and watch it update live on your phone.

Running on a Simulator

If you want to run on a simulator instead of a real device:

iOS Simulator (macOS only):

# Install Xcode from the Mac App Store first
npx expo start --ios

Android Emulator:

# Install Android Studio first, create a virtual device
npx expo start --android

⚠iOS simulator requires macOS

You need a Mac to run the iOS simulator. On Windows/Linux, use an Android emulator or test on a real device via Expo Go.

The app.json — Configure Your App

{
  "expo": {
    "name": "MyApp",
    "slug": "myapp",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/images/icon.png",
    "splash": {
      "image": "./assets/images/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#0f0f0f"
    },
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.yourname.myapp"
    },
    "android": {
      "package": "com.yourname.myapp",
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/adaptive-icon.png",
        "backgroundColor": "#0f0f0f"
      }
    }
  }
}

Key Differences to Keep in Mind

// ✅ React Native
import { View, Text, TouchableOpacity } from 'react-native';

// ❌ These don't exist in React Native
// import { div, p, button } from '...'

// ✅ Styles are objects, not CSS strings
const styles = StyleSheet.create({
  box: { width: 100, height: 100, backgroundColor: 'blue' }
});

// ❌ No CSS strings
// style="width: 100px; height: 100px;"

// ✅ All sizes are density-independent pixels (dp) — no 'px' unit
fontSize: 16    // ✅
fontSize: '16px' // ❌

✓You're set up

Expo running, app on your phone, Fast Refresh working. In the next post we'll cover all the core components you'll use in every screen.

What's Next?

React Native #2 covers core components in depth — View, Text, Image, ScrollView, FlatList, TextInput, Pressable — and when to use each one.