Responsive Layouts for Different Screen Sizes in React Native

Course: React Native Training

Topic: Responsive Layouts for Different Screen Sizes

Course Link: React Native Training at JustAcademy

Demo Registration: Register for a Free Course Demo

JustAcademy Website: Visit JustAcademy

1. Introduction to Responsive Layouts

Responsive layouts are user interfaces that adapt to different screen sizes, orientations, and device dimensions. In React Native, responsive design helps an application look clear and remain usable on small phones, large phones, tablets, and other supported screen configurations.

Mobile devices vary in width, height, pixel density, aspect ratio, and available display space. A layout designed only for one device may look cramped on a smaller phone or leave excessive empty space on a tablet. Responsive design addresses these differences by using flexible layouts, relative sizing, appropriate spacing, and conditional rendering when necessary.

React Native provides tools such as Flexbox, the useWindowDimensions hook, the Dimensions API, percentage dimensions, and platform-specific capabilities to help build adaptable interfaces.

1.1 Objectives of Responsive Design

• Make interfaces usable on different device sizes.
• Prevent text, images, buttons, and cards from overflowing the screen.
• Use available screen space efficiently.
• Support portrait and landscape orientations.
• Improve readability, accessibility, and touch interaction.
• Reduce the need to create a completely separate screen for every device.
• Provide a consistent user experience across supported platforms.

1.2 Responsive Design vs. Fixed Layout

2. Understanding Screen Dimensions in React Native

Before building responsive interfaces, understand the difference between screen dimensions and the dimensions available to a component. The full screen may include areas occupied by system UI, while the app's usable content area may be smaller due to headers, navigation bars, safe areas, or parent containers.

2.1 Width and Height

• Width: The horizontal space available for a screen or component.
• Height: The vertical space available for a screen or component.
• Aspect ratio: The relationship between width and height.
• Available content area: The area remaining after layout constraints and surrounding UI are considered.

2.2 Using the useWindowDimensions Hook

The useWindowDimensions hook returns the current window width, height, scale, and font scale. Unlike reading dimensions only once, the hook updates when the window dimensions change, making it useful for responsive components and orientation changes.

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

export default function ScreenInfo() {
  const { width, height, scale, fontScale } = useWindowDimensions();

  return (
    <View style={{ padding: 16 }}>
      <Text>Window width: {width}</Text>
      <Text>Window height: {height}</Text>
      <Text>Pixel scale: {scale}</Text>
      <Text>Font scale: {fontScale}</Text>
    </View>
  );
}

Explanation: The hook provides current window measurements. These values can be used to choose a layout, adjust a component's maximum width, or change the number of columns. Avoid assuming that a device always has the same usable dimensions.

2.3 When to Use useWindowDimensions

• When a layout must respond to rotation.
• When deciding between one-column and two-column content.
• When adjusting a card's maximum width.
• When a component needs to respond to changes in the app window.
• When considering user font scaling as part of readable layout design.

3. Building Flexible Layouts with Flexbox

Flexbox is one of the most important tools for responsive layouts in React Native. It lets components expand, shrink, align, and distribute available space without requiring every dimension to be hard-coded.

3.1 Important Flexbox Properties

3.2 Example: Flexible Row Layout

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

export default function FlexibleRow() {
  return (
    <View style={styles.container}>
      <View style={styles.panel}>
        <Text>First Panel</Text>
      </View>
      <View style={styles.panel}>
        <Text>Second Panel</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    gap: 12,
    padding: 16,
  },
  panel: {
    flex: 1,
    minWidth: 0,
    padding: 16,
    backgroundColor: '#E8EEF9',
    borderRadius: 8,
  },
});

Explanation: Both panels share the available horizontal space because they use flex: 1. The minWidth: 0 setting can help flexible children shrink within a row instead of forcing their parent to become wider than intended. Test long text and large accessibility font sizes as well.

3.3 Why Flexbox Is Better Than Fixed Widths

Suppose two cards each have a fixed width of 180 units. They may fit side by side on a large phone but overflow a narrow screen once padding and spacing are added. Flexible children can share the available width and adapt more naturally to the parent container.

4. Using Relative and Percentage Dimensions

