🧩 Spacer

A lightweight, configurable spacing system for React Native.

Spacer provides vertical and horizontal spacing components with an easy-to-use API. Define your spacing scale once in spacer.config.js and use <VSpacer.sm /> or <HSpacer.md /> throughout your app - no more magic numbers or repeated margin values.

Installation

npm install react-native-spacer-ui

Usage

import { VSpacer, HSpacer } from "react-native-spacer-ui";

export default function Example() {
  return (
    <>
      <Text>Above</Text>
      <VSpacer.sm />
      <Text>Below</Text>

      <View style={{ flexDirection: "row" }}>
        <Button title="OK" />
        <HSpacer.md />
        <Button title="Cancel" />
      </View>
    </>
  );
}

Configuration

import { setSpacerSizes } from "react-native-spacer-ui";

// set sizes globally
setSpacerSizes({
  xs: 2,
  sm: 6,
  md: 10,
  lg: 16,
  xl: 24,
});

export default function App() {
  return (
    <View>
      <Text>Hello world</Text>
    </View>
  );
}

| Config Key | Vertical Spacer | Horizontal Spacer | | ---------- | ----------------- | ----------------- | | xs | <VSpacer.xs /> | <HSpacer.xs /> | | sm | <VSpacer.sm /> | <HSpacer.sm /> | | md | <VSpacer.md /> | <HSpacer.md /> | | lg | <VSpacer.lg /> | <HSpacer.lg /> | | xl | <VSpacer.xl /> | <HSpacer.xl /> | | xxl | <VSpacer.xxl /> | <HSpacer.xxl /> |