1. Introduction

React Native components are the building blocks of a mobile application. Every screen, button, text element, image, input field, and interactive section is created using components.

Unlike traditional HTML development, React Native uses its own native components to build Android and iOS interfaces.

In this tutorial, we will understand four important components:

1. View – Creates layouts and containers.

2. Text – Displays text on the screen.

3. Image – Displays images.

4. Button – Creates a basic clickable button.

We will also build a practical student profile screen using these components.

2. What Are React Native Components?

A component is a reusable piece of UI that performs a specific task.

For example:

• A login screen is made from multiple components.

• A profile screen contains image and text components.

• A dashboard contains cards, buttons, icons, and other UI elements.

React Native components allow developers to create reusable, organized, and maintainable mobile applications.

Example:

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

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

Here, View and Text are React Native components.

3. View Component

The View component is one of the most important components in React Native.

It works as a container that can hold other components. It is commonly used to create layouts, sections, cards, and screen structures.

Basic Example

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

export default function App() {
  return (
    <View>
      <Text>Hello Students</Text>
      <Text>Learn React Native</Text>
    </View>
  );
}

Styling the View Component

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

export default function App() {
  return (
    <View
      style={{
        backgroundColor: '#dbeafe',
        padding: 20,
        margin: 20,
        borderRadius: 10,
      }}
    >
      <Text>Welcome to React Native</Text>
    </View>
  );
}

Important View Properties

• flex: Controls how the container occupies available space.

• backgroundColor: Sets the background color.

• padding: Adds space inside the container.

• margin: Adds space outside the container.

• borderRadius: Creates rounded corners.

• justifyContent: Controls alignment along the main axis.

• alignItems: Controls alignment along the cross axis.

Practical Example: Creating a Card

<View
  style={{
    backgroundColor: 'white',
    padding: 20,
    margin: 15,
    borderRadius: 12,
    elevation: 4,
  }}
>
  <Text>Student Dashboard</Text>
  <Text>Welcome to your learning panel.</Text>
</View>

4. Text Component

The Text component is used to display text content in a React Native application.

Unlike HTML, normal text should be placed inside a Text component.

Basic Example

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

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

Text Styling

<Text
  style={{
    fontSize: 24,
    fontWeight: 'bold',
    color: '#2563eb',
    textAlign: 'center',
  }}
>
  React Native Tutorial
</Text>

Important Text Properties

• fontSize: Controls text size.

• fontWeight: Controls text thickness.

• color: Sets text color.

• textAlign: Aligns text.

• lineHeight: Controls spacing between lines.

• fontStyle: Applies italic styling.

• letterSpacing: Controls spacing between characters.

Practical Example: Student Information

<View>
  <Text style={{ fontSize: 22, fontWeight: 'bold' }}>
    Student Details
  </Text>

  <Text>Name: Rahul Sharma</Text>
  <Text>Course: React Native</Text>
  <Text>Duration: 30 Days</Text>
</View>

5. Image Component

The Image component is used to display pictures, logos, profile photos, and other visual assets.

React Native supports local images and remote images.

Method 1: Display a Local Image

First, create an assets folder and place an image inside it.

Example project structure:

MyApp/
├── assets/
│   └── logo.png
├── App.js

Then use:

import React from 'react';
import { View, Image } from 'react-native';

export default function App() {
  return (
    <View>
      <Image
        source={require('./assets/logo.png')}
        style={{
          width: 150,
          height: 150,
        }}
      />
    </View>
  );
}

Method 2: Display an Online Image

<Image
  source={{
    uri: 'https://example.com/profile.png',
  }}
  style={{
    width: 150,
    height: 150,
  }}
/>

Use a valid, publicly accessible image URL.

Important Image Properties

• source: Specifies the image source.

• width: Sets image width.

• height: Sets image height.

• resizeMode: Controls how the image fits its dimensions.

• borderRadius: Creates rounded image corners.

Resize Modes

Example:

<Image
  source={require('./assets/logo.png')}
  resizeMode="contain"
  style={{
    width: 200,
    height: 150,
  }}
/>

6. Button Component

The Button component creates a basic clickable button.

It uses the title property to display text and the onPress property to handle clicks.

Basic Example

import React from 'react';
import { View, Button, Alert } from 'react-native';

export default function App() {
  return (
    <View>
      <Button
        title="Click Here"
        onPress={() => Alert.alert('Hello', 'Button Pressed!')}
      />
    </View>
  );
}

When the user presses the button, an alert message appears.

Important Button Properties

• title: Sets the button text.

• onPress: Defines what happens when the button is pressed.

• color: Sets the button's platform-dependent color.

• disabled: Disables the button when set to true.

• accessibilityLabel: Provides a description for accessibility tools.

Disabled Button Example

<Button
  title="Submit"
  onPress={() => Alert.alert('Submitted')}
  disabled={true}
/>

Important: The standard React Native Button offers limited styling options. For custom button designs, developers commonly use Pressable or TouchableOpacity with a Text component.

7. Understanding How Components Work Together

A real mobile screen uses multiple components together.

Example:

import React from 'react';
import { View, Text, Image, Button, Alert } from 'react-native';