React Native supports percentage dimensions for many layout properties. Percentage dimensions are calculated relative to the relevant parent dimension, so the parent usually needs a defined or measurable size for the percentage to work as expected.

4.1 Example of Percentage Width

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

export default function PercentageCard() {
  return (
    <View style={styles.screen}>
      <View style={styles.card}>
        <Text>Responsive Card</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    padding: 16,
  },
  card: {
    width: '100%',
    padding: 20,
    borderRadius: 12,
    backgroundColor: '#E2F4E8',
  },
});

Explanation: The card uses the full width of the available parent content area. The screen's padding keeps the card away from the edges. This is generally more adaptable than setting the card to a fixed width that may exceed a small device's available space.

4.2 Percentage Width vs. Fixed Width

5. Designing for Small, Medium, and Large Screens

Responsive layouts should be based on the space available to the interface, not solely on the marketing name or model of a device. A width-based layout rule can work across devices with different physical sizes.

5.1 Small Screens

• Prefer a single-column layout for most content.
• Use concise labels and clear visual hierarchy.
• Keep buttons and interactive elements easy to tap.
• Avoid placing too many controls in one horizontal row.
• Allow long text to wrap naturally.
• Use scrolling when the content is taller than the available screen.

5.2 Medium Screens

• Use a single column for reading-focused content or two columns for independent cards when space permits.
• Increase spacing only when it improves readability.
• Keep forms and text blocks within comfortable widths.
• Use flexible rows for related controls.

5.3 Large Screens and Tablets

• Consider two-column or multi-column layouts.
• Limit the maximum width of paragraphs and forms.
• Use additional space for navigation, side panels, or related information.
• Avoid stretching every card or text line across the entire display.
• Check the layout in both portrait and landscape orientations.

5.4 Example: Choose a Layout Based on Width

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

export default function ResponsivePanels() {
  const { width } = useWindowDimensions();
  const isWide = width >= 700;

  return (
    <View style={[styles.container, isWide && styles.wideContainer]}>
      <View style={styles.panel}>
        <Text>Overview</Text>
      </View>
      <View style={styles.panel}>
        <Text>Recent Activity</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
    gap: 12,
    padding: 16,
  },
  wideContainer: {
    flexDirection: 'row',
    alignItems: 'flex-start',
  },
  panel: {
    flex: 1,
    minWidth: 0,
    padding: 20,
    borderRadius: 10,
    backgroundColor: '#EEF1F5',
  },
});

Explanation: On a window narrower than 700 layout units, the panels are stacked vertically. At or above 700, they appear in a row and share the available space. The threshold is an example, not a universal standard. Choose it after testing the actual content and minimum widths of the components.

6. Responsive Grid and Card Layouts

A grid layout displays multiple items in rows and columns. Responsive grids are useful for product listings, dashboards, learning platforms, image galleries, and news feeds.

6.1 Using flexWrap for Responsive Cards

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

const items = ['Courses', 'Projects', 'Assignments', 'Reports'];

