Topic 1 of 15 · React Native

Introduction

Lesson TL;DRTopic 1: Introduction 📖 9 min read · 🎯 beginner · 🧭 Prerequisites: None Why this matters Up until now, you've been building things people open in a browser. But here's the thing — most of your user...
9 min read·beginner·react-native · mobile-development · expo · javascript

Topic 1: Introduction

📖 9 min read · 🎯 beginner · 🧭 Prerequisites: None

Why this matters

Up until now, you've been building things people open in a browser. But here's the thing — most of your users are on their phones, not their laptops. And a mobile app feels completely different from a website: it lives on the home screen, it works offline, it uses the camera and GPS. Normally, building for Android and iOS meant learning two separate languages. React Native changes that. You write JavaScript — the same JavaScript you already know — and it produces a real, native app for both platforms. That's what we're learning here.

What You'll Learn

  • What React Native is and why it matters for cross-platform mobile development
  • How to set up a React Native development environment using create-expo-app
  • How to read and navigate the default project structure
  • How to build components using React Native's core UI primitives
  • How to manage component state and pass data via props
  • How to implement multi-screen navigation with React Navigation

The Analogy

Think of React Native as a universal translator at a diplomatic summit. You write your speech once in one language — JavaScript — and the translator renders it natively to every delegate in the room: iOS delegates hear Swift-flavored words, Android delegates hear Kotlin-flavored words, but everyone receives the same message with the same meaning. You never have to write two speeches. The translator handles the dialect; you focus on the content. That is the core promise of React Native: one codebase, two native apps, zero duplication.

Chapter 1: What Is React Native?

React Native is a framework for building native mobile applications using JavaScript and React. Unlike hybrid solutions that wrap a web view, React Native compiles your component code down to actual native UI elements — meaning the <View> you write becomes a real UIView on iOS and a real android.view.View on Android.

Key Features of React Native

  1. Cross-Platform — Build applications for both iOS and Android using a single codebase.
  2. Native Components — Use native components to ensure high performance and a native look and feel.
  3. Hot Reloading — Quickly see the results of changes without rebuilding the entire app.
  4. Rich Ecosystem — Leverage a vast ecosystem of libraries and tools built by the community.
flowchart LR
    JS[JavaScript / React Code] --> RN[React Native Bridge]
    RN --> iOS[iOS Native UI]
    RN --> Android[Android Native UI]

Chapter 2: Setting Up the Development Environment

The class set up their workstations before writing a single line of app code.

Step 1: Install Node.js and npm

Ensure that Node.js and npm are installed. If not, download and install them from nodejs.org.

Step 2: Create a New React Native Project with create-expo-app

The current Expo bootstrap is npx create-expo-app (the older global expo-cli and expo init were deprecated by the Expo team starting with SDK 46 and are no longer maintained). Requires Node.js 18+ and works against the current Expo SDK (≥ 50) without any global install.

npx create-expo-app@latest my-first-app
cd my-first-app

Step 3: Start the Development Server

npx expo start

This command opens a new browser tab with the Expo development tools dashboard. You can scan the QR code with the Expo Go app on your mobile device to view the running app instantly — no build step required.

Chapter 3: Exploring the Project Structure

the trainer walked the class through every file Expo generated so nobody would be surprised later.

my-first-app/
├── node_modules/
├── assets/
│   └── ...
├── App.js
├── app.json
├── eas.json
├── babel.config.js
├── .expo/
├── package.json
└── package-lock.json
File / FolderPurpose
assets/Directory for storing images, fonts, and other static assets
App.jsThe main entry point for the application
app.jsonConfiguration file for the Expo project (name, slug, icon, etc.)
eas.jsonEAS Build configuration — used when you graduate from Expo Go to producing real .ipa / .apk artifacts
babel.config.jsBabel configuration file for transpiling modern JS
.expo/Local Expo cache and dev-client state — safe to ignore in git
package.jsonLists project dependencies and scripts

Note: Current create-expo-app templates ship TypeScript by default (App.tsx + tsconfig.json). For this intro we use JavaScript (App.js) to keep the focus on React Native fundamentals; you can pick the TS template later with npx create-expo-app@latest -- --template default-typescript.

Chapter 4: Building Your First React Native Component

The class's first hands-on exercise: replace the default screen with a simple welcome message.

Step 1: Modify App.js

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Welcome to Vizag!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  text: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
  },
});

Step 2: Run the Application

npx expo start

Scanning the QR code with the Expo Go app on a mobile device displays the welcome message "Welcome to Vizag!" centered on a white screen.

Chapter 5: Understanding Core Components and APIs

the trainer introduced the six core building blocks every React Native developer reaches for on day one.

Core Components

  1. View — A container component for laying out child components (the <div> of mobile).
  2. Text — A component for displaying text; all visible strings must be wrapped in <Text>.
  3. Image — A component for displaying images from local assets or remote URIs.
  4. TextInput — A component for capturing user input (text fields, search bars).
  5. ScrollView — A component for scrollable content when the screen isn't tall enough.
  6. StyleSheet — A module for defining and optimizing styles (similar to CSS-in-JS).

Example: Using All Core Components Together

import React from 'react';
import { StyleSheet, Text, View, Image, TextInput, ScrollView } from 'react-native';

export default function App() {
  return (
    <ScrollView contentContainerStyle={styles.container}>
      <Text style={styles.title}>Welcome to Vizag!</Text>
      <Image
        source={{ uri: 'https://placehold.co/150' }}
        style={styles.image}
      />
      <TextInput
        style={styles.input}
        placeholder="Enter your name"
      />
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flexGrow: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  image: {
    width: 150,
    height: 150,
    marginBottom: 20,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    paddingHorizontal: 10,
    width: '100%',
    marginBottom: 20,
  },
});

