Working with Spacing

Spacing is the simplest way to improve how your UI looks.

Without spacing, elements feel crowded. With proper spacing, your screen becomes clear and easy to read.

There are two main types of spacing:

• margin: space outside an element;
• padding: space inside an element.

Example:

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.box}>First</Text>
      <Text style={styles.box}>Second</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20
  },
  box: {
    backgroundColor: 'lightgray',
    padding: 10,
    marginBottom: 10
  }
});

Here:

• padding adds space inside each box;
• marginBottom creates space between elements.

Spacing helps your UI "breathe" and makes content easier to scan.

At this stage, focus on adding simple spacing between sections and inside components.