export default function ResponsiveGrid() {
  const { width } = useWindowDimensions();
  const columns = width >= 900 ? 3 : width >= 560 ? 2 : 1;

  return (
    <View style={styles.container}>
      {items.map((item) => (
        <View
          key={item}
          style={[styles.card, { width: `${100 / columns}%` }]}
        >
          <View style={styles.cardInner}>
            <Text style={styles.title}>{item}</Text>
            <Text>Explore your {item.toLowerCase()}.</Text>
          </View>
        </View>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    padding: 8,
  },
  card: {
    padding: 8,
  },
  cardInner: {
    minHeight: 110,
    padding: 16,
    justifyContent: 'center',
    backgroundColor: '#EDF2FA',
    borderRadius: 10,
  },
  title: {
    fontSize: 17,
    fontWeight: '600',
    marginBottom: 8,
  },
});

Explanation: The example uses three columns when the window is at least 900 units wide, two columns at 560–899, and one column on narrower windows. Each card receives a percentage width based on the selected column count. The example keeps spacing inside each card's wrapper so the column widths remain predictable.

Important: These breakpoints are sample values. Test your actual card content, device window sizes, and text scaling before selecting breakpoints for a production application.

6.2 Choosing a Grid Strategy

7. Responsive Typography and Text Scaling

Text must remain readable at different window sizes and when users increase the system font size. Avoid shrinking text simply to make a layout fit. Instead, let text wrap, increase container height where needed, and adapt the arrangement of nearby elements.

7.1 Typography Best Practices

• Use clear and consistent heading, body, caption, and button text styles.
• Allow paragraphs and labels to wrap naturally.
• Avoid fixed heights on containers that hold variable-length text.
• Check long words, URLs, translated strings, and large font settings.
• Consider fontScale from useWindowDimensions when a layout needs to respond to accessibility font scaling.
• Use numberOfLines only when truncation is intentional and important content remains accessible elsewhere.

7.2 Example: Text That Adapts to the Available Width

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

export default function ResponsiveText() {
  return (
    <View style={styles.container}>
      <Text style={styles.heading}>Learn React Native</Text>
      <Text style={styles.description}>
        Build mobile applications with reusable components,
        flexible layouts, and platform-aware design.
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    padding: 16,
  },
  heading: {
    fontSize: 24,
    fontWeight: '700',
    marginBottom: 8,
  },
  description: {
    fontSize: 16,
    lineHeight: 24,
  },
});

Explanation: The description can wrap onto multiple lines instead of being forced into a fixed-width, single-line area. The container has padding but no fixed height, so it can grow as the text wraps or the user increases the font size.

8. Responsive Images and Media

Images, illustrations, and thumbnails should scale within their parent containers without distorting their aspect ratios. Choose the image display mode according to whether the complete image must be visible or the container must be fully covered.

8.1 Common Image Resize Modes

8.2 Example: Responsive Image Card

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

export default function CourseImageCard() {
  return (
    <View style={styles.card}>
      <Image
        source={{ uri: 'https://example.com/course-image.jpg' }}
        style={styles.image}
        resizeMode="cover"
      />
      <Text style={styles.title}>React Native Development</Text>
      <Text style={styles.description}>
        Learn to create flexible mobile interfaces.
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    width: '100%',
    maxWidth: 500,
    alignSelf: 'center',
    padding: 16,
    borderRadius: 12,
    backgroundColor: '#FFFFFF',
  },
  image: {
    width: '100%',
    aspectRatio: 16 / 9,
    borderRadius: 8,
  },
  title: {
    marginTop: 12,
    fontSize: 18,
    fontWeight: '700',
  },
  description: {
    marginTop: 6,
    fontSize: 15,
    lineHeight: 22,
  },
});

Explanation: The image fills the card width and maintains a 16:9 aspect ratio. The card can shrink on narrow screens and stops growing beyond its maximum width on larger screens. Replace the example image URL with a valid image hosted by your application or image provider.

9. Responsive Forms and Buttons

Forms must remain easy to complete on small screens and comfortable to use on larger devices. Inputs should generally fill their parent width, labels should remain readable, and action buttons should not be clipped by the screen edges.

9.1 Form Design Guidelines

• Use full-width inputs inside a padded container.
• Keep labels close to their corresponding fields.
• Allow the form to scroll when its content exceeds the available height.
• Use flexible button rows only when the available width is sufficient.
• Stack primary and secondary actions on narrow screens if side-by-side buttons become cramped.
• Check keyboard behavior, especially when forms appear near the bottom of the screen.
• Preserve clear focus, validation, and error messages.

9.2 Example: Responsive Button Arrangement

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

export default function FormActions() {
  const { width } = useWindowDimensions();
  const isWide = width >= 480;

  return (
    <View style={[styles.actions, isWide && styles.actionsWide]}>
      <Pressable style={styles.primaryButton}>
        <Text style={styles.primaryText}>Submit</Text>
      </Pressable>
      <Pressable style={styles.secondaryButton}>
        <Text style={styles.secondaryText}>Cancel</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  actions: {
    gap: 12,
  },
  actionsWide: {
    flexDirection: 'row',
  },
  primaryButton: {
    minHeight: 48,
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 12,
    borderRadius: 8,
    backgroundColor: '#2457C5',
  },
  primaryText: {
    color: '#FFFFFF',
    fontWeight: '600',
  },
  secondaryButton: {
    minHeight: 48,
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 12,
    borderRadius: 8,
    backgroundColor: '#E8ECF2',
  },
  secondaryText: {
    color: '#202938',
    fontWeight: '600',
  },
});

