1. Introduction

A mobile application is made up of different user interface elements called UI components.

These components help users interact with an application, view information, enter data, navigate between sections, and perform actions.

React Native provides several built-in components that developers can combine to create professional mobile application interfaces.

In this tutorial, we will learn:

• What UI components are.

• How to use View and Text.

• How to display images.

• How to create buttons using Pressable.

• How to accept user input using TextInput.

• How to display cards and lists.

• How to use ScrollView and FlatList.

• How to create reusable components.

• How to build an attractive Student Dashboard.

2. What Are UI Components?

UI components are the building blocks of a mobile application interface.

For example, a student management application may contain:

• Header

• Profile image

• Search bar

• Student cards

• Buttons

• Navigation section

• Information panels

Each of these elements can be created using React Native components.

Components can also be combined and reused to build larger interfaces.

3. Important React Native UI Components

A. View Component

The View component is the most fundamental container in React Native.

It is used to group other components and arrange them using Flexbox.

Example:

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

export default function App() {
  return (
    <View>
      <Text>Welcome to Param Classes</Text>
    </View>
  );
}

Common uses:

• Creating containers.

• Grouping UI elements.

• Building cards.

• Arranging layouts.

• Applying background colors and spacing.

B. Text Component

The Text component displays text inside a React Native application.

Example:

import { Text } from 'react-native';

<Text>Hello React Native</Text>

We can style text using properties such as:

• fontSize

• fontWeight

• color

• textAlign

• margin

• padding

Example:

<Text style={{
  fontSize: 24,
  fontWeight: 'bold',
  color: '#2563EB'
}}>
  Student Dashboard
</Text>

Important: In React Native, text content must be placed inside a Text component rather than directly inside a View.

C. Image Component

The Image component displays local or remote images.

Example using a remote image:

import { Image } from 'react-native';

<Image
  source={{
    uri: 'https://example.com/student.jpg'
  }}
  style={{
    width: 100,
    height: 100,
    borderRadius: 50
  }}
/>

Example using a local image:

<Image
  source={require('./assets/student.png')}
  style={{
    width: 100,
    height: 100
  }}
/>

For remote images, always provide appropriate dimensions.

D. Button Component

React Native provides a basic Button component for simple actions.

Example:

import { Button } from 'react-native';

<Button
  title="Click Here"
  onPress={() => alert('Button Pressed')}
/>

Important:

The built-in Button is useful for simple actions, but it offers limited styling options.

For custom application designs, developers commonly use Pressable.

E. Pressable Component

Pressable makes any child element interactive.

Example:

import { Pressable, Text } from 'react-native';

<Pressable
  onPress={() => alert('Welcome!')}
  style={{
    backgroundColor: '#2563EB',
    padding: 15,
    borderRadius: 10
  }}
>
  <Text style={{ color: '#FFFFFF' }}>
    Get Started
  </Text>
</Pressable>

Important properties:

• onPress

• onLongPress

• disabled

• style

• accessibilityRole

Pressable is useful for custom buttons, clickable cards, and interactive UI elements.

F. TextInput Component

TextInput allows users to enter information using the device keyboard.

Example:

import { TextInput } from 'react-native';

<TextInput
  placeholder="Enter your name"
  style={{
    borderWidth: 1,
    borderColor: '#CBD5E1',
    padding: 12,
    borderRadius: 8
  }}
/>

Common properties:

• placeholder

• value

• onChangeText

• keyboardType

• secureTextEntry

• multiline

• maxLength

Example with state:

import React, { useState } from 'react';

import {
  TextInput,
  Text
} from 'react-native';

export default function App() {

  const [name, setName] = useState('');

  return (
    <>
      <TextInput
        placeholder="Enter your name"
        value={name}
        onChangeText={setName}
      />

      <Text>Your Name: {name}</Text>
    </>
  );
}

Here, useState stores the input value and onChangeText updates it whenever the user types.

G. ScrollView Component

ScrollView creates a scrollable container for content that may extend beyond the visible screen.

Example:

import {
  ScrollView,
  Text
} from 'react-native';

<ScrollView>
  <Text>First Section</Text>
  <Text>Second Section</Text>
  <Text>Third Section</Text>
</ScrollView>

Common properties:

• horizontal

• showsVerticalScrollIndicator

• showsHorizontalScrollIndicator

• contentContainerStyle

Use ScrollView for screens containing a limited number of elements.

