1. Introduction

Responsive design is the process of creating application screens that automatically adapt to different screen sizes, orientations, and window dimensions.

A mobile application may run on:

• Small Android phones

• Large Android phones

• iPhones

• Tablets

• Foldable devices

• Resizable application windows

A layout that looks perfect on one phone may appear stretched, cramped, or misaligned on another device.

React Native provides Flexbox, percentage-based dimensions, useWindowDimensions(), and conditional rendering to build responsive interfaces.

2. What Is Responsive Design?

Responsive design means the application layout adjusts according to the available screen space.

For example:

• On a small phone, dashboard cards can appear in one column.

• On a large phone, cards may have more spacing.

• On a tablet, cards can appear in two columns.

• In landscape orientation, the layout can use horizontal space more effectively.

The goal is to maintain usability, readability, and visual consistency across devices.

3. Why Is Responsive Design Important?

Responsive design helps developers:

1. Support multiple screen sizes.

2. Prevent content from overflowing.

3. Maintain readable text.

4. Improve navigation and usability.

5. Support portrait and landscape orientations.

6. Make applications more suitable for tablets and foldable devices.

4. Important Responsive Design Concepts

A. Flexbox

Flexbox is the foundation of most responsive layouts in React Native.

Important properties include:

• flex

• flexDirection

• justifyContent

• alignItems

• flexWrap

• gap

Example:

<View style={{
  flex: 1,
  flexDirection: 'row',
  justifyContent: 'space-between',
  alignItems: 'center'
}}>
  <Text>Student</Text>
  <Text>Profile</Text>
</View>

B. Percentage-Based Width

Instead of assigning fixed widths to every element, percentages allow elements to use the available screen space.

Example:

<View style={{ width: '90%' }}>
  <Text>Responsive Container</Text>
</View>

This container uses 90% of its parent's available width.

C. useWindowDimensions()

useWindowDimensions() is the preferred API for responsive React Native components.

It provides:

• width: Available window width.

• height: Available window height.

• scale: Device pixel ratio.

• fontScale: User's font scaling preference.

Example:

import { useWindowDimensions } from 'react-native';

export default function App() {
  const { width, height } = useWindowDimensions();

  return (
    <View>
      <Text>Width: {width}</Text>
      <Text>Height: {height}</Text>
    </View>
  );
}

Unlike a one-time dimension measurement, this Hook updates when the application window changes size.

D. Conditional Layout

We can use screen width to decide which layout should appear.

Example:

const isTablet = width >= 600;

return (
  <View>
    {isTablet ? (
      <Text>Tablet Layout</Text>
    ) : (
      <Text>Mobile Layout</Text>
    )}
  </View>
);

The 600-point breakpoint is an example convention, not a universal rule. Choose breakpoints according to your design and test devices.

5. Responsive Layout Techniques

Technique 1: Use Flexible Containers

Prefer flex: 1 for containers that should occupy available space.

Technique 2: Avoid Unnecessary Fixed Widths

Avoid giving every card or button the same fixed width. Use percentages or flexible sizing when appropriate.

Technique 3: Use ScrollView for Long Screens

A ScrollView allows users to scroll through content that does not fit on the screen.

Remember that ScrollView renders all its children. For very long data lists, consider FlatList.

Technique 4: Use Maximum Width

On tablets, content should not always stretch across the entire display.

Use maxWidth and center the content to maintain comfortable reading and interaction.

Technique 5: Respect Font Scaling

Users may increase system font size for readability. Do not assume that every device uses the default font scale.

Avoid fixed-height text containers that may cut off larger text.

6. Practical Project: Responsive Student Dashboard

Now we will create a Student Dashboard that adapts to different screen widths.

Step 1: Create or Open Your Project

Create a project using Expo:

npx create-expo-app@latest ResponsiveDashboard

Open the project:

cd ResponsiveDashboard

Start the development server:

npx expo start

Open the appropriate screen file. In an Expo Router project, this is commonly src/app/index.tsx or app/index.tsx, depending on the project structure.

Step 2: Import Required Components

We will use:

• View

• Text

• ScrollView

• StyleSheet

• useWindowDimensions

Step 3: Complete Responsive Dashboard Code

Replace the contents of your screen file with:

import React from 'react';

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

const students = [
  { id: '1', name: 'Rahul Sharma', course: 'React Native', marks: 85 },
  { id: '2', name: 'Priya Verma', course: 'JavaScript', marks: 92 },
  { id: '3', name: 'Amit Kumar', course: 'Android Studio', marks: 78 },
  { id: '4', name: 'Neha Singh', course: 'PHP & MySQL', marks: 88 }
];

export default function Index() {

  const { width, height } = useWindowDimensions();

  const isTablet = width >= 600;

  const styles = createStyles(isTablet);

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

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

          <Text style={styles.subtitle}>
            Welcome back!
          </Text>
        </View>

        <View style={styles.profile}>
          <Text style={styles.profileText}>RK</Text>
        </View>
      </View>

      <View style={styles.summary}>
        <View style={styles.summaryCard}>
          <Text style={styles.cardNumber}>120</Text>
          <Text style={styles.cardLabel}>Students</Text>
        </View>

        <View style={styles.summaryCard}>
          <Text style={styles.cardNumber}>85%</Text>
          <Text style={styles.cardLabel}>Attendance</Text>
        </View>
      </View>

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

      <View style={styles.studentGrid}>
        {students.map((student) => (
          <View
            key={student.id}
            style={styles.studentCard}
          >
            <Text style={styles.studentName}>
              {student.name}
            </Text>

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

            <Text style={styles.marks}>
              Marks: {student.marks}
            </Text>
          </View>
        ))}
      </View>

      <Text style={styles.deviceInfo}>
        {isTablet ? 'Tablet Layout' : 'Mobile Layout'}
      </Text>

      <Text style={styles.deviceInfo}>
        Window: {Math.round(width)} × {Math.round(height)}
      </Text>

    </ScrollView>
  );
}