Explanation: The buttons stack vertically on narrower windows and appear side by side when the window is at least 480 units wide. This example illustrates layout only; connect the buttons to actual submission and cancellation handlers in a real form.

10. Handling Portrait and Landscape Orientation

Orientation describes how a device or application window is arranged. Portrait is generally taller than it is wide, while landscape is wider than it is tall. Responsive layouts should reorganize content when the window dimensions change rather than assume the device remains in one orientation.

10.1 Orientation-Aware Layout

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

export default function OrientationLayout() {
  const { width, height } = useWindowDimensions();
  const isLandscape = width > height;

  return (
    <View style={[styles.container, isLandscape && styles.landscape]}>
      <View style={styles.panel}>
        <Text>Main Content</Text>
      </View>
      <View style={styles.panel}>
        <Text>Supporting Content</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    gap: 12,
    padding: 16,
  },
  landscape: {
    flexDirection: 'row',
    alignItems: 'stretch',
  },
  panel: {
    flex: 1,
    minWidth: 0,
    padding: 20,
    backgroundColor: '#E9EEF7',
    borderRadius: 10,
  },
});

Explanation: The component compares the current window width and height. When the window is wider than it is tall, the panels appear in a row; otherwise, they stack vertically. This is a simple heuristic, not a guarantee that every landscape window has enough width for every design.

10.2 Orientation Testing Checklist

• Confirm that content remains visible after rotation.
• Check whether horizontal buttons or tabs have enough space.
• Verify that images keep their intended proportions.
• Ensure forms and long pages remain scrollable.
• Test devices with unusual aspect ratios and resizable windows.

11. Safe Areas, Scrolling, and Available Space

Responsive design includes more than width. The status bar, device cutouts, navigation areas, keyboards, and app navigation can reduce the space available for content. Avoid positioning important content too close to screen edges.

11.1 Safe Area Considerations

On devices with notches or rounded corners, use a suitable safe-area approach so important content is not hidden behind system UI. Depending on the project setup, this may involve React Native's supported safe-area facilities or the community package react-native-safe-area-context. Check the library's installation and setup requirements for your project.

11.2 ScrollView for Flexible Content

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

export default function ScrollableScreen() {
  return (
    <ScrollView
      style={styles.screen}
      contentContainerStyle={styles.content}
    >
      {Array.from({ length: 12 }, (_, index) => (
        <View key={index} style={styles.card}>
          <Text>Section {index + 1}</Text>
        </View>
      ))}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
  },
  content: {
    padding: 16,
    gap: 12,
  },
  card: {
    minHeight: 80,
    justifyContent: 'center',
    padding: 16,
    borderRadius: 8,
    backgroundColor: '#EDF1F7',
  },
});

Explanation: The content can extend beyond the visible window and be scrolled vertically. Use ScrollView for manageable amounts of content. For very long lists, consider FlatList or another virtualized list to improve rendering efficiency.

12. Breakpoints and Conditional Styling

A breakpoint is a width or other condition at which the layout changes. React Native does not require a web-style media-query approach for every responsive layout. You can use the window dimensions in a component and apply conditional styles or render different component arrangements.

12.1 Common Breakpoint Ideas

These are illustrative thresholds, not fixed rules for phones, tablets, or every application. The correct breakpoint is the point at which the current layout stops working well for the content.

12.2 Keeping Responsive Logic Maintainable

• Define breakpoint constants when multiple screens share the same layout rules.
• Use meaningful names such as isWideLayout instead of repeating unexplained numeric comparisons.
• Separate complex responsive sections into reusable components.
• Do not create a different layout for every device model unless there is a genuine product requirement.
• Keep component styles readable by using StyleSheet.create and conditional style arrays.

13. Common Responsive Layout Problems and Solutions

14. Best Practices for Responsive React Native Design

