Create ClassRoom App using React-Native

Last Updated : 24 Jul, 2024

ClassRoom App using React Native is a simple application designed to facilitate online learning and classroom management. These apps are commonly used in educational institutions, schools, colleges, and universities to enhance the teaching and learning experience.

Preview of final output: Let us have a look at how the final application will look like.

Prerequisites:

Approach to create Classroom App:

The Classroom App is a simple application designed to facilitate online learning and classroom management. In this app, we created a beautiful UI for the classroom app.
In the classroom app, we added multiple features including a table button by which students can access the timetable section.
The Timetable screen shows the schedule for various courses, including the time and corresponding subject.
We also included a "Study Material" button to access a collection of study materials related to the courses.
Each study material entry includes a title and a link. Tap on a study material to open the link in a browser.
In both the Timetable and Study Material screens, there is a "Back to Home" button at the bottom. Tap it to return to the Home screen.

Features of a Classroom App:

Creation and organization of courses, subjects, or classes.
Recording and monitoring student attendance.
Displaying class schedules and timetables.
Allowing students to create and manage their profiles.

Steps to Create React Native Application:

Step 1: Create a react native application by using this command in the command prompt

React-native init ClassRoom App

Step 2: We will use some Icons in our app so, we will install dependency for icon.

npm i react-native-vector-icons
npm i react-native-fontawesome

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "mobx": "4.1.0",
    "mobx-react": "5.0.0",
    "@expo/vector-icons": "^13.0.0",
    "react-native-elements": "0.18.5",
    "react-native-vector-icons/FontAwesome": "*",
    "react-native-vector-icons": "10.0.3"
}

Example: Write the below source code into the App.js file.

JavaScript

import React, { useState, useEffect } from 'react';
import {
	View, Text,
	TouchableOpacity, ScrollView,
	FlatList, StyleSheet, Linking
} from 'react-native';
import Icon 
	from 'react-native-vector-icons/FontAwesome';

const ClassroomApp = () => {
	const [courses, setCourses] = useState([
		{
			id: 1, name: 'Mathematics',
			teacher: 'Mr. Smith',
			schedule: 'Mon, Wed, Fri 10:00 AM',
			icon: 'book'
		},
		{
			id: 2,
			name: 'Science',
			teacher: 'Ms. Johnson',
			schedule: 'Tue, Thu 2:00 PM',
			icon: 'flask'
		},
		{
			id: 3,
			name: 'History',
			teacher: 'Mr. Davis',
			schedule: 'Mon, Wed 1:00 PM',
			icon: 'globe'
		},

	]);

	const [notifications, setNotifications] = useState([
		{
			id: 1,
			content: 'New assignment uploaded for Mathematics'
		},
		{
			id: 2,
			content: 'Science class canceled tomorrow'
		},
		{
			id: 3,
			content: 'History quiz scheduled for next week'
		},
	]);

	const [profile, setProfile] = useState({
		name: 'Your Name : manish prajapati',
		bio: 'Student at SAGE university',
		email: '[email protected]',
	});

	const [activeScreen, setActiveScreen] =
		useState('home');

	const handleViewTimetable = () => {
		setActiveScreen('timetable');
	};

	const handleViewStudyMaterial = () => {
		setActiveScreen('studyMaterial');
	};

	const handleViewNotifications = () => {
		setActiveScreen('notifications');
	};

	const handleViewProfile = () => {
		setActiveScreen('profile');
	};

	const handleBackToHome = () => {
		setActiveScreen('home');
	};

	const renderScreen = () => {
		switch (activeScreen) {
			case 'home':
				return (
					<ScrollView>
						<View style={styles.cryptoList}>
							<Text
								style={styles.sectionTitle}>
								Courses
							</Text>
							<FlatList
								data={courses}
								keyExtractor={
									(item) =>
										item.id.toString()
								}
								renderItem={renderItem}
							/>
						</View>
					</ScrollView>
				);
			case 'timetable':
				return <TimetableScreen
					onBackToHome={handleBackToHome} />;
			case 'studyMaterial':
				return <StudyMaterialScreen
					onBackToHome={handleBackToHome} />;
			case 'notifications':
				return <NotificationsScreen
					notifications={notifications}
					onBackToHome={handleBackToHome} />;
			case 'profile':
				return <ProfileScreen
					profile={profile}
					onBackToHome={handleBackToHome} />;
			default:
				return null;
		}
	};
	const renderItem = ({ item }) => (
		<View style={styles.cryptoItem}>
			<Icon name={item.icon}
				size={30} color="#3498db" />
			<View>
				<Text style={styles.cryptoName}>
					{item.name}
				</Text>
				<Text style={styles.cryptoBalance}>
					Teacher: {item.teacher}{'\n'}
					Schedule: {item.schedule}
				</Text>
			</View>
		</View>
	);

	return (
		<View style={styles.container}>
			<View style={styles.profileSection}>
				<TouchableOpacity>
					<Icon name="user-circle"
						size={30} color="#3498db" />
				</TouchableOpacity>
				<Text style={styles.profileName}>
					{profile.name}
				</Text>
			</View>

			<View style={styles.banner}>
				<Text style={styles.bannerText}>
					Classroom App
				</Text>
				<Text style={styles.bannerText}>
					By geeksforgeeks
				</Text>
			</View>

			<View style={styles.buttonsContainer}>
				<TouchableOpacity style={styles.button}
					onPress={
						() =>
							handleViewTimetable()
					}>
					<Icon name="calendar"
						size={20}
						color="#3498db" />
					<Text>View Timetable</Text>
				</TouchableOpacity>
				<TouchableOpacity style={styles.button}
					onPress={
						() =>
							handleViewStudyMaterial()
					}>
					<Icon name="book" size={20}
						color="#3498db" />
					<Text>Study Material</Text>
				</TouchableOpacity>
				<TouchableOpacity style={styles.button}
					onPress={
						() =>
							handleViewNotifications()}>
					<Icon name="bell"
						size={20}
						color="#3498db" />
					<Text>Notifications</Text>
				</TouchableOpacity>
				<TouchableOpacity style={styles.button}
					onPress={
						() =>
							handleViewProfile()}>
					<Icon name="user"
						size={20}
						color="#3498db" />
					<Text>Profile</Text>
				</TouchableOpacity>
			</View>
			{renderScreen()}
			<View style={styles.bottomNav}>
				<TouchableOpacity
					style={styles.navItem}
					onPress={() => handleViewTimetable()}>
					<Icon name="calendar"
						size={20}
						color={
							activeScreen === 'home' ?
								'#3498db' :
								'#333'
						} />
					<Text style={
						{
							color: activeScreen === 'home' ?
								'#3498db' :
								'#333'
						}
					}>
						Home
					</Text>
				</TouchableOpacity>
				<TouchableOpacity
					style={styles.navItem}
					onPress={() => handleViewNotifications()}>
					<Icon name="bell" size={20}
						color={
							activeScreen === 'notifications' ?
								'#3498db' :
								'#333'
						} />
					<Text style=
						{
							{
								color: activeScreen === 'notifications' ?
									'#3498db' :
									'#333'
							}
						}>Notifications
					</Text>
				</TouchableOpacity>
				<TouchableOpacity
					style={styles.navItem}
					onPress={() => handleViewProfile()}>
					<Icon name="user" size={20}
						color=
						{
							activeScreen ===
								'profile' ?
								'#3498db' : '#333'
						} />
					<Text style=
						{
							{
								color: activeScreen ===
									'profile' ?
									'#3498db' : '#333'
							}}>
						Profile
					</Text>
				</TouchableOpacity>
			</View>
		</View>
	);
};