const createStyles = (isTablet) =>
  StyleSheet.create({

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

    content: {
      padding: 16,
      alignItems: 'center'
    },

    header: {
      width: '100%',
      maxWidth: 1000,
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      marginBottom: 24
    },

    heading: {
      fontSize: isTablet ? 30 : 23,
      fontWeight: 'bold',
      color: '#172554'
    },

    subtitle: {
      fontSize: 15,
      color: '#64748B',
      marginTop: 5
    },

    profile: {
      width: 48,
      height: 48,
      borderRadius: 24,
      backgroundColor: '#2563EB',
      justifyContent: 'center',
      alignItems: 'center'
    },

    profileText: {
      color: '#FFFFFF',
      fontWeight: 'bold',
      fontSize: 16
    },

    summary: {
      width: '100%',
      maxWidth: 1000,
      flexDirection: 'row',
      gap: 12,
      marginBottom: 25
    },

    summaryCard: {
      flex: 1,
      backgroundColor: '#FFFFFF',
      padding: isTablet ? 24 : 16,
      borderRadius: 14,
      elevation: 2
    },

    cardNumber: {
      fontSize: isTablet ? 28 : 22,
      fontWeight: 'bold',
      color: '#2563EB'
    },

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

    sectionTitle: {
      width: '100%',
      maxWidth: 1000,
      fontSize: 20,
      fontWeight: 'bold',
      color: '#172554',
      marginBottom: 14
    },

    studentGrid: {
      width: '100%',
      maxWidth: 1000,
      flexDirection: 'row',
      flexWrap: 'wrap',
      gap: 12
    },

    studentCard: {
      width: isTablet ? '48%' : '100%',
      backgroundColor: '#FFFFFF',
      padding: 18,
      borderRadius: 14,
      elevation: 2
    },

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

    course: {
      fontSize: 14,
      color: '#64748B',
      marginTop: 7
    },

    marks: {
      fontSize: 15,
      color: '#16A34A',
      fontWeight: 'bold',
      marginTop: 10
    },

    deviceInfo: {
      marginTop: 14,
      color: '#64748B',
      fontSize: 13
    }

  });

Step 4: Understand the Responsive Logic

This line reads the available window dimensions:

const { width, height } = useWindowDimensions();

This line checks whether the available width is at least 600 points:

const isTablet = width >= 600;

For a narrower screen, student cards use:

width: '100%'

For a wider screen, student cards use:

width: '48%'

This creates a one-column mobile layout and a two-column wider layout.

The heading and card padding also change according to the selected layout.

Step 5: Test on Different Devices

Test your application on:

1. A small Android emulator.

2. A larger Android emulator.

3. A tablet emulator.

4. Portrait orientation.

5. Landscape orientation.

Observe how the layout changes when the available window width changes.

7. Understanding Dimensions API

React Native also provides the Dimensions API.

Example:

import { Dimensions } from 'react-native';

const windowWidth =
  Dimensions.get('window').width;

const windowHeight =
  Dimensions.get('window').height;

Use it when you need a dimension measurement outside a component or have a specific use case.

For responsive React components, prefer useWindowDimensions() because it automatically updates when the window size changes.

8. Common Responsive Design Mistakes

Mistake 1: Using Fixed Width Everywhere

A fixed width may overflow on smaller devices.

Solution: Use flexible sizing, percentages, and maximum widths.

Mistake 2: Ignoring Landscape Orientation

A portrait layout may not work well in landscape mode.

Solution: Test both orientations and adapt the layout when necessary.

Mistake 3: Making Text Too Small

Reducing text size excessively to fit content harms readability.

Solution: Use readable font sizes and allow text to wrap.

Mistake 4: Stretching Tablet Content

Full-width content may look uncomfortable on large displays.

Solution: Use maxWidth and center the main content.

Mistake 5: Forgetting Scrollable Content

Long screens may hide content below the visible area.

Solution: Use ScrollView for moderate content and FlatList for long data lists.

9. Best Practices

• Prefer Flexbox for layout.

• Use useWindowDimensions() for responsive components.

• Define breakpoints based on actual design requirements.

• Avoid unnecessary fixed dimensions.

• Test multiple screen sizes and orientations.

• Respect user font scaling.

• Use maxWidth for tablet layouts.

• Keep spacing and typography consistent.

• Use FlatList for large data collections.

10. Conclusion

Responsive design is an essential part of professional React Native development.

In this tutorial, we learned how to create screens that adapt to different devices using Flexbox, percentage-based sizing, useWindowDimensions(), conditional layouts, and maximum widths.

We also built a practical Student Dashboard with a one-column mobile layout and a two-column wider-screen layout.

11. Frequently Asked Questions

Q1. What is responsive design in React Native?

Responsive design means adjusting the application interface according to the available screen size and orientation.

Q2. Which API is preferred for responsive screen dimensions?

useWindowDimensions() is preferred inside React components because it updates when the window dimensions change.

Q3. What is a breakpoint?

A breakpoint is a width threshold used to switch between different layouts.

Q4. Can React Native applications support tablets?

Yes. React Native supports tablet layouts using flexible dimensions, Flexbox, and conditional rendering.

Q5. Why should we avoid fixed widths?

Fixed widths can cause overflow or poor spacing on devices with different screen sizes.

Q6. What is the difference between ScrollView and FlatList?

ScrollView renders all its children, while FlatList is designed to efficiently render long or changing lists.

Q7. Does responsive design support landscape mode?

Yes. When the available window dimensions change, useWindowDimensions() updates and the component can adapt its layout.