1. Start with the content: Identify the minimum width each section needs before deciding on breakpoints.
2. Prefer flexible layout: Use Flexbox and relative dimensions instead of relying entirely on fixed widths.
3. Use current dimensions: Use useWindowDimensions when rendering depends on window size or font scale.
4. Set maximum widths: Prevent text and forms from stretching excessively on wide screens.
5. Support text scaling: Test large system font settings and avoid clipping content.
6. Plan for scrolling: Use scrollable containers for content that may exceed the available height.
7. Keep touch controls usable: Provide sufficient size, spacing, and clear visual states.
8. Respect safe areas: Consider system bars, cutouts, keyboards, and app navigation.
9. Test real conditions: Test portrait and landscape, narrow and wide windows, and different font settings.
10. Use reusable components: Apply shared card, spacing, and layout patterns across screens.
11. Avoid unnecessary scaling: Not every value should increase proportionally with screen width. Text readability and usability should guide sizing.
12. Check performance: Use virtualized lists for large collections instead of rendering every item in a long scroll view.

15. Practical Project: Responsive Learning Dashboard

Project Objective

Create a learning dashboard that adapts to different window sizes. On narrow screens, its cards should appear in one column. On medium screens, two columns should be used, and on wide screens, three columns should be available. The content should remain readable and scrollable.

15.1 Complete Example

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

const dashboardItems = [
  { id: '1', title: 'My Courses', description: 'Continue your learning.' },
  { id: '2', title: 'Assignments', description: 'Review pending tasks.' },
  { id: '3', title: 'Projects', description: 'Build practical skills.' },
  { id: '4', title: 'Certificates', description: 'View achievements.' },
  { id: '5', title: 'Resources', description: 'Explore learning material.' },
  { id: '6', title: 'Progress', description: 'Track your development.' },
];

export default function ResponsiveDashboard() {
  const { width } = useWindowDimensions();
  const columns = width >= 900 ? 3 : width >= 560 ? 2 : 1;

  return (
    <ScrollView
      style={styles.screen}
      contentContainerStyle={styles.content}
    >
      <View style={styles.header}>
        <Text style={styles.heading}>Learning Dashboard</Text>
        <Text style={styles.subtitle}>
          Access your learning activities in one place.
        </Text>
      </View>

      <View style={styles.grid}>
        {dashboardItems.map((item) => (
          <View
            key={item.id}
            style={[styles.gridItem, { width: `${100 / columns}%` }]}
          >
            <View style={styles.card}>
              <Text style={styles.cardTitle}>{item.title}</Text>
              <Text style={styles.cardDescription}>
                {item.description}
              </Text>
            </View>
          </View>
        ))}
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    backgroundColor: '#F5F7FB',
  },
  content: {
    padding: 16,
  },
  header: {
    marginBottom: 20,
  },
  heading: {
    fontSize: 25,
    fontWeight: '700',
    color: '#17243A',
    marginBottom: 8,
  },
  subtitle: {
    fontSize: 16,
    lineHeight: 23,
    color: '#566276',
  },
  grid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    marginHorizontal: -6,
  },
  gridItem: {
    paddingHorizontal: 6,
    paddingBottom: 12,
  },
  card: {
    minHeight: 120,
    padding: 16,
    borderRadius: 12,
    backgroundColor: '#FFFFFF',
    justifyContent: 'center',
  },
  cardTitle: {
    fontSize: 17,
    fontWeight: '700',
    color: '#17243A',
    marginBottom: 8,
  },
  cardDescription: {
    fontSize: 14,
    lineHeight: 21,
    color: '#566276',
  },
});

15.2 How the Project Works

• useWindowDimensions reads the current application window width.
• The columns variable selects one, two, or three columns based on sample breakpoints.
• The grid uses flexDirection: 'row' and flexWrap: 'wrap' to arrange cards.
• Each grid item receives a percentage width based on the number of columns.
• The scroll view allows users to access all cards when content exceeds the visible height.
• Cards use flexible height behavior and allow descriptions to wrap onto additional lines.

15.3 Project Testing Tasks

1. Run the dashboard on a narrow phone-sized window.
2. Confirm that the cards display in a single column without horizontal overflow.
3. Increase the window width and check when the layout changes to two columns.
4. Test a wide window and verify the three-column layout.
5. Rotate the device or resize the app window and confirm the layout updates.
6. Increase the system font size and inspect the card descriptions.
7. Test with longer titles and descriptions to check wrapping.
8. Adjust the breakpoint values if the cards become too narrow for their content.

16. Exercises and Assignments