It renders all its children, including elements outside the visible area.

H. FlatList Component

FlatList is designed for displaying data collections efficiently.

It renders items as needed rather than rendering every item inside a large list at once.

Example:

import { FlatList, Text } from 'react-native';

const students = [
  { id: '1', name: 'Rahul' },
  { id: '2', name: 'Priya' },
  { id: '3', name: 'Amit' }
];

<FlatList
  data={students}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => (
    <Text>{item.name}</Text>
  )}
/>

Important properties:

• data

• renderItem

• keyExtractor

• ListHeaderComponent

• ListEmptyComponent

• numColumns

• onEndReached

Use FlatList for long or dynamic lists.

I. Switch Component

The Switch component provides a toggle control for Boolean values.

Example:

import React, { useState } from 'react';

import {
  Switch,
  View
} from 'react-native';

export default function App() {

  const [enabled, setEnabled] = useState(false);

  return (
    <View>
      <Switch
        value={enabled}
        onValueChange={setEnabled}
      />
    </View>
  );
}

Common uses:

• Dark mode settings.

• Notification preferences.

• Enable or disable options.

4. What Are Reusable Components?

A reusable component is a UI element that can be used in multiple places.

For example, if an application displays 20 student cards, we do not need to write the same card design 20 times.

We can create one StudentCard component and pass different student information through props.

Example:

function StudentCard({ name, course }) {
  return (
    <View>
      <Text>{name}</Text>
      <Text>{course}</Text>
    </View>
  );
}

Use it multiple times:

<StudentCard
  name="Rahul"
  course="React Native"
/>

<StudentCard
  name="Priya"
  course="JavaScript"
/>

Benefits:

• Less repeated code.

• Easier maintenance.

• Consistent UI design.

• Better project organization.

• Easier testing.

5. Practical Project: Student Dashboard UI

Now we will build a professional Student Dashboard using multiple React Native UI components.

Our dashboard will contain:

1. Header section.

2. Welcome message.

3. Search input.

4. Summary cards.

5. Student records.

6. Interactive buttons.

7. Empty search result message.

Step 1: Create an Expo Project

Open your terminal and run:

npx create-expo-app@latest StudentDashboardUI

Move into the project:

cd StudentDashboardUI

Start the development server:

npx expo start

Step 2: Open the Main Screen

In an Expo Router project, open the main screen file, commonly:

src/app/index.tsx

or:

app/index.tsx

The exact location depends on the selected template.

Step 3: Import Required Components

We will use:

• View

• Text

• Image

• TextInput

• Pressable

• FlatList

• StyleSheet

• useState

Step 4: Complete Student Dashboard Code

Replace the contents of your main screen file with:

import React, { useState } from 'react';

import {
  View,
  Text,
  Image,
  TextInput,
  Pressable,
  FlatList,
  StyleSheet,
  StatusBar
} from 'react-native';

const students = [
  {
    id: '1',
    name: 'Rahul Sharma',
    course: 'React Native',
    status: 'Active',
    image: 'https://randomuser.me/api/portraits/men/32.jpg'
  },
  {
    id: '2',
    name: 'Priya Verma',
    course: 'JavaScript',
    status: 'Active',
    image: 'https://randomuser.me/api/portraits/women/44.jpg'
  },
  {
    id: '3',
    name: 'Amit Kumar',
    course: 'Android Studio',
    status: 'Pending',
    image: 'https://randomuser.me/api/portraits/men/46.jpg'
  },
  {
    id: '4',
    name: 'Neha Singh',
    course: 'PHP & MySQL',
    status: 'Active',
    image: 'https://randomuser.me/api/portraits/women/68.jpg'
  }
];

