Create a Dashboard App using React-Native
A dashboard app using react native is a software application designed to provide a consolidated and visual representation of important information, data, or features in a single, easily accessible interface. Dashboards are commonly used in various industries to help users monitor, analyze, and manage data efficiently.
Preview of final output: Let us have a look at how the final output will look like.
Prerequisites:
Approach to create Dashboard App:
- Dashboard apps are commonly used in various industries to help users monitor, analyze, and manage data efficiently.
- We added multiple features to the dashboard with multiple sections, including Profile, Settings, Analytics, Messages, Tasks, and Calendar.
- Users can navigate between sections by selecting options within each section.
- The Profile section displays user information, such as username and email.
- The Settings section allows users to view and modify notification settings and theme preferences.
- The Tasks section presents upcoming tasks with titles and descriptions in a stylized manner.
- Each task is displayed with a distinctive background color.
- The Calendar section showcases events for the week, including date, time, title, and location.
Steps to Create React Native Application:
Step 1: Create a react native application by using this command in the command prompt
React-native init DashboardApp
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 } from 'react' ; import { View, Text, StyleSheet, TouchableOpacity } from 'react-native' ; import Icon from 'react-native-vector-icons/Ionicons' ; const DashboardApp = () => { const [activeSection, setActiveSection] = useState( 'Home' ); const renderSection = () => { switch (activeSection) { case 'Profile' : return <ProfileSection />; case 'Settings' : return <SettingsSection />; case 'Analytics' : return <AnalyticsSection />; case 'Messages' : return <MessagesSection />; case 'Tasks' : return <TasksSection />; case 'Calendar' : return <CalendarSection />; default : return <HomeSection />; } }; const renderBackButton = () => ( <TouchableOpacity onPress={ () => setActiveSection( 'Home' ) } style={styles.backButton}> <Icon name= "arrow-back" size={30} color= "#000000" /> <Text style={styles.backButtonText}> Back to Home </Text> </TouchableOpacity> ); const HomeSection = () => ( <View style={styles.container}> <View style={styles.headerContainer}> <Text style={styles.headerTitle}> Welcome to the Dashboard! </Text> <View style={styles.buttonsContainer}> <TouchableOpacity onPress= { () => setActiveSection( 'Profile' ) } style={styles.button}> <Icon name= "person" size={30} color= "white" /> <Text style={styles.buttonText}> Profile </Text> </TouchableOpacity> <TouchableOpacity onPress={ () => setActiveSection( 'Settings' ) } style={styles.button}> <Icon name= "settings" size={30} color= "white" /> <Text style={styles.buttonText}> Settings </Text> </TouchableOpacity> </View> </View> <View style={styles.featuresContainer}> <PressableFeatureBox name= "Analytics" icon= "stats-chart" onPress= { () => setActiveSection( 'Analytics' ) } /> <PressableFeatureBox name= "Messages" icon= "chatbox" onPress= { () => setActiveSection( 'Messages' ) } /> <PressableFeatureBox name= "Tasks" icon= "checkbox-outline" onPress= { () => setActiveSection( 'Tasks' ) } /> <PressableFeatureBox name= "Calendar" icon= "calendar" onPress= { () => setActiveSection( 'Calendar' ) } /> </View> </View> ); const ProfileSection = () => ( <View style={styles.container}> <View style={styles.headerContainer}> {renderBackButton()} <Text style={styles.headerTitle}> Profile Section </Text> </View> <View style={styles.contentContainer}> <Icon name= "person" size={80} color= "#3498db" /> <Text style={styles.contentText}> Username: Maniiish </Text> <Text style={styles.contentText}> Email: manish.pra@example.com </Text> </View> </View> ); const SettingsSection = () => ( <View style={styles.container}> <View style={styles.headerContainer}> {renderBackButton()} <Text style={styles.headerTitle}> Settings Section </Text> </View> <View style={styles.contentContainer}> <Icon name= "settings" size={80} color= "#3498db" /> <Text style={styles.contentText}> Notifications: On </Text> <Text style={styles.contentText}> Theme: Light </Text> </View> </View> ); const PressableFeatureBox = ( { name, icon, onPress } ) => ( <TouchableOpacity onPress={onPress} style={styles.featureBox}> <Icon name={icon} size={50} color= "#3498db" /> <Text style={styles.featureName}> {name} </Text> </TouchableOpacity> ); const AnalyticsSection = () => ( <View style={styles.container}> <View style={styles.headerContainer}> {renderBackButton()} <Text style={styles.headerTitle}> Analytics Section </Text> </View> <View style={styles.contentContainer}> <Text style={styles.contentText}> Analytics Content Goes Here </Text> </View> </View> ); const MessagesSection = () => ( <View style={styles.container}> <View style={styles.headerContainer}> {renderBackButton()} <Text style={styles.headerTitle}> Messages Section </Text> </View> <View style={styles.contentContainer}> <Text style={styles.contentText}> Messages Content Goes Here </Text> </View> </View> ); const TasksSection = () => ( <View style={styles.container}> <View style={styles.headerContainer}> {renderBackButton()} <Text style={styles.headerTitle}> Tasks Section </Text> </View> <View style={styles.contentContainer}> <Text style={styles.contentTitle}> Upcoming Tasks </Text> <TaskItem title= "Task 1" description= "GeekforBeginner contest." /> <TaskItem title= "Task 2" description= "mock interview" /> <TaskItem title= "Task 3" description= "Sample paper solution ." /> </View> </View> ); const CalendarSection = () => ( <View style={styles.container}> <View style={styles.headerContainer}> {renderBackButton()} <Text style={styles.headerTitle}> Calendar Section </Text> </View> <View style={styles.contentContainer}> <Text style={styles.contentTitle}> Events This Week </Text> <EventItem date= "Mon, Jan 10" time= "3:00 PM - 5:00 PM" title= "Meeting with Team" location= "Office Conference Room" /> <EventItem date= "Thu, Jan 13" time= "10:00 AM - 12:00 PM" title= "Client Presentation" location= "Online" /> <EventItem date= "Sat, Jan 15" time= "6:00 PM - 8:00 PM" title= "Dinner with Friends" location= "Local Restaurant" /> </View> </View> ); const TaskItem = ( { title, description }) => ( <View style={styles.taskItem}> <Text style={styles.taskTitle}> {title} </Text> <Text style={styles.taskDescription}> {description} </Text> </View> ); const EventItem = ( { date, time, title, location }) => ( <View style={styles.eventItem}> <View style={styles.eventDateTime}> <Text style={styles.eventDate}> {date} </Text> <Text style={styles.eventTime}> {time} </Text> </View> <Text style={styles.eventTitle}> {title} </Text> <Text style={styles.eventLocation}> {location} </Text> </View> ); const styles = StyleSheet.create({ container: { flex: 1, }, headerContainer: { backgroundColor: '#3498db' , padding: 20, borderBottomLeftRadius: 20, borderBottomRightRadius: 20, elevation: 5, }, headerTitle: { fontSize: 24, fontWeight: 'bold' , color: 'white' , marginBottom: 20, }, buttonsContainer: { flexDirection: 'row' , justifyContent: 'space-between' , }, button: { flexDirection: 'row' , alignItems: 'center' , backgroundColor: '#2ecc71' , padding: 10, borderRadius: 5, }, buttonText: { color: 'white' , fontSize: 16, fontWeight: 'bold' , marginLeft: 10, }, featuresContainer: { flex: 1, flexDirection: 'row' , flexWrap: 'wrap' , justifyContent: 'space-around' , marginTop: 20, }, featureBox: { alignItems: 'center' , justifyContent: 'center' , width: '45%' , aspectRatio: 1, backgroundColor: 'white' , borderRadius: 10, marginVertical: 10, elevation: 5, }, featureName: { marginTop: 10, fontSize: 16, fontWeight: 'bold' , color: '#555' , }, backButton: { flexDirection: 'row' , alignItems: 'center' , }, backButtonText: { color: '#3498db' , fontSize: 16, marginLeft: 10, }, contentContainer: { flex: 1, padding: 20, }, contentText: { fontSize: 16, marginBottom: 10, color: '#555' , }, contentTitle: { fontSize: 20, fontWeight: 'bold' , color: '#333' , marginBottom: 10, }, taskItem: { backgroundColor: '#3498db' , borderRadius: 10, padding: 15, marginVertical: 10, }, taskTitle: { color: 'white' , fontSize: 18, fontWeight: 'bold' , }, taskDescription: { color: 'white' , fontSize: 14, marginTop: 5, }, eventItem: { backgroundColor: 'white' , borderRadius: 10, padding: 15, marginVertical: 10, elevation: 5, }, eventDateTime: { flexDirection: 'row' , justifyContent: 'space-between' , marginBottom: 10, }, eventDate: { color: '#3498db' , fontSize: 16, fontWeight: 'bold' , }, eventTime: { color: '#555' , fontSize: 16, }, eventTitle: { fontSize: 18, fontWeight: 'bold' , color: '#333' , }, eventLocation: { fontSize: 14, color: '#777' , }, }); return <View style={styles.container}> {renderSection()} </View>; }; export default DashboardApp; |
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: