Create a Dashboard App using React-Native

Last Updated : 08 Jun, 2025

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.

create_a_dashboard_app_using_react_native

To give you a better idea of what we’re going to create, let’s watch a demo video.

Demo Video

Prerequisites:

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-name

Project Structure:

Step 2: Run Application

Start the server by using the following command.

npx expo start

Then, 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 4: Start Coding

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.

App.js:

App.js

// Importing the useState hook to manage component state
import { useState } from 'react';

// Importing React Native core components
import {
  View, Text,
  StyleSheet, TouchableOpacity
} from 'react-native';

// Importing Ionicons from react-native-vector-icons for using icons
import Icon from 'react-native-vector-icons/Ionicons';

// Main functional component
const DashboardApp = () => {
  // Declaring state variable to track the currently active section
  const [activeSection, setActiveSection] = useState('Home');

  // Function to render the component based on the selected section
  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 />; // Fallback to Home
    }
  };

  // Function to render a back button that returns to the Home section
  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>
  );

  // Component for the Home section of the dashboard
  const HomeSection = () => (
    <View style={styles.container}>
      <View style={styles.headerContainer}>
        <Text style={styles.headerTitle}>Welcome to the Dashboard!</Text>
        <View style={styles.buttonsContainer}>
          {/* Profile button */}
          <TouchableOpacity
            onPress={() => setActiveSection('Profile')}
            style={styles.button}>
            <Icon name="person" size={30} color="white" />
            <Text style={styles.buttonText}>Profile</Text>
          </TouchableOpacity>
          {/* Settings button */}
          <TouchableOpacity
            onPress={() => setActiveSection('Settings')}
            style={styles.button}>
            <Icon name="settings" size={30} color="white" />
            <Text style={styles.buttonText}>Settings</Text>
          </TouchableOpacity>
        </View>
      </View>

      {/* Features grid */}
      <View style={styles.featuresContainer}>
        {/* Analytics feature */}
        <PressableFeatureBox name="Analytics" icon="stats-chart" onPress={() => setActiveSection('Analytics')} />
        {/* Messages feature */}
        <PressableFeatureBox name="Messages" icon="chatbox" onPress={() => setActiveSection('Messages')} />
        {/* Tasks feature */}
        <PressableFeatureBox name="Tasks" icon="checkbox-outline" onPress={() => setActiveSection('Tasks')} />
        {/* Calendar feature */}
        <PressableFeatureBox name="Calendar" icon="calendar" onPress={() => setActiveSection('Calendar')} />
      </View>
    </View>
  );

  // Profile section component
  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: gfg</Text>
        <Text style={styles.contentText}>Email: gfg@gmail.com</Text>
      </View>
    </View>
  );

  // Settings section component
  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>
  );

  // Reusable component for each feature box in the Home section
  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>
  );

  // Analytics section component
  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>
  );

  // Messages section component
  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>
  );

  // Tasks section component with task items
  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="Geekforgeeks contest." />
        <TaskItem title="Task 2" description="mock interview" />
        <TaskItem title="Task 3" description="Sample paper solution." />
      </View>
    </View>
  );

  // Calendar section component with events
  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>
  );

  // Component to show each task item
  const TaskItem = ({ title, description }) => (
    <View style={styles.taskItem}>
      <Text style={styles.taskTitle}>{title}</Text>
      <Text style={styles.taskDescription}>{description}</Text>
    </View>
  );

  // Component to show each calendar event
  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>
  );

  // Render the currently selected section
  return renderSection();
};

// Style definitions for all UI components
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f4f6f8',
  },
  headerContainer: {
    backgroundColor: '#3498db',
    paddingVertical: 24,
    paddingHorizontal: 20,
    borderBottomLeftRadius: 24,
    borderBottomRightRadius: 24,
    elevation: 8,
    shadowColor: '#000',
    shadowOpacity: 0.2,
    shadowRadius: 5,
    shadowOffset: { width: 0, height: 3 },
  },
  headerTitle: {
    fontSize: 26,
    fontWeight: '700',
    color: '#fff',
    marginBottom: 12,
  },
  buttonsContainer: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    marginTop: 10,
  },
  button: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#2ecc71',
    paddingVertical: 12,
    paddingHorizontal: 16,
    borderRadius: 10,
    elevation: 3,
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: '600',
    marginLeft: 10,
  },
  featuresContainer: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-around',
    padding: 16,
  },
  featureBox: {
    alignItems: 'center',
    justifyContent: 'center',
    width: '42%',
    aspectRatio: 1,
    backgroundColor: '#ffffff',
    borderRadius: 20,
    marginVertical: 12,
    elevation: 5,
    shadowColor: '#aaa',
    shadowOpacity: 0.3,
    shadowOffset: { width: 0, height: 3 },
  },
  featureName: {
    marginTop: 10,
    fontSize: 15,
    fontWeight: '600',
    color: '#333',
  },
  backButton: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 12,
  },
  backButtonText: {
    color: '#ffffff',
    fontSize: 16,
    fontWeight: '600',
    marginLeft: 10,
  },
  contentContainer: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff',
    margin: 12,
    borderRadius: 12,
    elevation: 3,
  },
  contentText: {
    fontSize: 16,
    marginBottom: 10,
    color: '#333',
  },
  contentTitle: {
    fontSize: 18,
    fontWeight: '700',
    color: '#2c3e50',
    marginBottom: 16,
  },
  taskItem: {
    backgroundColor: '#ecf0f1',
    padding: 16,
    borderRadius: 12,
    marginBottom: 12,
  },
  taskTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#2c3e50',
  },
  taskDescription: {
    fontSize: 14,
    color: '#7f8c8d',
  },
  eventItem: {
    backgroundColor: '#ecf0f1',
    padding: 16,
    borderRadius: 12,
    marginBottom: 12,
  },
  eventDateTime: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  eventDate: {
    fontSize: 14,
    color: '#34495e',
    fontWeight: '500',
  },
  eventTime: {
    fontSize: 14,
    color: '#34495e',
    fontWeight: '500',
  },
  eventTitle: {
    fontSize: 16,
    fontWeight: '600',
    marginTop: 6,
    color: '#2c3e50',
  },
  eventLocation: {
    fontSize: 14,
    color: '#7f8c8d',
  },
});

export default DashboardApp;

Output:

Create a Dashboard App using React-Native

manish15aug2003

Improve

Article Tags :

Create a Dashboard App using React-Native

Demo Video

Prerequisites:

Step-by-Step Implementation

Step 1: Create a React Native Project

Project Structure:

Step 2: Run Application

Step 4: Start Coding

Approach to create Dashboard App:

Output:

Similar Reads

Thank You!

What kind of Experience do you want to share?