Width, height, and flex in React Native - Mini App: Build & Ship

Build: Box Layout Screen

This screen shows three colored boxes arranged vertically. Each box uses width, height, and flex properties to demonstrate how space is shared and sized in React Native layouts.

Target UI

┌─────────────────────────────┐
│        Box Layout Screen     │
├─────────────────────────────┤
│  ┌───────────────┐          │
│  │   Red Box     │          │
│  │  width: 100   │          │
│  │  height: 100  │          │
│  └───────────────┘          │
│                             │
│  ┌───────────────────────┐  │
│  │     Green Box          │  │
│  │     flex: 1           │  │
│  └───────────────────────┘  │
│                             │
│  ┌────────────────────────────┐
│  │        Blue Box             │
│  │        flex: 2             │
│  └────────────────────────────┘
└─────────────────────────────┘

Create a vertical layout with three boxes stacked top to bottom.

The top box is red with fixed width 100 and height 100.

The middle box is green and uses flex: 1 to fill available space.

The bottom box is blue and uses flex: 2 to fill twice the space of the green box.

Use React Native StyleSheet for styling.

The screen background should be white.

Starter Code

React Native

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

export default function BoxLayoutScreen() {
  return (
    <View style={styles.container}>
      {/* TODO: Add the three boxes here */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    flexDirection: 'column',
    // TODO: Add any other container styles if needed
  },
  // TODO: Add styles for redBox, greenBox, blueBox
});

Task 1

Task 2

Solution

React Native

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

export default function BoxLayoutScreen() {
  return (
    <View style={styles.container}>
      <View style={styles.redBox} />
      <View style={styles.greenBox} />
      <View style={styles.blueBox} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    flexDirection: 'column'
  },
  redBox: {
    width: 100,
    height: 100,
    backgroundColor: 'red'
  },
  greenBox: {
    flex: 1,
    backgroundColor: 'green'
  },
  blueBox: {
    flex: 2,
    backgroundColor: 'blue'
  }
});

We created a container View with flex: 1 to fill the screen and a white background. Inside it, we stacked three boxes vertically using flexDirection: 'column'.

The red box has fixed width and height of 100, so it stays small at the top.

The green and blue boxes use flex to share the remaining space. The green box uses flex: 1, and the blue box uses flex: 2, so the blue box is twice as tall as the green box.

This shows how fixed sizes and flex work together to control layout in React Native.

Final Result

Completed Screen

┌─────────────────────────────┐
│        Box Layout Screen     │
├─────────────────────────────┤
│  ┌───────────────┐          │
│  │               │          │
│  │    RED BOX    │          │
│  │   100x100 px  │          │
│  └───────────────┘          │
│                             │
│  ┌───────────────────────┐  │
│  │                       │  │
│  │      GREEN BOX         │  │
│  │      flex: 1          │  │
│  └───────────────────────┘  │
│                             │
│  ┌────────────────────────────┐
│  │                            │
│  │         BLUE BOX            │
│  │         flex: 2            │
│  └────────────────────────────┘
└─────────────────────────────┘

The screen shows three colored boxes stacked vertically.

The red box stays fixed size at top.

The green and blue boxes fill the rest of the screen with blue twice as tall as green.

Stretch Goal

Add a button below the blue box that toggles the visibility of the red box.

💡 Hint

Use React useState hook to track red box visibility and conditionally render the red box.