export default function Index() {

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

  const filteredStudents = students.filter((student) =>
    student.name.toLowerCase().includes(search.toLowerCase())
  );

  const renderStudent = ({ item }) => (
    <View style={styles.studentCard}>

      <Image
        source={{ uri: item.image }}
        style={styles.avatar}
      />

      <View style={styles.studentInfo}>
        <Text style={styles.studentName}>
          {item.name}
        </Text>

        <Text style={styles.course}>
          {item.course}
        </Text>

        <Text
          style={[
            styles.status,
            item.status === 'Active'
              ? styles.active
              : styles.pending
          ]}
        >
          {item.status}
        </Text>
      </View>

      <Pressable
        style={styles.viewButton}
        onPress={() => alert('Selected: ' + item.name)}
        accessibilityRole="button"
        accessibilityLabel={'View ' + item.name}
      >
        <Text style={styles.viewButtonText}>
          View
        </Text>
      </Pressable>

    </View>
  );

  const Header = () => (
    <>
      <View style={styles.header}>
        <View>
          <Text style={styles.brand}>
            PARAM CLASSES
          </Text>

          <Text style={styles.welcome}>
            Student Dashboard
          </Text>
        </View>

        <Image
          source={{
            uri: 'https://randomuser.me/api/portraits/men/75.jpg'
          }}
          style={styles.profile}
        />
      </View>

      <Text style={styles.greeting}>
        Welcome Back!
      </Text>

      <Text style={styles.description}>
        Manage your students and courses.
      </Text>

      <TextInput
        style={styles.search}
        placeholder="Search students..."
        value={search}
        onChangeText={setSearch}
        clearButtonMode="while-editing"
      />

      <View style={styles.summaryRow}>
        <View style={styles.summaryCard}>
          <Text style={styles.summaryNumber}>120</Text>
          <Text style={styles.summaryLabel}>Students</Text>
        </View>

        <View style={styles.summaryCard}>
          <Text style={styles.summaryNumber}>08</Text>
          <Text style={styles.summaryLabel}>Courses</Text>
        </View>
      </View>

      <Text style={styles.sectionTitle}>
        Student Records
      </Text>
    </>
  );

  return (
    <View style={styles.container}>

      <StatusBar
        backgroundColor="#172554"
        barStyle="light-content"
      />

      <FlatList
        data={filteredStudents}
        keyExtractor={(item) => item.id}
        renderItem={renderStudent}
        ListHeaderComponent={Header}
        ListEmptyComponent={
          <Text style={styles.empty}>
            No students found.
          </Text>
        }
        contentContainerStyle={styles.listContent}
        showsVerticalScrollIndicator={false}
      />

    </View>
  );
}

const styles = StyleSheet.create({

  container: {
    flex: 1,
    backgroundColor: '#F1F5F9'
  },

  listContent: {
    padding: 16,
    paddingBottom: 30
  },

  header: {
    backgroundColor: '#172554',
    padding: 20,
    borderRadius: 16,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },

  brand: {
    color: '#93C5FD',
    fontSize: 12,
    fontWeight: 'bold',
    letterSpacing: 1
  },

  welcome: {
    color: '#FFFFFF',
    fontSize: 21,
    fontWeight: 'bold',
    marginTop: 6
  },

  profile: {
    width: 48,
    height: 48,
    borderRadius: 24,
    borderWidth: 2,
    borderColor: '#FFFFFF'
  },

  greeting: {
    fontSize: 23,
    fontWeight: 'bold',
    color: '#172554',
    marginTop: 24
  },

  description: {
    color: '#64748B',
    marginTop: 5,
    fontSize: 14
  },

  search: {
    backgroundColor: '#FFFFFF',
    borderWidth: 1,
    borderColor: '#E2E8F0',
    padding: 14,
    borderRadius: 12,
    marginTop: 20,
    fontSize: 15
  },

  summaryRow: {
    flexDirection: 'row',
    gap: 12,
    marginTop: 18
  },

  summaryCard: {
    flex: 1,
    backgroundColor: '#FFFFFF',
    padding: 18,
    borderRadius: 14,
    elevation: 2
  },

  summaryNumber: {
    fontSize: 27,
    color: '#2563EB',
    fontWeight: 'bold'
  },

  summaryLabel: {
    color: '#64748B',
    marginTop: 5,
    fontSize: 14
  },

  sectionTitle: {
    fontSize: 20,
    color: '#172554',
    fontWeight: 'bold',
    marginTop: 25,
    marginBottom: 12
  },

  studentCard: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
    padding: 13,
    borderRadius: 14,
    marginBottom: 12,
    elevation: 2
  },

  avatar: {
    width: 52,
    height: 52,
    borderRadius: 26
  },

  studentInfo: {
    flex: 1,
    marginLeft: 12
  },

  studentName: {
    color: '#172554',
    fontWeight: 'bold',
    fontSize: 15
  },

  course: {
    color: '#64748B',
    fontSize: 13,
    marginTop: 4
  },

  status: {
    fontSize: 11,
    fontWeight: 'bold',
    marginTop: 5
  },

  active: {
    color: '#16A34A'
  },

  pending: {
    color: '#D97706'
  },

  viewButton: {
    backgroundColor: '#2563EB',
    paddingHorizontal: 14,
    paddingVertical: 9,
    borderRadius: 8
  },

  viewButtonText: {
    color: '#FFFFFF',
    fontSize: 12,
    fontWeight: 'bold'
  },

  empty: {
    textAlign: 'center',
    color: '#64748B',
    padding: 30,
    fontSize: 15
  }

});

