Topic 43 of 56 · Full Stack Advanced

Topic 1 : Introduction

Lesson TL;DRTopic 1: Introduction to React Native 📖 9 min read · 🎯 beginner · 🧭 Prerequisites: None Why this matters Up until now, you've been building for the browser — websites and web apps that live on a sc...
9 min read·beginner·react-native · mobile-development · expo · javascript

Topic 1: Introduction to React Native

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

Why this matters

Up until now, you've been building for the browser — websites and web apps that live on a screen with a keyboard and mouse. But here's the thing — most of your users are on their phones. And phone apps feel different from websites. They're faster, smoother, and they live right on the home screen. So how do you build one without learning a completely new language from scratch? That's exactly where React Native comes in. One codebase, two platforms — iOS and Android — using the React skills you already have. Let's see how that works.

What You'll Learn

  • What React Native is and why it enables cross-platform mobile development
  • How to set up a React Native development environment with Expo CLI
  • How to build and style components using core React Native primitives
  • How to manage component state and pass data through props
  • How to implement multi-screen navigation using React Navigation

The Analogy

Think of React Native as a universal translator for mobile platforms. You write your instructions once in JavaScript — a language both iOS and Android can now understand through this translator — and each platform renders the results using its own genuine, native building blocks. Just as a skilled diplomat doesn't replace the local culture but rather bridges it, React Native doesn't fake a native look with a web wrapper; it calls real platform components under the hood. The result feels at home on an iPhone and equally at home on a Pixel, because on each device it actually is home.

Chapter 1: What Is React Native?

React Native is a framework for building native mobile applications using JavaScript and React. It allows developers to write code once and deploy it on both iOS and Android platforms, providing a seamless development experience without sacrificing performance or native feel.

Key Features of React Native

  1. Cross-Platform — Build applications for both iOS and Android using a single codebase.
  2. Native Components — Use genuine native components to ensure high performance and a native look and feel (no WebView wrapper).
  3. Hot Reloading — Quickly see the results of changes without rebuilding the entire app from scratch.
  4. Rich Ecosystem — Leverage a vast ecosystem of libraries and community tools.

Chapter 2: Setting Up the Development Environment

The class rolled up their sleeves. the trainer walked them through each step.

Step 1: Install Node.js and npm

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

Step 2: Install Expo CLI

Expo CLI is a tool for quickly getting started with React Native projects without needing to configure native build toolchains manually.

npm install -g expo-cli

Step 3: Create a New React Native Project

expo init my-first-app
cd my-first-app

Step 4: Start the Development Server

expo start

This command opens a new tab in your browser with the Expo development tools. Scan the QR code with the Expo Go app on your mobile device to view the running app live.

Chapter 3: Exploring the Project Structure

the trainer projected the scaffolded directory tree onto the classroom wall.

my-first-app/
├── node_modules/
├── assets/
│   └── ...
├── App.js
├── app.json
├── babel.config.js
├── package.json
└── package-lock.json
  • assets/ — Directory for storing images, fonts, and other static assets.
  • App.js — The main entry point for the application; this is where your root component lives.
  • app.json — Configuration file for the Expo project (name, icon, splash screen, etc.).
  • babel.config.js — Babel transpiler configuration.
  • package.json — Lists project dependencies and npm scripts.

Chapter 4: Building Your First React Native Component

The class's first hands-on task: display a welcome message on screen.

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

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

React Native ships with a set of built-in primitives that map directly to native UI elements on each platform.

Core Components

  1. View — A container component for laying out child components (think <div> for mobile).
  2. Text — A component for displaying text; all text in React Native 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 text input.
  5. ScrollView — A component for scrollable content containers.
  6. StyleSheet — A module for defining and optimizing component styles.

Example: Using 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://via.placeholder.com/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 shifted to the conceptual heart of React: how components manage and share data.

State

State is used to manage data that changes over time within a component. The useState hook returns the current value and a setter function.

