1. Introduction

A professional mobile application needs more than buttons and text. Images, icons, and typography make an interface attractive, recognizable, and easy to use.

React Native provides the Image component for displaying images. We can also use icon libraries and custom font packages to improve the appearance of our application.

In this tutorial, we will learn:

• How to display local images.

• How to display online images.

• How to resize and style images.

• How to use vector icons.

• How to install and use custom fonts.

• How to create a professional Student Profile Screen.

2. Understanding Images in React Native

React Native provides the Image component to display images from different sources.

There are two common image types:

A. Local Images

Local images are stored inside your project.

Example project structure:

assets/
  images/
    student.png
    logo.png
    banner.png

To display a local image:

import { Image } from 'react-native';

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

Important: The path inside require() must be statically known when the application is bundled.

B. Remote Images

Remote images are loaded using an internet URL.

Example:

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

For remote images, always provide suitable dimensions through the style.

The URL must point to an accessible image resource.

3. Image Resize Modes

The resizeMode property controls how an image fits inside its display area.

Common values:

A. cover

Fills the complete image area while maintaining its aspect ratio. Some parts may be cropped.

<Image
  source={require('./assets/images/banner.png')}
  style={styles.banner}
  resizeMode="cover"
/>

B. contain

Displays the complete image inside the available area. Empty space may remain.

<Image
  source={require('./assets/images/logo.png')}
  style={styles.logo}
  resizeMode="contain"
/>

C. stretch

Stretches the image to fill the specified dimensions. This may distort the image.

D. center

Displays the image at its natural size, centered within the image area.

E. repeat

Repeats the image to fill the available area where supported.

Choose the resize mode according to the purpose of the image.

4. Styling Images

Images can be styled using StyleSheet.

Example:

const styles = StyleSheet.create({
  profileImage: {
    width: 120,
    height: 120,
    borderRadius: 60,
    borderWidth: 3,
    borderColor: '#2563EB'
  }
});

Using borderRadius equal to half the width and height creates a circular profile image when the image is square.

Other useful properties include:

• width

• height

• borderRadius

• borderWidth

• borderColor

• opacity

• margin

• alignSelf

5. Using Icons in React Native

Icons represent actions or information visually.

Common examples:

• Home icon

• User profile icon

• Search icon

• Settings icon

• Notification icon

• Heart icon

• Edit icon

• Delete icon

Instead of creating every icon manually, we can use an icon library.

A. Install an Icon Library in Expo

For an Expo learning project, install:

npx expo install @expo/vector-icons

Note: Expo's current documentation marks @expo/vector-icons as deprecated and recommends migration toward the newer @react-native-vector-icons packages. Check the current Expo icon guide when starting a new production project.

B. Import Ionicons

import Ionicons from '@expo/vector-icons/Ionicons';

C. Display an Icon

<Ionicons
  name="home"
  size={28}
  color="#2563EB"
/>

The three important properties are:

• name: Icon name.

• size: Icon size.

• color: Icon color.

D. Display Multiple Icons

<View style={{ flexDirection: 'row', gap: 20 }}>
  <Ionicons name="home-outline" size={28} color="blue" />
  <Ionicons name="person-outline" size={28} color="green" />
  <Ionicons name="settings-outline" size={28} color="black" />
</View>

You can explore available icon names through the icon library's documentation.

6. Understanding Custom Fonts

Fonts control the appearance of text in an application.

React Native provides platform fonts by default. Custom fonts allow us to maintain consistent typography and application branding.

Examples of popular fonts:

• Roboto

• Inter

• Open Sans

• Lato

• Poppins

• Montserrat

We can load font files locally or use Google Fonts packages.

7. Installing a Google Font in Expo

For this tutorial, we will use Roboto.

Run:

npx expo install expo-font @expo-google-fonts/roboto

The expo-font package allows the application to load custom fonts.

The Roboto package provides different font variants.

A. Import the Font

import {
  useFonts,
  Roboto_400Regular,
  Roboto_700Bold
} from '@expo-google-fonts/roboto';

B. Load the Font

Inside your component:

const [fontsLoaded] = useFonts({
  Roboto_400Regular,
  Roboto_700Bold
});

C. Wait Until Fonts Are Loaded

if (!fontsLoaded) {
  return null;
}

D. Apply Custom Font

<Text style={{
  fontFamily: 'Roboto_700Bold',
  fontSize: 24
}}>
  Student Profile
</Text>

Use the exact font family name exported by the font package.

8. Practical Project: Student Profile Screen

Now we will create a Student Profile Screen that uses:

• A remote profile image.

