React Native Mini Project

A mini project is a small application created to practice multiple programming concepts together.

For example, a React Native mini project can combine:

• Components
• Props
• State
• Events
• Forms
• FlatList
• Navigation
• API requests
• AsyncStorage

Our mini project will be a simple student course application.

Student Course App

Home
  ↓
Course List
  ↓
Course Details
  ↓
Student Profile

The project is designed to demonstrate the main concepts learned in previous React Native lessons.

The application can include the following features:

• Home screen
• Course list
• Course details
• Student profile
• Login screen
• Registration screen
• Local storage
• API integration
• Loading state
• Error handling

Before writing code, identify the screens required by the application.

Login
Register
Home
Courses
Course Details
Profile

Planning screens first makes the navigation structure easier to design.

A new React Native project can be created using the development setup chosen for the course.

For an Expo-based project, for example:

npx create-expo-app StudentCourseApp

Then move into the project directory:

cd StudentCourseApp

A simple project can be organized into folders for screens, components, navigation, and services.

StudentCourseApp/
│
├── components/
│
├── screens/
│
├── navigation/
│
├── services/
│
├── assets/
│
└── App.js

import React from "react";

import {
    View,
    Text
} from "react-native";

export default function HomeScreen() {

    return (

        <View>

            <Text>
                Welcome to Student Course App
            </Text>

        </View>

    );

}

The home screen can later contain course categories, featured courses, and other application information.

For the first version of the project, course data can be stored in a JavaScript array.

const courses = [

    {
        id: "1",
        name: "HTML",
        duration: "3 Months"
    },

    {
        id: "2",
        name: "CSS",
        duration: "3 Months"
    },

    {
        id: "3",
        name: "React Native",
        duration: "6 Months"
    }

];

<FlatList
    data={courses}
    keyExtractor={
        item => item.id
    }
    renderItem={({ item }) => (

        <Text>
            {item.name}
        </Text>

    )}
/>

FlatList is useful for displaying a collection of course records.

A reusable component can display information about each course.

function CourseCard({ course }) {

    return (

        <View>

            <Text>
                {course.name}
            </Text>

            <Text>
                {course.duration}
            </Text>

        </View>

    );

}

This demonstrates the use of props with reusable components.

const styles = StyleSheet.create({

    card: {

        padding: 16,
        margin: 10,
        borderRadius: 10,
        backgroundColor: "#ffffff"

    },

    title: {

        fontSize: 20,
        fontWeight: "bold"

    }

});

The StyleSheet API can keep styling organized.

A course details screen can show more information about the selected course.

Course Details

Course Name:
React Native

Duration:
6 Months

Description:
Learn mobile application
development using React Native.

Navigation parameters can be used to send course information to the details screen.

navigation.navigate(
    "CourseDetails",
    {
        course: item
    }
);

The destination screen can read the parameter and display the selected course.

The profile screen can display information about the current student.

Student Profile

Name: Rahul Kumar
Email: rahul@example.com
Course: React Native

In a real application, this information can come from an API.

The project can contain a login screen before the student accesses protected application screens.

Login
  ↓
Authentication
  ↓
Home
  ↓
Courses
  ↓
Profile

Authentication state can determine whether the user sees the login flow or the main application.

New students can be given a registration screen.

Register

Name
Email
Password
Confirm Password

        ↓

Create Account

The registration form can send the data to a PHP API in a backend-based version of the project.

const [user, setUser] =
    useState(null);

A value of null can represent a logged-out state in a simple example.

After successful authentication:

setUser(data.user);

AsyncStorage can be used for suitable non-sensitive local application data.

await AsyncStorage.setItem(
    "userId",
    String(user.id)
);

The application can read the value when it starts and then perform the appropriate session check.

After the basic project works with local data, courses can be loaded from a PHP MySQL API.

const response = await fetch(
    "https://example.com/api/courses.php"
);

const data =
    await response.json();

setCourses(data.courses);

API calls can be moved into a service file to keep screen components clean.

export async function getCourses() {

    const response = await fetch(
        "https://example.com/api/courses.php"
    );

    return await response.json();

}

A screen can then call the service function instead of containing all API request code.

A loading state should be displayed while the application is requesting data.

const [loading, setLoading] =
    useState(true);

{loading ? (

    <ActivityIndicator />

) : (

    <CourseList />

)}

API requests can fail because of network problems or server errors.

const [error, setError] =
    useState("");

try {

    // API request

} catch (error) {

    setError(
        "Unable to load courses"
    );

}

A search feature can be added using a TextInput and filtered course data.

const [search, setSearch] =
    useState("");

const filteredCourses =
    courses.filter(course =>

        course.name
            .toLowerCase()
            .includes(
                search.toLowerCase()
            )

    );

The filtered list can then be supplied to FlatList.

The profile screen can contain a logout button.

function handleLogout() {

    setUser(null);

}

A real project should also clear or invalidate the appropriate application session data according to its authentication architecture.

The complete navigation can separate authentication screens from the main application.

Root Navigator
│
├── Auth Navigator
│   ├── Login
│   └── Register
│
└── App Navigator
    ├── Home
    ├── Courses
    ├── Course Details
    └── Profile

Test every important application flow before considering the project complete.

• Open the application.
• Check the login screen.
• Test registration validation.
• Test successful login.
• Test invalid login.
• Open the course list.
• Open course details.
• Test course search.
• Test profile screen.
• Test logout.
• Test API loading and errors.

StudentCourseApp/
│
├── components/
│   ├── CourseCard.js
│   └── Loading.js
│
├── screens/
│   ├── LoginScreen.js
│   ├── RegisterScreen.js
│   ├── HomeScreen.js
│   ├── CoursesScreen.js
│   ├── CourseDetailsScreen.js
│   └── ProfileScreen.js
│
├── navigation/
│   ├── AuthNavigator.js
│   └── AppNavigator.js
│
├── services/
│   └── api.js
│
├── assets/
│
└── App.js

• Break large screens into reusable components.
• Keep navigation organized.
• Keep API functions separate from UI components where practical.
• Use meaningful component and variable names.
• Handle loading and error states.
• Validate user input.
• Do not store passwords locally.
• Use HTTPS for production API requests.
• Use prepared statements in the PHP backend.
• Test each feature before adding the next feature.

Start Application
       ↓
Authentication Check
       ↓
Login / Register
       ↓
Authenticated User
       ↓
Home Screen
       ↓
Load Courses
       ↓
Display Course List
       ↓
Select Course
       ↓
Course Details
       ↓
Student Profile
       ↓
API + MySQL Data
       ↓
Logout

This mini project brings together many of the React Native concepts covered throughout the course. It can also be expanded with attendance, assignments, payments, notifications, profile editing, and other real application features.