const TimetableScreen = ({ onBackToHome }) => {
	const timetableData = [
		{
			time: '9:00 AM - 10:30 AM',
			course: 'Mathematics'
		},
		{
			time: '11:00 AM - 12:30 PM',
			course: 'Science'
		},
		{
			time: '1:00 PM - 2:30 PM',
			course: 'History'
		},
	];

	return (
		<ScrollView>
			<View style={styles.screenContainer}>
				<Text style={styles.sectionTitle}>
					Timetable
				</Text>
				<FlatList
					data={timetableData}
					keyExtractor={(item, index) => index.toString()}
					renderItem={({ item }) => (
						<View style={styles.timetableItem}>
							<Text style={styles.timetableTime}>
								{item.time}
							</Text>
							<Text style={styles.timetableCourse}>
								{item.course}
							</Text>
						</View>
					)}
				/>
				<TouchableOpacity style={styles.backButton}
					onPress={onBackToHome}>
					<Text style={styles.backButtonText}>
						Back to Home
					</Text>
				</TouchableOpacity>
			</View>
		</ScrollView>
	);
};

const StudyMaterialScreen = ({ onBackToHome }) => {
	const materialData = [
		{
			title: 'Introduction to Mathematics',
			link: 'https://www.geeksforgeeks.org/maths/'
		},
		{
			title: 'Chemistry Basics',
			link: 'https://www.geeksforgeeks.org/chemistry/'
		},
		{
			title: 'World History Overview',
			link: 'https://www.geeksforgeeks.org/history-notes-for-upsc-exam/'
		},
	];

	const handleOpenLink = (link) => {
		Linking.openURL(link);
	};

	return (
		<ScrollView>
			<View style={styles.screenContainer}>
				<Text style={styles.sectionTitle}>Study Material</Text>
				<FlatList
					data={materialData}
					keyExtractor={(item, index) => index.toString()}
					renderItem={({ item }) => (
						<TouchableOpacity
							style={styles.studyMaterialItem}
							onPress={() => handleOpenLink(item.link)}
						>
							<Text style={styles.studyMaterialTitle}>
								{item.title}
							</Text>
							<Text style={styles.studyMaterialLink}>
								{item.link}
							</Text>
						</TouchableOpacity>
					)}
				/>
				<TouchableOpacity style={styles.backButton} 
					onPress={onBackToHome}>
					<Text style={styles.backButtonText}>Back to Home</Text>
				</TouchableOpacity>
			</View>
		</ScrollView>
	);
};

