React Native Course Syllabus | Complete Modules & Projects

Module 1: Introduction to React Native

Course Overview: Introduction to React Native, its purpose, advantages, differences from other cross-platform frameworks, and environment setup. Run your first mobile app on Android/iOS.

Module 2: Core Concepts and Components

Course Overview: Learn JSX syntax, functional/class components, props, state management, event handling, and forms.

Module 3: Styling and Layout

• Using StyleSheet for component styling
• Flexbox for responsive layouts
• Handling different screen sizes and orientations
• Responsive design techniques using Dimensions API

Module 4: Creating Navigation and Drawer in React Native

Learn navigation using React Navigation library: stack, tab, drawer navigators, passing data between screens, and deep linking.

Module 5: State Management

• Context API
• Redux + Redux Thunk
• Optional: Recoil and Zustand

Module 6: Networking, CRUD, and Authentication

Course Overview: Connect your app with backend APIs, perform CRUD operations, implement authentication, and handle images and persistent storage.

6.1 Fetching Data from APIs

import React, { useEffect, useState } from 'react';
import { View, Text, FlatList } from 'react-native';
import axios from 'axios';

export default function UsersList() {
  const [users, setUsers] = useState([]);
  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/users')
      .then(res => setUsers(res.data))
      .catch(err => console.log(err));
  }, []);

  return (
    <FlatList
      data={users}
      keyExtractor={item => item.id.toString()}
      renderItem={({item}) => <Text>{item.name}</Text>}
    />
  );
}

6.2 CRUD Operations

Perform Create, Read, Update, Delete operations with backend API.

// Example: Create a To-Do item
axios.post('https://api.example.com/todos', { title: 'New Task' })
  .then(res => console.log(res.data))
  .catch(err => console.log(err));

// Update
axios.put('https://api.example.com/todos/1', { title: 'Updated Task' });

// Delete
axios.delete('https://api.example.com/todos/1');

6.3 Authentication (Login/Register)

Implement JWT-based login and registration with token storage in AsyncStorage.

import AsyncStorage from '@react-native-async-storage/async-storage';

// Login function
const login = async (email, password) => {
  const res = await axios.post('https://api.example.com/login', { email, password });
  await AsyncStorage.setItem('token', res.data.token);
};

6.4 Form Validation

Use Formik + Yup for validating login and CRUD forms.

import { Formik } from 'formik';
import * as Yup from 'yup';

const loginSchema = Yup.object().shape({
  email: Yup.string().email('Invalid email').required('Required'),
  password: Yup.string().min(6, 'Too Short!').required('Required'),
});

6.5 File/Image Upload

Select and upload images to server/cloud storage.

import * as ImagePicker from 'expo-image-picker';

const pickImage = async () => {
  const result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images,
    allowsEditing: true,
  });
  if (!result.canceled) {
    const formData = new FormData();
    formData.append('file', { uri: result.assets[0].uri, name: 'photo.jpg', type: 'image/jpeg' });
    axios.post('https://api.example.com/upload', formData);
  }
};

6.6 Persistent Storage

• Use AsyncStorage for saving user sessions
• SQLite for offline storage
• Local caching for better performance

Module 7: Advanced Features

• Animations & gestures
• Push notifications
• Maps & location services
• Camera & media integration

Module 8: Performance Optimization

• Rendering optimization (React.memo, PureComponent)
• Lazy loading & code splitting
• Memory management
• Image/media optimization
• Profiling and performance debugging

Module 9: Testing and Debugging

Unit & integration testing, debugging tools like React Native Debugger and Flipper. *(Already prepared)*

Module 10: Deployment and Publishing

• Building signed APKs and IPAs
• Publishing to Google Play / Apple App Store
• Over-the-Air updates (Expo)
• App versioning and release management

Module 11: Real-World Projects

• To-Do App (CRUD, local storage, authentication)
• News Reader App (API integration, navigation)
• Social Media App (Login, CRUD, image upload, notifications)
• E-commerce App (Product CRUD, cart, checkout workflow)