Margin, padding, border in React Native - Mini App: Build & Ship

Build: Box Styling Demo

This screen shows a colored box with margin, padding, and border to help understand spacing and borders in React Native.

Target UI

-------------------------
|                       |
|   [ Colored Box ]      |
|                       |
-------------------------

Create a View with a red background color.

Add margin of 20 pixels around the box.

Add padding of 15 pixels inside the box.

Add a black border with width 3 pixels around the box.

Inside the box, place a Text component that says 'Hello Box'.

Starter Code

React Native

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

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

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

Task 1

Task 2

Solution

React Native

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

export default function BoxStylingDemo() {
  return (
    <View style={styles.container}>
      <View style={styles.box}>
        <Text>Hello Box</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  box: {
    margin: 20,
    padding: 15,
    borderWidth: 3,
    borderColor: 'black',
    backgroundColor: 'red',
  },
});

We created a View styled as a box with margin, padding, border, and background color. Margin adds space outside the box, padding adds space inside around the text, and border draws a black line around the box. The text 'Hello Box' is inside the padded area.

Final Result

Completed Screen

-------------------------
|                       |
|   -----------------   |
|   | Hello Box     |   |
|   -----------------   |
|                       |
-------------------------

The box is centered on the screen with space around it (margin).

Inside the box, the text has space around it (padding).

A black border outlines the red box.

Stretch Goal

Add a shadow effect to the box to make it look raised.

💡 Hint

Use shadowColor, shadowOffset, shadowOpacity, and shadowRadius styles on iOS, and elevation on Android.