Spacer

Component to add spacing between elements.
Supports horizontal and vertical spacing, with optional background color for visibility.

Usage

Awesome UI

Blossom UI

function SpacerUsage() {
  return (
    <View>
      <Text>Awesome UI</Text>
      <Spacer height={20} />
      <Text>Blossom UI</Text>
    </View>
  )
}

Vertical

Use the width & height prop in conjunction to have the vertical look.

Hello

World

function SpacerVertical() {
  return (
    <View row>
      <Text>Hello</Text>
      <Spacer width={100} height={50} />
      <Text>World</Text>
    </View>
  )
}

On Background

Space has the transparent background so it does takes the parent background color.

Awesome UI

Blossom UI

function SpacerOnBackground() {
  return (
    <View style={{backgroundColor: 'gray'}}>
      <Text>Awesome UI</Text>
      <Spacer height={20} />
      <Text>Blossom UI</Text>
    </View>
  )
}

Props

Prop	Data Type	Default Value	Description
Extends	RNViewProps	--	Inherits properties from RNViewProps
width	number	--	Width of the spacer
height	number	--	Height of the spacer