• Custom Roboto fonts.

• Ionicons.

• Student information.

• Course details.

• Contact and social-style action icons.

Step 1: Create an Expo Project

npx create-expo-app@latest StudentProfileApp

Open the project:

cd StudentProfileApp

Step 2: Install Required Packages

npx expo install expo-font @expo-google-fonts/roboto @expo/vector-icons

Step 3: Open Your Screen File

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

src/app/index.tsx

or:

app/index.tsx

The exact location depends on your selected project template.

Step 4: Complete Student Profile Screen Code

Replace the contents of the screen file with:

import React from 'react';

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

import Ionicons from '@expo/vector-icons/Ionicons';

import {
  useFonts,
  Roboto_400Regular,
  Roboto_700Bold
} from '@expo-google-fonts/roboto';

export default function Index() {

  const [fontsLoaded] = useFonts({
    Roboto_400Regular,
    Roboto_700Bold
  });

  if (!fontsLoaded) {
    return null;
  }

  return (
    <ScrollView style={styles.screen}>

      <View style={styles.header}>
        <Ionicons
          name="arrow-back"
          size={26}
          color="#FFFFFF"
        />

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

        <Ionicons
          name="ellipsis-vertical"
          size={25}
          color="#FFFFFF"
        />
      </View>

      <View style={styles.profileSection}>

        <Image
          source={{
            uri: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400'
          }}
          style={styles.profileImage}
          resizeMode="cover"
        />

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

        <Text style={styles.role}>
          React Native Student
        </Text>

        <View style={styles.badge}>
          <Text style={styles.badgeText}>
            Active Student
          </Text>
        </View>

      </View>

      <View style={styles.infoCard}>

        <Text style={styles.sectionTitle}>
          Personal Information
        </Text>

        <InfoRow
          icon="mail-outline"
          label="Email"
          value="rahul@example.com"
        />

        <InfoRow
          icon="call-outline"
          label="Phone"
          value="+91 98765 43210"
        />

        <InfoRow
          icon="location-outline"
          label="Location"
          value="Raipur, India"
        />

      </View>

      <View style={styles.infoCard}>

        <Text style={styles.sectionTitle}>
          Course Details
        </Text>

        <InfoRow
          icon="book-outline"
          label="Course"
          value="React Native Development"
        />

        <InfoRow
          icon="calendar-outline"
          label="Duration"
          value="3 Months"
        />

        <InfoRow
          icon="school-outline"
          label="Institute"
          value="Param Classes"
        />

      </View>

      <View style={styles.actionSection}>

        <View style={styles.actionItem}>
          <Ionicons
            name="create-outline"
            size={25}
            color="#2563EB"
          />
          <Text style={styles.actionText}>Edit</Text>
        </View>

        <View style={styles.actionItem}>
          <Ionicons
            name="share-social-outline"
            size={25}
            color="#2563EB"
          />
          <Text style={styles.actionText}>Share</Text>
        </View>

        <View style={styles.actionItem}>
          <Ionicons
            name="settings-outline"
            size={25}
            color="#2563EB"
          />
          <Text style={styles.actionText}>Settings</Text>
        </View>

      </View>

    </ScrollView>
  );
}

function InfoRow({ icon, label, value }) {
  return (
    <View style={styles.infoRow}>

      <Ionicons
        name={icon}
        size={23}
        color="#2563EB"
      />

      <View style={styles.infoText}>
        <Text style={styles.label}>
          {label}
        </Text>

        <Text style={styles.value}>
          {value}
        </Text>
      </View>

    </View>
  );
}