export default function App() {
  return (
    <View style={{ padding: 20 }}>
      <Text style={{ fontSize: 24, fontWeight: 'bold' }}>
        Student Profile
      </Text>

      <Image
        source={require('./assets/profile.png')}
        style={{
          width: 120,
          height: 120,
          borderRadius: 60,
        }}
      />

      <Text>Name: Rahul Sharma</Text>
      <Text>Course: React Native</Text>

      <Button
        title="View Profile"
        onPress={() => Alert.alert('Profile', 'Profile opened')}
      />
    </View>
  );
}

This example combines four components to create a simple profile interface.

8. Complete Practical Project: Student Profile Card

Now let's create a practical student profile card using View, Text, Image, and Button.

Project objective:

• Display a profile image.

• Show the student's name.

• Display course details.

• Show enrollment status.

• Add a working button.

Create or replace the code in your current app's entry screen, such as app/index.tsx in an Expo Router project or App.js in a suitable template.

import React from 'react';

import {
  View,
  Text,
  Image,
  Button,
  StyleSheet,
  Alert,
} from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>

      <View style={styles.card}>

        <Text style={styles.heading}>
          Student Profile
        </Text>

        <Image
          source={{
            uri: 'https://via.placeholder.com/150',
          }}
          style={styles.profileImage}
        />

        <Text style={styles.name}>
          Rahul Sharma
        </Text>

        <Text style={styles.details}>
          Course: React Native Development
        </Text>

        <Text style={styles.details}>
          Duration: 30 Days
        </Text>

        <Text style={styles.status}>
          Enrollment Status: Active
        </Text>

        <View style={styles.buttonContainer}>
          <Button
            title="View Details"
            onPress={() =>
              Alert.alert(
                'Student Details',
                'Rahul Sharma is enrolled in React Native Development.'
              )
            }
          />
        </View>

      </View>

    </View>
  );
}

const styles = StyleSheet.create({

  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#eaf2ff',
    padding: 20,
  },

  card: {
    width: '100%',
    backgroundColor: '#ffffff',
    padding: 20,
    borderRadius: 15,
    alignItems: 'center',
    elevation: 5,
  },

  heading: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },

  profileImage: {
    width: 120,
    height: 120,
    borderRadius: 60,
    marginBottom: 15,
  },

  name: {
    fontSize: 22,
    fontWeight: 'bold',
    marginBottom: 10,
  },

  details: {
    fontSize: 16,
    marginBottom: 8,
    color: '#444444',
  },

  status: {
    color: 'green',
    fontSize: 16,
    fontWeight: 'bold',
    marginVertical: 10,
  },

  buttonContainer: {
    width: '100%',
    marginTop: 15,
  },

});

Practical Project Explanation

1. View creates the main screen and profile card.

2. Text displays the student's name and information.

3. Image displays the profile photo.

4. Button creates an interactive button.

5. StyleSheet.create() organizes the styling.

6. Alert.alert() displays a message when the button is pressed.

The placeholder image URL is only for demonstration. Replace it with a valid image URL or local asset if needed.

9. Common Mistakes

Mistake 1: Writing Text Outside Text Component

Incorrect:

<View>
  Hello World
</View>

Correct:

<View>
  <Text>Hello World</Text>
</View>

Mistake 2: Forgetting Image Dimensions

Incorrect:

<Image source={require('./assets/logo.png')} />

Correct:

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

Mistake 3: Forgetting onPress

Incorrect:

<Button title="Submit" />

Correct:

<Button
  title="Submit"
  onPress={() => Alert.alert('Submitted')}
/>

Mistake 4: Using HTML Elements

Incorrect:

<div>
  <p>Hello</p>
</div>

Correct:

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

10. Best Practices

• Use View to organize screen layouts.

• Use Text for displaying text.

• Use Image for visual assets.

• Use Button for simple standard actions.

• Use Pressable when you need custom button styling.

• Always provide appropriate image dimensions.

• Organize styles using StyleSheet.create().

• Use meaningful component names.

• Keep reusable UI sections in separate components.

• Add accessibility labels where appropriate.

11. Conclusion

React Native components are the foundation of mobile application development.

The View component creates layouts, Text displays content, Image displays visual assets, and Button provides basic user interaction.

By combining these components, developers can build profile screens, login screens, dashboards, and many other mobile application interfaces.

Practise the student profile card project to understand how these components work together.

12. Frequently Asked Questions

Q1. What is a component in React Native?

A component is a reusable building block used to create a mobile application's user interface.

Q2. What is the purpose of View?

View acts as a container for arranging and grouping other components.

Q3. Which component is used to display text?

The Text component is used to display text content.

Q4. How can we display a local image?

Use the Image component with require() to load a local image asset.

Q5. How can we display an online image?

Use the Image component with a valid URI inside its source property.

Q6. What is the purpose of Button?

Button provides a basic clickable control that responds to user interaction through onPress.

Q7. Can we customize the React Native Button?

The standard Button has limited styling options. Use Pressable for more flexible custom designs.

Q8. Can we combine multiple components on one screen?

Yes. React Native applications are built by combining multiple components into reusable UI structures.