How to Make a React Native App Responsive

The Problem with Hardcoded Dimensions in React Native

Unlike the web where CSS media queries are built into the browser engine, React Native uses Yoga — a Flexbox implementation in C++. When beginners write React Native styles, they frequently hardcode numerical values:

// ❌ ANTI-PATTERN: Hardcoded fixed widths and fonts
const styles = StyleSheet.create({
  card: {
    width: 360, // Breaks on iPhone SE (375px) with padding, looks tiny on iPad/iPhone Duo
    height: 200,
    padding: 24,
    fontSize: 18,
  }
});

On a small iPhone SE (375px wide), a 360px card with margins causes layout overflows. On an unfolded iPhone Duo (796px wide) or an iPad, that same card occupies less than half the screen, leaving awkward empty voids.

Strategy 1: Reactive Layouts with `useWindowDimensions`

Always prefer the built-in useWindowDimensions() hook over the static Dimensions.get('window'). It automatically updates whenever the user rotates the screen, enters multi-window split mode, or unfolds a dual-screen device:

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

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

  // Dynamic column determination based on responsive breakpoints
  const isTabletOrDuo = width >= 768;
  const numColumns = isTabletOrDuo ? 3 : 1;

  return (
    <View style={[styles.container, { flexDirection: isTabletOrDuo ? 'row' : 'column' }]}>
      <View style={[styles.column, { width: `${100 / numColumns}%` }]}>
        <Text style={styles.title}>Responsive React Native Item</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  column: {
    padding: 8,
  },
  title: {
    fontWeight: 'bold',
  }
});

Strategy 2: Proportional Scaling with `react-native-size-matters`

Scaling typography and padding across phones, phablets, and tablets is simplified with react-native-size-matters:

• scale(size): Scales linearly relative to standard 350px phone width.
• verticalScale(size): Scales vertically relative to standard 680px height.
• moderateScale(size, factor = 0.5): Scales with a damping factor so fonts on tablets don't scale disproportionately huge.

import { scale, verticalScale, moderateScale } from 'react-native-size-matters';

const styles = StyleSheet.create({
  headerTitle: {
    fontSize: moderateScale(22, 0.4), // Scales gently on large screens
    marginBottom: verticalScale(12),
    paddingHorizontal: scale(16),
  },
  actionButton: {
    height: verticalScale(48),
    borderRadius: scale(24),
    paddingHorizontal: scale(20),
  }
});

Strategy 3: Optimizing for iPhone Duo & Foldable Hardware

Dual-screen hardware like the iPhone Duo and Surface Duo have an unrendered physical hinge. In React Native:

1. Detect Dual-Screen Spanning: When the viewport width jumps abruptly (e.g. from 393px to 796px), transition your navigation from a single bottom tab bar to a two-pane Master-Detail layout.
2. Avoid Center Placements: Do not center primary action buttons (like checkout buttons or camera triggers) directly in the middle of the screen where the 16px fold seam sits.
3. Safe Insets: Use react-native-safe-area-context to respect status bar cutouts, Dynamic Islands, and fold offsets.