const NotificationsScreen = ({ notifications, onBackToHome }) => {
	return (
		<ScrollView>
			<View style={styles.screenContainer}>
				<Text style={styles.sectionTitle}>Notifications</Text>
				<FlatList
					data={notifications}
					keyExtractor={(item) => item.id.toString()}
					renderItem={({ item }) => (
						<View style={styles.notificationItem}>
							<Icon name="bell" size={20} color="#3498db" />
							<Text>{item.content}</Text>
						</View>
					)}
				/>
				<TouchableOpacity style={styles.backButton}
					onPress={onBackToHome}>
					<Text style={styles.backButtonText}>Back to Home</Text>
				</TouchableOpacity>
			</View>
		</ScrollView>
	);
};

const ProfileScreen = ({ profile, onBackToHome }) => {
	return (
		<ScrollView>
			<View style={styles.screenContainer}>
				<Text style={styles.sectionTitle}>Profile</Text>
				<Text>Name: {profile.name}</Text>
				<Text>Bio: {profile.bio}</Text>
				<Text>Email: {profile.email}</Text>
				<TouchableOpacity style={styles.backButton}
					onPress={onBackToHome}>
					<Text style={styles.backButtonText}>Back to Home</Text>
				</TouchableOpacity>
			</View>
		</ScrollView>
	);
};

const styles = StyleSheet.create({

	container: {
		flex: 1,
		padding: 16,
	},
	profileSection: {
		flexDirection: 'row',
		justifyContent: 'flex-end',
		alignItems: 'center',
		marginTop: 6,
	},
	profileName: {
		marginLeft: 8,
		fontSize: 18,
	},
	banner: {
		backgroundColor: '#3498db',
		padding: 16,
		borderRadius: 8,
		marginBottom: 16,
		marginTop: 10,
		alignItems: 'center',
	},
	bannerText: {
		fontSize: 20,
		color: '#fff',
		marginBottom: 8,
		fontWeight: 'bold',
	},
	buttonsContainer: {
		flexDirection: 'row',
		justifyContent: 'space-between',
		marginBottom: 16,
	},
	button: {
		flex: 1,
		backgroundColor: '#e0e0e0',
		padding: 12,
		borderRadius: 5,
		alignItems: 'center',
		flexDirection: 'row',
		justifyContent: 'space-between',
		marginLeft: 10,
	},
	cryptoList: {
		flex: 1,
	},
	sectionTitle: {
		fontSize: 18,
		fontWeight: 'bold',
		marginBottom: 8,
	},
	cryptoItem: {
		flexDirection: 'row',
		justifyContent: 'space-between',
		alignItems: 'center',
		padding: 16,
		borderBottomWidth: 1,
		borderBottomColor: '#e0e0e0',
	},
	cryptoName: {
		fontSize: 18,
		fontWeight: 'bold',
		marginLeft: 12,
	},
	cryptoBalance: {
		fontSize: 14,
		color: '#555',
		marginLeft: 12,
	},
	bottomNav: {
		flexDirection: 'row',
		justifyContent: 'space-around',
		padding: 16,
		borderTopWidth: 1,
		borderTopColor: '#e0e0e0',
	},
	navItem: {
		alignItems: 'center',
	},
	screenContainer: {
		flex: 1,
		padding: 16,
	},
	timetableItem: {
		flexDirection: 'row',
		justifyContent: 'space-between',
		alignItems: 'center',
		padding: 16,
		borderBottomWidth: 1,
		borderBottomColor: '#e0e0e0',
	},
	timetableTime: {
		fontSize: 18,
		fontWeight: 'bold',
		marginLeft: 12,
	},
	timetableCourse: {
		fontSize: 14,
		color: '#555',
		marginLeft: 12,
	},
	studyMaterialItem: {
		padding: 16,
		borderBottomWidth: 1,
		borderBottomColor: '#e0e0e0',
	},
	studyMaterialTitle: {
		fontSize: 18,
		fontWeight: 'bold',
	},
	studyMaterialLink: {
		fontSize: 14,
		color: '#3498db',
	},
	backButton: {
		backgroundColor: '#e0e0e0',
		padding: 12,
		borderRadius: 8,
		marginTop: 16,
		alignItems: 'center',
	},
	backButtonText: {
		fontSize: 16,
		color: '#333',
	},

	notificationItem: {
		flexDirection: 'row',
		alignItems: 'center',
		padding: 16,
		borderBottomWidth: 1,
		borderBottomColor: '#e0e0e0',
	},
});

export default ClassroomApp;

Step to Run the Project:

Step 1: Depending on your operating system, type the following command

For android:

React-native run-android

For IOS:

React-native run-ios

Output:

Create Job Board App using React-Native

manish15aug2003

Improve

Article Tags :

Create ClassRoom App using React-Native

Prerequisites:

Approach to create Classroom App:

Features of a Classroom App:

Steps to Create React Native Application:

Similar Reads

Thank You!

What kind of Experience do you want to share?