1. Create a profile screen that uses a single-column layout on narrow screens and a side-by-side profile and details layout on wider screens.
2. Build a product grid that displays one, two, or three columns according to window width.
3. Create a responsive login form with full-width fields and buttons that stack on narrow screens.
4. Build a news card with an image that maintains a 16:9 aspect ratio.
5. Create a dashboard that changes from a vertical layout to a horizontal layout when sufficient width is available.
6. Test a screen with large system font settings and fix any clipped text.
7. Build a scrollable screen that remains usable in landscape orientation.
8. Document the breakpoints used in your project and explain why they fit the content.

17. Interview Questions and Answers

Q1. What is responsive design in React Native?

Answer: Responsive design adapts an application's layout and content to the available window size, orientation, and user display settings so that the interface remains usable on different devices.

Q2. Which React Native API is useful for tracking window size changes?

Answer: The useWindowDimensions hook is generally preferred in React components because its values update when the application window or font scale changes.

Q3. What is the role of Flexbox in responsive design?

Answer: Flexbox distributes available space between components, aligns children, and supports flexible rows, columns, and wrapping layouts.

Q4. What is a breakpoint?

Answer: A breakpoint is a condition, commonly based on window width, at which a layout changes to suit the available space. Breakpoints should be selected by testing the content rather than relying on a device name alone.

Q5. Why should fixed widths be used carefully?

Answer: A fixed width may exceed the available space on narrow screens or waste space on wide screens. Flexible dimensions, percentage widths, and maximum-width constraints often produce more adaptable layouts.

Q6. How can a grid adapt to different screen sizes?

Answer: Use flexible layout rules such as flexWrap, percentage-based column widths, or a list component with a suitable column count.

Q7. How should text behave on smaller screens?

Answer: Text should generally wrap naturally and remain readable. Avoid fixed-height containers that clip text, and test the interface with larger accessibility font settings.

Q8. How can an application respond to orientation changes?

Answer: Use current window dimensions to recalculate layout choices. Components that depend on these values can then render a suitable layout after the window changes.

Q9. What is the difference between screen dimensions and window dimensions?

Answer: Screen dimensions describe the device display, while window dimensions describe the area occupied by the application window. The window may be smaller than the full display, depending on system UI and app configuration.

Q10. How do you prevent content from becoming too wide on tablets?

Answer: Set an appropriate maxWidth, center the content within its parent, and use additional columns or side panels where useful instead of stretching every element.

Q11. When should ScrollView be used?

Answer: Use ScrollView when content may extend beyond the visible window and the amount of content is manageable. For long data collections, use FlatList or another virtualized list.

Q12. How do you test a responsive React Native application?

Answer: Test different window widths, orientations, font sizes, and content lengths. Use emulators and real devices, inspect overflow, and verify that controls remain accessible and usable.

18. Quick Revision Checklist

• Understand the difference between screen size and application window size.
• Use useWindowDimensions when layout depends on changing dimensions.
• Prefer Flexbox and flexible dimensions over unnecessary fixed widths.
• Use percentages carefully, based on the dimensions of the parent.
• Choose breakpoints based on the content's needs.
• Use flexWrap or a suitable list strategy for card grids.
• Keep text readable and support system font scaling.
• Preserve image proportions with an appropriate resize mode and aspect ratio.
• Handle scrolling and safe areas correctly.
• Test narrow, medium, and wide windows in both portrait and landscape.
• Check accessibility, touch targets, and long or translated text.
• Use maximum widths to maintain readability on large displays.

19. Conclusion

Responsive layouts are an essential part of building professional React Native applications. By combining Flexbox, percentage dimensions, useWindowDimensions, thoughtful breakpoints, flexible cards, readable typography, and proper scrolling, developers can build interfaces that adapt to a wide range of screen sizes.

The most effective approach is to design around the content and the space available rather than targeting individual device models. Test every important screen at multiple widths, orientations, and font settings, then refine the layout until the application remains clear, accessible, and practical to use.

20. Additional Learning Resources

• React Native Dimensions Documentation
• React Native useWindowDimensions Documentation
• React Native Flexbox Documentation
• Explore React Native Training at JustAcademy
• Register for a Course Demo
• Visit the JustAcademy Website