Example: Counter with State

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 are used to pass data from a parent component into a child component. They are read-only from the child's perspective.

Example: Reusable Greeting Component via Props

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

A mobile app almost always has more than one screen. the trainer introduced React Navigation, the community-standard navigation library.

Step 1: Install React Navigation and Dependencies

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

Step 2: Set Up Navigation Between Two Screens

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

const Stack = createStackNavigator();

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. createStackNavigator gives you a stack-based history model — pressing the back button pops back to the previous screen automatically.

flowchart LR
    A[App.js\nNavigationContainer] --> B[Stack.Navigator]
    B --> C[HomeScreen]
    B --> D[DetailsScreen]
    C -->|navigation.navigate('Details')| D
    D -->|Back button| C

🧪 Try It Yourself

Task: Extend the navigation example to add a third screen — a Profile screen.

  1. Create a ProfileScreen component that displays a static name and bio.
  2. Add a "Go to Profile" button on HomeScreen that navigates to it.
  3. Register ProfileScreen in Stack.Navigator.

Starter snippet:

function ProfileScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 22, fontWeight: 'bold' }}>Alex of Vizag</Text>
      <Text style={{ marginTop: 10 }}>Senior Council Member · React Native enthusiast</Text>
    </View>
  );
}

Success criterion: Tapping "Go to Profile" on the Home Screen navigates to the Profile Screen, and the native back button returns you to Home.

🔍 Checkpoint Quiz

Q1. What does React Native use under the hood to render UI elements — a WebView, native platform components, or an HTML canvas?

A) A hidden WebView that renders HTML/CSS B) Native platform components (UIKit on iOS, Android Views on Android) C) An HTML5 canvas drawn at 60 fps D) A compiled Dart runtime

Q2. Given this snippet, what does the user see when they tap the button three times?

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

A) Count: 0 — state never updates in functional components B) Count: 1 — useState only allows one increment C) Count: 3 D) The app crashes because setCount is called inside onPress

Q3. What is the purpose of react-native-screens when installing React Navigation?

A) It provides built-in screen templates for common mobile layouts B) It enables native OS-level screen optimization for better performance during navigation transitions C) It replaces NavigationContainer with a simpler API D) It is a required peer dependency with no functional effect

Q4. You have a UserCard component that needs a username and avatarUrl to render. How would you pass this data to it from a parent component?

A) Store username and avatarUrl in UserCard's own useState and update from the parent via a ref B) Use props: <UserCard username="alice" avatarUrl="https://..." /> C) Use a global variable so both components can access it without props D) Import the values directly from the parent file

A1. B) Native platform components — React Native bridges JavaScript to UIKit (iOS) and Android Views, providing genuine native rendering rather than a web layer.

A2. C) Count: 3 — each onPress calls setCount(count + 1), incrementing by 1 each time and re-rendering the component with the new value.

A3. B) react-native-screens enables native OS-level screen management, which significantly improves navigation performance and memory usage by handing lifecycle control to the OS.

A4. B) Props are the standard mechanism for passing data into a child component from its parent. The child receives them as a plain object and can destructure { username, avatarUrl }.

🪞 Recap

  • React Native lets you build real iOS and Android apps from a single JavaScript/React codebase, rendering genuine native components on each platform.
  • Expo CLI bootstraps a React Native project instantly and provides the Expo Go app for live device previewing without any native build setup.
  • Core components like View, Text, Image, TextInput, and ScrollView are the fundamental building blocks of every React Native UI.
  • useState manages data that changes inside a component; props pass data downward from parent to child.
  • React Navigation (@react-navigation/native, @react-navigation/stack) is the standard library for moving between screens, requiring react-native-screens and react-native-safe-area-context as peer dependencies.

📚 Further Reading

Like this topic? It’s one of 56 in Full Stack Advanced.

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

Course detailsBlock your seat →