Responsive dimensions (Dimensions API) in React Native - Mini App: Build & Ship

Build: Responsive Box Screen

This screen shows a colored box that adjusts its size based on the device screen width using the Dimensions API.

Target UI

-------------------------
|                       |
|                       |
|      [  BOX  ]        |
|                       |
|                       |
-------------------------

Use React Native Dimensions API to get screen width

Create a square box whose width and height are 50% of screen width

Center the box horizontally and vertically

Box background color should be blue

Add a text inside the box that says 'Responsive Box' centered

Starter Code

React Native

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

export default function ResponsiveBoxScreen() {
  // TODO: Get screen width using Dimensions API

  // TODO: Calculate box size as 50% of screen width

  return (
    <View style={styles.container}>
      {/* TODO: Add a blue box with responsive size and centered text */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
});

Task 1

Task 2

Task 3

Task 4

Solution

React Native

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

export default function ResponsiveBoxScreen() {
  const screenWidth = Dimensions.get('window').width;
  const boxSize = screenWidth * 0.5;

  return (
    <View style={styles.container}>
      <View style={[styles.box, { width: boxSize, height: boxSize }]}> 
        <Text style={styles.boxText}>Responsive Box</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  box: {
    backgroundColor: 'blue',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 8
  },
  boxText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold'
  }
});

We use Dimensions.get('window').width to get the current screen width. Then we calculate boxSize as half of that width to keep the box square and responsive.

The box is styled with a blue background and centered text. We use flexbox properties justifyContent and alignItems to center the box and the text inside it.

This approach ensures the box size changes automatically on different screen sizes, making the UI responsive.

Final Result

Completed Screen

-------------------------
|                       |
|                       |
|     +-------------+   |
|     | Responsive  |   |
|     |    Box      |   |
|     +-------------+   |
|                       |
-------------------------

The blue box is always centered on the screen.

The box size changes if the device screen width changes (e.g., rotating device).

Stretch Goal

Make the box size update dynamically when the device orientation changes.

💡 Hint

Use the Dimensions.addEventListener('change', callback) to listen for screen size changes and update state.