πŸ“±

React Native Fundamentals

Jul 16, 2025

View transcript

Overview

This lecture introduces the fundamentals of React Native, including its architecture, setup, and practical usage for building cross-platform mobile applications. It covers essential tools, project structure, styling, and initial layout creation.

Introduction to React Native

  • React Native allows building native mobile apps using JavaScript and React knowledge.
  • It uses real native components on Android and iOS, not just browser views or canvases.
  • React Native provides APIs to access device features (e.g., camera, gyroscope, file system).
  • The course requires prior knowledge of React, TypeScript, and basic CSS concepts.

Course Structure & Tools

  • The course is divided into modules: lectures, exercises, and tests for each topic.
  • Initial setup includes Visual Studio Code (recommended editor), Git client (e.g., Fork or GitKraken), and Google Chrome for debugging.
  • Requires Node.js (preferably LTS version) installed, either via package from the official site or through nvm.
  • Mobile emulator setup: Android Studio for all OS; Xcode for macOS users (for iOS development).

Project Setup & Running the App

  • Use Expo CLI (npx create-expo-app) to create a project with TypeScript template.
  • Avoid folder paths with spaces for compatibility with Xcode.
  • Launch app on emulators (Android/iOS) or real devices using Expo Go.
  • Main project files: App.tsx, assets folder (for images/icons), and app.json for Expo configuration.

React Native Components & Styling

  • Common components: View (container, like div), Text (for displaying text), TextInput, Button, Image, Switch.
  • Only use components imported from react-native; HTML tags like div or p are not supported.
  • Styling is done via StyleSheet objects, similar to CSS, but not all CSS features are supported.
  • Flexbox is the primary layout system; supports properties like flexDirection, justifyContent, alignItems, etc.

Flexbox & Layouts

  • flexDirection: 'column' (default) stacks elements vertically; 'row' arranges horizontally.
  • justifyContent aligns items on the main axis; alignItems aligns on the cross axis.
  • Use flexWrap to allow items to wrap to the next line; manage gaps with gap, rowGap, columnGap.
  • Responsive layouts can be built using percentages or device width from the Dimensions API.

Figma Integration & Design System

  • Use Figma's inspect or plugins to translate designs into React Native styles.
  • Centralize design tokens (colors, radius, spacing, font sizes) in a constants file for consistency and easier updates.

Practical Exercise: Login Screen Layout

  • Structure: Centered block with logo, two text inputs, a button, and a password recovery link.
  • Use Flexbox properties to position and space all elements.
  • Export and use images and SVG icons (with react-native-svg).
  • Build reusable components for inputs (with show/hide password logic) and buttons.

Key Terms & Definitions

  • React Native β€” A framework for building native mobile applications using React and JavaScript.
  • Expo CLI β€” Tooling for building and running React Native projects easily.
  • StyleSheet β€” Object-based styling system similar to CSS, used in React Native.
  • Flexbox β€” Layout model for arranging elements in React Native.
  • Expo Go β€” Mobile app for previewing React Native projects on real devices.
  • Design Tokens β€” Centralized constants for reusable design values (colors, spacing, etc.).

Action Items / Next Steps

  • Install Node.js (LTS version), Visual Studio Code, and required emulators (Android Studio/Xcode).
  • Set up the project using Expo CLI with the TypeScript template.
  • Familiarize yourself with Figma for design translation.
  • Complete the initial layout exercise for the login screen using Flexbox.
  • Review and apply design tokens in your project.

Full transcript