Step 5: Run the Application

Run:

npx expo start

Open the app using Expo Go or your Android emulator.

You should see:

• A professional Param Classes dashboard header.

• A profile image.

• A welcome message.

• A searchable student input field.

• Student and course summary cards.

• Student records with profile images.

• Active and pending status labels.

• Interactive View buttons.

Step 6: Test the Search Input

Tap the search field and type:

Rahul

The FlatList should display only Rahul Sharma.

Now type:

Priya

The list should display only Priya Verma.

If you type a name that does not exist, the application should display:

No students found.

This demonstrates how TextInput, useState, filtering, and FlatList work together.

Step 7: Understand the Reusable Student Card

The student card is generated using:

const renderStudent = ({ item }) => (
  // Student card UI
);

FlatList calls this function for each item in the data collection.

This avoids manually creating separate cards for every student.

6. ScrollView vs FlatList

Both components can display scrollable content, but they are designed for different situations.

ScrollView

• Renders all its children.

• Suitable for short screens.

• Useful for dashboards with a limited amount of content.

• Can contain mixed content such as text, images, and cards.

FlatList

• Designed for long or changing data collections.

• Renders items as needed.

• Uses data and renderItem.

• Supports keys, empty states, and pagination.

For large student lists, FlatList is generally a better choice.

7. Common Mistakes

Mistake 1: Missing Keys

When rendering a list, each item should have a stable unique key.

Solution:

keyExtractor={(item) => item.id}

Mistake 2: Putting Text Directly Inside View

Incorrect:

<View>
  Hello Student
</View>

Correct:

<View>
  <Text>Hello Student</Text>
</View>

Mistake 3: Forgetting Button Actions

A button should have an appropriate event handler such as onPress.

Mistake 4: Using ScrollView for Very Large Lists

Rendering thousands of items inside ScrollView can affect performance.

Solution: Use FlatList for long data collections.

Mistake 5: Not Controlling TextInput

For a controlled input, maintain its value using state and update it with onChangeText.

Mistake 6: Repeating the Same Card Code

Repeated UI code becomes difficult to maintain.

Solution: Create reusable components and pass data through props.

8. Best Practices for Attractive UI Design

• Use consistent colors throughout the application.

• Maintain proper spacing between components.

• Use readable font sizes.

• Prefer reusable components.

• Use Pressable for custom interactive elements.

• Provide accessibility labels for important controls.

• Use FlatList for long collections.

• Keep cards and buttons visually consistent.

• Test the interface on different screen sizes.

• Keep component logic organized and readable.

9. Conclusion

React Native UI components are the foundation of mobile application development.

In this tutorial, we learned how to use View, Text, Image, Button, Pressable, TextInput, ScrollView, FlatList, and Switch.

We also learned how to create reusable UI components and built a practical Student Dashboard with search functionality and interactive student cards.

These skills will help us build more attractive, structured, and user-friendly React Native applications.

10. Frequently Asked Questions

Q1. What are UI components in React Native?

UI components are reusable building blocks used to create application interfaces.

Q2. Which component is used to create a container?

The View component is used to group and arrange other UI elements.

Q3. What is the difference between Button and Pressable?

Button is a basic ready-made control with limited styling. Pressable lets developers create custom interactive elements.

Q4. Which component is used to accept user input?

TextInput is used to accept text and other keyboard input from users.

Q5. What is the difference between ScrollView and FlatList?

ScrollView renders all its children, while FlatList renders list items as needed and is more suitable for long lists.

Q6. What is a reusable component?

A reusable component is a UI element that can be used in multiple places with different data.

Q7. Can we create custom cards in React Native?

Yes. We can combine View, Text, Image, Pressable, and StyleSheet to create custom cards.

Q8. Which component is suitable for a toggle setting?

The Switch component is suitable for Boolean settings such as enabling or disabling notifications.