← Back to all posts

Make Your React Native App Responsive: A Simple Helper That Just Works

EhsanBy Ehsan
••9 min read
React NativeMobile DevelopmentResponsive DesignUI UtilitiesScreen SizesMobile DesignReact Native DimensionsCross-Platform

Introduction

When you're building React Native apps, one of the first challenges you hit is making your UI look good on different screen sizes. An iPhone SE, iPhone 6, iPhone X—they all have different dimensions, and you want your app to look great on all of them.

There are complex solutions out there with tons of features, but sometimes you don't need all that. Sometimes you just need something simple that works.

Back in 2016, I wrote a small helper class for one of my first React Native projects. Surprisingly, it's still working perfectly for most of my apps. Let me show you why it's useful and how it works.

The Problem: Different Screen Sizes

React Native doesn't automatically scale your UI based on screen size. If you set a font size to 20 or a height to 100, it stays that size on every device.

// This looks fine on iPhone 6
<Text style={{ fontSize: 20 }}>Welcome</Text>

// But on iPhone SE, it looks too big
// On iPhone X, it looks too small

You need a way to scale your sizes based on the device's screen dimensions. That's where this helper comes in.

The Solution: A Simple Responsive Helper

Here's the complete helper class:

import { Dimensions } from 'react-native';

const MINIMUM_FONT_SIZE_ALLOWED = 16;
const BASE_HEIGHT = 667; // iPhone 6

class Responsive {
  /**
   * Convert given size according to screen (Based on iPhone 6 screen)
   * @param size
   * @returns {number}
   */
  static size(size = 0, ignoreLargerScreen = true) {
    const screenHeight = Dimensions.get('window').height;

    if (ignoreLargerScreen && screenHeight > BASE_HEIGHT) {
      return size;
    }

    return Number(((size / BASE_HEIGHT) * screenHeight).toFixed(2));
  }

  /**
   * Convert given font size according to screen width (Based on iPhone 6 screen)
   * @param size
   * @returns {number}
   */
  static font(size = 0, ignoreLargerScreen = true) {
    const screenHeight = Dimensions.get('window').height;

    if (ignoreLargerScreen && screenHeight > BASE_HEIGHT) {
      return Math.max(size, MINIMUM_FONT_SIZE_ALLOWED);
    }

    const output = (size / BASE_HEIGHT) * screenHeight;

    return output >= MINIMUM_FONT_SIZE_ALLOWED
      ? Number(output.toFixed(2))
      : MINIMUM_FONT_SIZE_ALLOWED;
  }

  /**
   * Check if device has smaller screen (Based on iPhone 6 screen)
   * @returns {boolean}
   */
  static isSmall() {
    return Dimensions.get('window').height < BASE_HEIGHT;
  }

  /**
   * Check if device has super smaller screen
   * @returns {boolean}
   */
  static isSuperSmall() {
    return Dimensions.get('window').height <= 600;
  }
}

export default Responsive;

It's simple—just four methods that solve most responsive design problems.

How It Works

The Base: iPhone 6 as Reference

The helper uses the iPhone 6 (height: 667) as the base reference. Why iPhone 6? Back in 2016, it was the most common iPhone, so designing for it made sense. Even now, it's still a good middle ground.

The core idea is simple: calculate a ratio between the current device height and the iPhone 6 height, then apply that ratio to your sizes.

Formula: (yourSize / 667) × currentDeviceHeight

Method 1: size() - Scale Any Dimension

Use this for heights, widths, margins, padding—basically any layout dimension.

import Responsive from './Responsive';

// On iPhone 6 (height: 667): returns 100
// On iPhone SE (height: 568): returns ~85
// On iPhone X (height: 812): returns 100 (ignored because larger)
<View style={{ height: Responsive.size(100) }} />

The ignoreLargerScreen parameter:

By default, it's true, which means devices larger than iPhone 6 don't get scaled up. This prevents your UI from looking too big on larger phones. You can set it to false if you want everything to scale up proportionally.

// Ignore larger screens (default)
Responsive.size(100, true)  // iPhone X gets 100, not 121

// Scale up on larger screens
Responsive.size(100, false) // iPhone X gets 121

Method 2: font() - Scale Font Sizes

This works like size() but with font-specific logic.

// Font sizes scale based on screen height
<Text style={{ fontSize: Responsive.font(18) }}>
  Song Title
</Text>

The minimum font size:

Fonts smaller than 16 can be hard to read. The helper enforces a minimum of 16, no matter how small the screen is. This ensures text stays readable on tiny screens.

// Even on iPhone SE, fonts won't go below 16
Responsive.font(14) // Returns 16 (minimum enforced)

Method 3: isSmall() - Check for Small Screens

Sometimes you need to render different UI based on screen size. This method tells you if the device is smaller than iPhone 6.

// Adjust layout for small screens
{Responsive.isSmall() ? (
  <Text style={{ fontSize: Responsive.font(16) }}>
    Compact View
  </Text>
) : (
  <Text style={{ fontSize: Responsive.font(20) }}>
    Regular View
  </Text>
)}

Method 4: isSuperSmall() - Check for Very Small Screens

For devices with height ≤ 600 (like very old or small Android phones), you might need even more adjustments.