Chapter 6: Using State and Props

the trainer paused to cover the two data mechanisms every React Native component relies on — the same ones React developers already know, but now running on a phone.

State

State manages data that changes over time within a component. React Native uses the same useState hook as React on the web.

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

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Count: {count}</Text>
      <Button title="Increment" onPress={() => setCount(count + 1)} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
});

Props

Props pass data from a parent component into a child component. They are read-only from the child's perspective.

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

const Greeting = ({ name }) => (
  <Text style={styles.greeting}>Hello, {name}!</Text>
);

export default function App() {
  return (
    <View style={styles.container}>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  greeting: {
    fontSize: 20,
    marginBottom: 10,
  },
});

Chapter 7: Navigation in React Native

No real app lives on a single screen. the trainer introduced React Navigation, the community-standard library for moving between screens.

Step 1: Install React Navigation and Its Dependencies

npm install @react-navigation/native
npm install @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context

@react-navigation/native-stack uses each platform's native navigation primitives (UINavigationController on iOS, Fragment transitions on Android) and is the React Navigation team's current recommendation. The older JS-based @react-navigation/stack still works as a fallback if you need extreme customisation of transition gestures, but for almost every app native-stack is the right default.

Step 2: Set Up Navigation Between Two Screens

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { Button, Text, View } from 'react-native';

const Stack = createNativeStackNavigator();

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function DetailsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

NavigationContainer wraps the entire app and manages the navigation tree. createNativeStackNavigator provides a stack of screens where each new screen slides in from the right — the same pattern iOS and Android users already expect, rendered through each platform's native navigation primitives.

🧪 Try It Yourself

Task: Build a counter app that greets a user by name and tracks how many times they've tapped a button.

  1. Create a Greeting component that accepts a name prop and renders "Hello, <name>!".
  2. Add a useState counter starting at 0.
  3. Render a Button labeled "Tap me" that increments the counter on each press.
  4. Display the current count below the greeting.

Success criterion: You should see "Hello, Vizag!" and "Taps: 0" on launch, and the tap count should increase each time you press the button — visible live in the Expo Go app.

Starter snippet:

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

const Greeting = ({ name }) => <Text style={styles.greeting}>Hello, {name}!</Text>;

export default function App() {
  const [taps, setTaps] = useState(0);

  return (
    <View style={styles.container}>
      <Greeting name="Vizag" />
      <Text>Taps: {taps}</Text>
      <Button title="Tap me" onPress={() => setTaps(taps + 1)} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  greeting: { fontSize: 24, fontWeight: 'bold', marginBottom: 12 },
});

🔍 Checkpoint Quiz

Q1. What is the primary advantage of using React Native over writing separate iOS (Swift) and Android (Kotlin) apps?

A) React Native apps always run faster than native apps
B) A single JavaScript codebase targets both iOS and Android
C) React Native requires no JavaScript knowledge
D) React Native apps are always smaller in file size

Q2. Given the following snippet, what will the user see on screen after pressing the button three times?

const [count, setCount] = useState(0);
// ...
<Text>Count: {count}</Text>
<Button title="Increment" onPress={() => setCount(count + 1)} />

A) Count: 0
B) Count: 1
C) Count: 3
D) The app crashes because count is immutable

Q3. What is wrong with the following React Native code?

export default function App() {
  return (
    <View>
      Welcome to Vizag
    </View>
  );
}

A) View cannot be a root element
B) Raw text strings must be wrapped in a <Text> component
C) StyleSheet must always be used
D) Nothing is wrong

Q4. You are building an app with five screens. Which library + wrapper component handles navigation between them?

A) react-router-dom with a <BrowserRouter> wrapper
B) @react-navigation/native (plus @react-navigation/native-stack) with a <NavigationContainer> wrapper
C) react-navigation-legacy with a <NavRoot> wrapper
D) No library — React Native's built-in <Navigator> component handles it

A1. B — A single JavaScript codebase targets both iOS and Android. React Native compiles to native components on each platform, so one codebase delivers two real native apps.

A2. C — Count: 3. Each button press calls setCount(count + 1), incrementing state from 0 → 1 → 2 → 3 over three presses.

A3. B — Raw text strings must be wrapped in a <Text> component. React Native does not allow bare string children inside <View>; doing so throws a runtime error.

A4. B — Install @react-navigation/native plus @react-navigation/native-stack (with peer deps react-native-screens and react-native-safe-area-context), then wrap the entire app in <NavigationContainer>. react-router-dom is web-only, react-navigation-legacy is not a real package, and React Native ships no built-in navigator.

🪞 Recap

  • React Native lets you write JavaScript once and deploy native apps to both iOS and Android.
  • npx create-expo-app bootstraps a project instantly (the older global expo-cli/expo init is deprecated) and the Expo Go app lets you preview changes live on a real device without a full build.
  • The six core components — View, Text, Image, TextInput, ScrollView, and StyleSheet — are the building blocks of every React Native UI.
  • useState manages changing data inside a component; props pass data down from parent to child.
  • React Navigation (@react-navigation/native + @react-navigation/native-stack) is the standard solution for multi-screen apps, requiring a NavigationContainer at the app root.

📚 Further Reading

Like this topic? It’s one of 15 in React Native.

Block your seat for ₹2,500 and join the next cohort.

Course detailsBlock your seat →