Course Code: reactcustomnok
Duration: 20 hours
Prerequisites:
  • The tools needed for the course: 

– cell phone (Android or IOS), usb cord 

– computer with MacOS / Windows or Linux 

– Node.JS installed on a machine with version at least 20 

– Android Studio or Xcode installed on a machine 

Course Outline:

Day 1


What is React Native?

  • RN vs. native apps vs. hybrid apps vs. web apps
  • React Native architecture
  • Comparison of so called “old” and “new architecture”
     
  • Environment Setup
    • Node, npm/yarn
    • Installing React Native CLI / Expo CLI
    • How to set up Android Studio/Xcode Simulators (just explanation we’re not going to do that )
    • Hermes – js engine for RN
       
  • First App: Hello World
     
    • Project creation
    • Folder structure walkthrough
       
  • Core React Concepts (Recap)
     
    • JSX
    • Components
    • Props and State
    • Hooks
       
  • Hands-On
     
    • Building simple app
    • Hot reloading, debugging basics

Day 2

  • React Native Core Components
     
    • View, Text, Image, TextInput, Button, ScrollView, FlatList, ListView (we’re going to quickly cover all of the components )
       
  • Styling in React Native
     
    • Stylesheets
    • Flexbox layout
    • Margin, padding, colors
       
  • Responsive Design
     
    • Dimensions, Platform API
    • SafeAreaView
       
  • Hands-On
     
    • Build a user profile screen with images and lists
    • Add custom styles, flex layouts
       
  • 2.5 Debugging & Tools
     
    • Using React Native Debugger/Flipper
    • Emulator/Device testing tips
       

Day 3

  • Navigation
     
    • Why navigation is needed
    • Installing & using React Navigation
    • Stack, Tab, and Drawer navigators
       
  • Passing Data Between Screens
     
    • Params, navigation props
       
  • State Management Overview
     
    • Prop drilling vs. Context API
       
  • Using the Context API
     
    • Creating and providing context
    • Practical state sharing (e.g., theme, authentication)
       
  • Hands-On
     
    • Multi-screen app with navigation
    • Global state with Context for login/user profile
       

Day 4

  •  Fetching Data
     
    • Fetch API & Axios usage
    • Handling loading, errors
    • Firebase overview 
       
  • Async Storage
     
    • Storing data locally
    • AsyncStorage basics
       
  • Handling User Input & Forms
     
    • Controlled components
    • Form validation (Formik, Yup basics)
       
  • Practical Example
     
    • Build a to-do list or product listing app fetching from API
    • Save favorite items locally
       
  • Error Handling & User Feedback
     
    • Toasts, alerts, loaders

 

Day 5

  • Native Device APIs
     
    • Permissions, camera, location (using Expo modules or react-native libraries)
       
  • Animations & Gestures
     
    • Basic Animated API usage
    • Touchable & gesture basics
       
  • Code Organization & Optimization
     
    • Folder structure for scale
    • Performance tips
       
  • Testing
     
    • Basics of Jest & React Native Testing Library
       
  • Publishing Your App
     
    • Preparing for release (iOS/Android)
    • Building APK/IPA
    • Overview of App Store/Play Store submission