const styles = StyleSheet.create({

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

  header: {
    backgroundColor: '#1D4ED8',
    padding: 18,
    paddingTop: 24,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },

  headerTitle: {
    color: '#FFFFFF',
    fontSize: 20,
    fontFamily: 'Roboto_700Bold'
  },

  profileSection: {
    alignItems: 'center',
    padding: 25,
    backgroundColor: '#FFFFFF'
  },

  profileImage: {
    width: 115,
    height: 115,
    borderRadius: 58,
    borderWidth: 4,
    borderColor: '#DBEAFE'
  },

  name: {
    fontSize: 24,
    color: '#172554',
    fontFamily: 'Roboto_700Bold',
    marginTop: 14
  },

  role: {
    fontSize: 15,
    color: '#64748B',
    fontFamily: 'Roboto_400Regular',
    marginTop: 5
  },

  badge: {
    backgroundColor: '#DCFCE7',
    paddingHorizontal: 15,
    paddingVertical: 7,
    borderRadius: 20,
    marginTop: 12
  },

  badgeText: {
    color: '#15803D',
    fontFamily: 'Roboto_700Bold',
    fontSize: 13
  },

  infoCard: {
    backgroundColor: '#FFFFFF',
    margin: 15,
    marginBottom: 0,
    padding: 18,
    borderRadius: 14,
    elevation: 2
  },

  sectionTitle: {
    fontSize: 19,
    color: '#172554',
    fontFamily: 'Roboto_700Bold',
    marginBottom: 16
  },

  infoRow: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 17,
    gap: 14
  },

  infoText: {
    flex: 1
  },

  label: {
    fontSize: 13,
    color: '#64748B',
    fontFamily: 'Roboto_400Regular'
  },

  value: {
    fontSize: 15,
    color: '#1E293B',
    fontFamily: 'Roboto_700Bold',
    marginTop: 3
  },

  actionSection: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    backgroundColor: '#FFFFFF',
    margin: 15,
    padding: 18,
    borderRadius: 14
  },

  actionItem: {
    alignItems: 'center',
    gap: 7
  },

  actionText: {
    color: '#334155',
    fontSize: 13,
    fontFamily: 'Roboto_700Bold'
  }

});

Step 5: Run the Application

Run:

npx expo start

Scan the QR code using Expo Go or open the application in your configured Android emulator.

You should see:

1. A blue profile header.

2. A circular student profile image.

3. Student name in a custom bold font.

4. Personal information with icons.

5. Course details with icons.

6. Edit, Share, and Settings icon sections.

9. Using Local Images in the Same Project

To use a local image instead of the remote profile URL:

1. Create an assets/images folder.

2. Add an image named student.png.

3. Update the Image component:

   <Image
   source={require('./assets/images/student.png')}
   style={styles.profileImage}
   resizeMode="cover"
   />

Adjust the relative path according to the location of your screen file.

The require() path must point to a real file.

10. Common Mistakes and Solutions

Mistake 1: Image Is Not Displaying

Possible causes:

• Incorrect URL.

• Internet connection problem.

• Incorrect local image path.

• Missing width or height for a remote image.

Solution: Verify the image URL or local file path and check the image dimensions.

Mistake 2: Image Looks Distorted

Cause: Incorrect resize mode or unsuitable image dimensions.

Solution: Use cover or contain according to the design.

Mistake 3: Icon Is Not Displaying

Possible causes:

• Icon package is missing.

• Incorrect icon import.

• Invalid icon name.

Solution: Install the package, verify the import, and use an icon name from the selected icon set.

Mistake 4: Custom Font Is Not Working

Possible causes:

• Font package is not installed.

• Incorrect font name.

• Font has not finished loading.

Solution: Verify the package, use the exact exported font name, and wait for the useFonts loading state.

Mistake 5: Remote Image Is Slow

Cause: Large image files or slow network connections.

Solution:

• Use appropriately sized images.

• Compress images before uploading.

• Avoid unnecessarily large image files.

• Consider caching solutions for image-heavy production apps.

11. Best Practices

• Prefer optimized image files.

• Use local assets for fixed application graphics.

• Use remote images when content needs to come from a server.

• Provide dimensions for remote images.

• Choose the correct resize mode.

• Use consistent icon styles throughout the app.

• Use readable and consistent fonts.

• Load custom fonts before rendering text that depends on them.

• Avoid downloading large images unnecessarily.

• Test images and fonts on Android and iOS.

12. Conclusion

Images, icons, and custom fonts are important elements of professional React Native UI development.

In this tutorial, we learned how to display local and remote images, control image resizing, use vector icons, load custom fonts, and build a practical Student Profile Screen.

These techniques help us create mobile applications that look more attractive, consistent, and professional.

13. Frequently Asked Questions

Q1. Which component is used to display images in React Native?

The Image component is used to display local and remote images.

Q2. What is the difference between local and remote images?

Local images are stored inside the application project, while remote images are loaded from an external URL.

Q3. What does resizeMode cover do?

It fills the image area while maintaining aspect ratio, which can crop some parts of the image.

Q4. Why do developers use icon libraries?

Icon libraries provide ready-made icons for common actions and interface elements.

Q5. What is a custom font?

A custom font is an additional font file or font package used instead of relying only on platform default fonts.

Q6. Which package can load custom fonts in Expo?

The expo-font package supports loading custom fonts in Expo applications.

Q7. Can we use Google Fonts in React Native?

Yes. Expo provides Google Font packages that can be integrated with expo-font.

Q8. Can local images work without an internet connection?

Yes. Images bundled with the application can be displayed without an internet connection.