// Special handling for very small screens
{Responsive.isSuperSmall() && (
  <Text style={{ fontSize: 14 }}>
    Minimal UI for tiny screens
  </Text>
)}

Why This Works

1. Simple Math, Predictable Results

The math is straightforward: scale sizes proportionally based on screen height. No complex calculations, no magic numbers. You can look at the code and immediately understand what it does.

2. Based on Height, Not Width

Using height instead of width is better for most apps. Phones vary more in height than width, and height affects scrolling and content visibility more.

3. The ignoreLargerScreen Default

This is smart. Most of the time, you don't want your UI to get huge on large phones. A button that's 50 tall on iPhone 6 shouldn't become 60 on iPhone X—that looks weird. By default, larger screens use your original sizes.

But if you're scaling something like an image or want proportional growth, you can turn it off.

4. Enforced Minimum Font Size

Accessibility matters. Tiny fonts are hard to read. By enforcing a 16-point minimum, the helper ensures text stays legible even on small screens.

Real-World Usage

Here's how I typically use this in a real component:

import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import Responsive from './Responsive';

function MusicPlayer({ songTitle, artist }) {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>{songTitle}</Text>
      <Text style={styles.artist}>{artist}</Text>

      <TouchableOpacity style={styles.playButton}>
        <Text style={styles.buttonText}>Play</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: Responsive.size(20),
    height: Responsive.size(200),
  },
  title: {
    fontSize: Responsive.font(24),
    marginBottom: Responsive.size(8),
  },
  artist: {
    fontSize: Responsive.font(16),
    marginBottom: Responsive.size(20),
  },
  playButton: {
    height: Responsive.size(50),
    paddingHorizontal: Responsive.size(30),
    borderRadius: Responsive.size(25),
  },
  buttonText: {
    fontSize: Responsive.font(18),
  },
});

export default MusicPlayer;

Everything scales proportionally. On smaller screens, the entire UI shrinks just enough to fit. On larger screens, it stays at a comfortable size without getting too big.

When This Helper Works Best

This helper works great for most React Native apps:

  • Standard mobile layouts
  • Portrait-oriented apps
  • Apps with consistent design patterns
  • Any app where proportional scaling makes sense

Basically, if you're building a mobile app, this helper will handle your responsive needs.

When You Might Need More

This helper might not be enough if:

You're building complex, custom layouts:

  • Games with pixel-perfect positioning
  • Apps with heavy graphics
  • Custom drawing or canvas work

You need landscape support:

  • This helper only checks height, so landscape mode isn't handled
  • You'd need to add width-based calculations

You have wildly different UI for tablets:

  • iPad apps might need completely different layouts
  • You'd want a more robust solution with breakpoints

For those cases, you might need to build a more complex responsive system with additional logic. But honestly, for most apps, this simple helper is all you need.

Update (September 2024): If you prefer utility-first styling, NativeWind (Tailwind for React Native) now offers a modern utility-based approach to responsive design that works great alongside or instead of this helper.

The Beauty of Simple Solutions

I wrote this helper in 2016 for one of my first React Native projects. I expected to replace it with something more sophisticated later. But you know what? It's still in most of my apps, and it works perfectly.

That's the beauty of simple solutions. They're:

  • Easy to understand
  • Easy to debug
  • Easy to maintain
  • Hard to break

You don't need a complex library for every problem. Sometimes a small utility class with clear logic is the best solution.

Try It Yourself

Add this helper to your React Native project and start using it:

// Responsive.js
import { Dimensions } from 'react-native';

const MINIMUM_FONT_SIZE_ALLOWED = 16;
const BASE_HEIGHT = 667; // iPhone 6

class Responsive {
  static size(size = 0, ignoreLargerScreen = true) {
    const screenHeight = Dimensions.get('window').height;

    if (ignoreLargerScreen && screenHeight > BASE_HEIGHT) {
      return size;
    }

    return Number(((size / BASE_HEIGHT) * screenHeight).toFixed(2));
  }

  static font(size = 0, ignoreLargerScreen = true) {
    const screenHeight = Dimensions.get('window').height;

    if (ignoreLargerScreen && screenHeight > BASE_HEIGHT) {
      return Math.max(size, MINIMUM_FONT_SIZE_ALLOWED);
    }

    const output = (size / BASE_HEIGHT) * screenHeight;

    return output >= MINIMUM_FONT_SIZE_ALLOWED
      ? Number(output.toFixed(2))
      : MINIMUM_FONT_SIZE_ALLOWED;
  }

  static isSmall() {
    return Dimensions.get('window').height < BASE_HEIGHT;
  }

  static isSuperSmall() {
    return Dimensions.get('window').height <= 600;
  }
}

export default Responsive;

Then use it in your components:

import Responsive from './Responsive';

// In your styles
fontSize: Responsive.font(18),
height: Responsive.size(100),
padding: Responsive.size(16),

Test your app on different device sizes and watch everything scale perfectly.

Final Thoughts

Responsive design in React Native doesn't have to be complicated. You don't need a massive library or complex configuration. Sometimes all you need is a simple helper class that does basic math.

This helper has served me well for years across multiple projects. It's simple, it works, and it solves the most common responsive design problems without overcomplicating things.

Give it a try. You might be surprised how far a simple solution can take you.

Resources