Spacer

The Spacer component provides a simple way to add consistent spacing between UI elements. Instead of using margin or padding on components directly, you can use Spacer to create predictable spacing in your layouts.

Features

Orientation Options: Horizontal or vertical spacing
Customizable Size: Control the exact amount of spacing
Simple API: Easy to use with minimal props
Styling Control: Accepts additional Tailwind classes and style objects
Layout Flexibility: Can be used in any container component

Import

import Spacer from '@/components/layout/Spacer';

Props

Prop	Type	Default	Description
`size`	`number`	`4`	Size of the spacer in points
`orientation`	`'horizontal' \| 'vertical'`	`'vertical'`	Direction of the spacing
`className`	`string`	`''`	Additional Tailwind classes
`style`	`ViewStyle`	—	Additional style object

Usage Examples

Basic Vertical Spacing

<View>
  <Text>First content item</Text>
  <Spacer size={16} />
  <Text>Second content item</Text>
</View>

Horizontal Spacing

<View className="flex-row items-center">
  <Button title="Previous" />
  <Spacer size={12} orientation="horizontal" />
  <Button title="Next" />
</View>

Multiple Spacers for Consistent Layout

<View>
  <Text className="text-lg font-bold">Profile</Text>
  <Spacer size={8} />
  <Text>Edit your personal information below</Text>
  <Spacer size={24} />
  
  <Input label="Full Name" />
  <Spacer size={16} />
  <Input label="Email" />
  <Spacer size={16} />
  <Input label="Phone" />
  
  <Spacer size={32} />
  <Button title="Save Changes" />
</View>

Custom Sized Spacers

<View>
  <Text className="text-xl font-bold">Welcome back!</Text>
  <Spacer size={4} />
  <Text className="text-gray-500">Sign in to continue</Text>
  <Spacer size={32} />
  
  <Input label="Email" />
  <Spacer size={16} />
  <Input label="Password" isPassword={true} />
  <Spacer size={8} />
  
  <Text className="text-right text-blue-500">Forgot password?</Text>
  <Spacer size={24} />
  
  <Button title="Sign In" />
</View>

Form Layout Example

function SignupForm() {
  return (
    <View className="p-4">
      <Text className="text-xl font-bold">Create an Account</Text>
      <Spacer size={8} />
      <Text className="text-gray-500">Please fill out the form below</Text>
      
      <Spacer size={32} />
      
      <Input label="Full Name" />
      <Spacer size={16} />
      
      <Input label="Email" keyboardType="email-address" />
      <Spacer size={16} />
      
      <Input label="Password" isPassword={true} />
      <Spacer size={16} />
      
      <Input label="Confirm Password" isPassword={true} />
      
      <Spacer size={24} />
      
      <Checkbox 
        label="I agree to the Terms and Conditions"
        checked={false}
        onChange={() => {}}
      />
      
      <Spacer size={32} />
      
      <Button title="Sign Up" />
      
      <Spacer size={24} />
      
      <View className="flex-row justify-center">
        <Text className="text-gray-500">Already have an account?</Text>
        <Spacer size={4} orientation="horizontal" />
        <Text className="text-blue-500">Sign In</Text>
      </View>
    </View>
  );
}

Card Layout Example

function FeatureCard() {
  return (
    <Card className="p-4">
      <View className="items-center">
        <Icon name="Star" size={32} color="#4C6EF5" />
        <Spacer size={12} />
        
        <Text className="text-lg font-bold text-center">Premium Features</Text>
        <Spacer size={8} />
        
        <Text className="text-center text-gray-500">
          Unlock advanced capabilities with our premium plan
        </Text>
        
        <Spacer size={16} />
        
        <View className="w-full">
          <View className="flex-row items-center">
            <Icon name="Check" size={16} color="#4C6EF5" />
            <Spacer size={8} orientation="horizontal" />
            <Text>Unlimited projects</Text>
          </View>
          
          <Spacer size={8} />
          
          <View className="flex-row items-center">
            <Icon name="Check" size={16} color="#4C6EF5" />
            <Spacer size={8} orientation="horizontal" />
            <Text>Priority support</Text>
          </View>
          
          <Spacer size={8} />
          
          <View className="flex-row items-center">
            <Icon name="Check" size={16} color="#4C6EF5" />
            <Spacer size={8} orientation="horizontal" />
            <Text>Advanced analytics</Text>
          </View>
        </View>
        
        <Spacer size={24} />
        
        <Button title="Upgrade Now" />
      </View>
    </Card>
  );
}

Best Practices

Consistent Spacing System

Create a consistent spacing system throughout your app:

// Define spacing constants
const SPACING = {
  xs: 4,
  sm: 8,
  md: 16,
  lg: 24,
  xl: 32,
  xxl: 48
};
 
// Use them consistently
<View>
  <Text className="text-xl font-bold">Section Title</Text>
  <Spacer size={SPACING.sm} />
  <Text className="text-gray-500">Section description</Text>
  <Spacer size={SPACING.lg} />
  
  <Input label="Field 1" />
  <Spacer size={SPACING.md} />
  <Input label="Field 2" />
</View>

Compose with Layout Components

Use Spacer with other layout components for more complex designs:

<Section title="User Information">
  <Stack spacing={0}> {/* No spacing in Stack, we'll use Spacer instead */}
    <Input label="Name" />
    <Spacer size={16} />
    
    <Grid columns={2} spacing={0}>
      <Input label="City" />
      <Input label="Country" />
    </Grid>
    <Spacer size={16} />
    
    <Input label="Bio" isMultiline={true} />
  </Stack>
</Section>

Choose Appropriate Tools

Choose the right spacing tool for the right job:

// For simple vertical spacing between components, use Spacer
<View>
  <Text>First item</Text>
  <Spacer size={16} />
  <Text>Second item</Text>
</View>
 
// For consistent spacing between multiple items, consider Stack
<Stack spacing={16}>
  <Text>First item</Text>
  <Text>Second item</Text>
  <Text>Third item</Text>
</Stack>
 
// For inset padding, use container padding
<View className="p-4">
  <Text>Content with padding around it</Text>
</View>

Implementation Details

The Spacer component uses React Native's View component with a specified width or height based on the orientation. For vertical spacers, it creates empty vertical space with the specified height. For horizontal spacers, it creates empty horizontal space with the specified width.

The component is intended to be placed between UI elements to create consistent spacing without adding margin or padding directly to the elements themselves.

Notes

Spacer is primarily used for creating "gaps" between elements
The component doesn't render any visible content, just empty space
For consistent spacing between multiple items in a row or column, consider using the Stack component instead
The Spacer size is measured in logical pixels rather than in a responsive unit
Using Spacer can help create more readable layout code compared to specifying margins directly

Spacer

On this page