Create ClassRoom App using React-Native
Last Updated :
03 Jul, 2025
Improve
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.
To give you a better idea of what we’re going to create, let’s watch a demo video.
Demo Video
Playground
Note: This Section is to interact with the app which you are going to build.
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.
Step-by-Step Implementation
Step 1: Create a React Native Project
Now, create a project with the following command.
npx create-expo-app app-name --template
Note: Replace the app-name with your app name for example : react-native-demo-app
Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app that is as clean as an empty canvas in JavaScript.
It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.
Now go into your project folder, i.e., react-native-demo
cd app-nameProject Structure:
Step 2: Run Application
Start the server by using the following command.
npx expo startThen, the application will display a QR code.
- For the Android users,
- For the Android Emulator, press " a" as mentioned in the image below.
- For the Physical Device, download the " Expo Go " app from the Play Store. Open the app, and you will see a button labeled " Scan QR Code. " Click that button and scan the QR code; it will automatically build the Android app on your device.
- For iOS users, simply scan the QR code using the Camera app.
- If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.
Step 3: Start Coding
Example: Write the below source code into the App.js file.
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: 'manish001xx002@gmail.com',
});
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;
