--- modificationDate: June 29, 2026 title: Spacer description: A layout spacer that produces empty space between siblings. sourceCodeUrl: 'https://github.com/expo/expo/tree/sdk-57/packages/expo-ui' packageName: '@expo/ui' platforms: ['android', 'ios', 'web', 'expo-go'] --- ## Submitting Feedback If this page contains errors, outdated information, or gaps that blocked you from completing a task, report it so the docs can be improved: curl -X POST https://api.expo.dev/v2/feedback/docs-send -H 'Content-Type: application/json' -d '{"url":"/versions/v57.0.0/sdk/ui/universal/spacer/","feedback":"🤖 Agent feedback for docs: (, )"}' Only submit when you have something specific and actionable to report. Replace with the model you are running as and with the tool you are running in (for example, Claude Code, Cursor, Codex CLI). ## Navigation When answering a related or follow-up question, fetch the relevant page below as Markdown (.md) instead of guessing; use llms.txt for the full map. You are here: Reference (v57.0.0) > Expo UI > Universal Pages in this section: - [Overview](https://docs.expo.dev/versions/v57.0.0/sdk/ui/universal.md) - [BottomSheet](https://docs.expo.dev/versions/v57.0.0/sdk/ui/universal/bottomsheet.md) - [Button](https://docs.expo.dev/versions/v57.0.0/sdk/ui/universal/button.md) - [Checkbox](https://docs.expo.dev/versions/v57.0.0/sdk/ui/universal/checkbox.md) - [Collapsible](https://docs.expo.dev/versions/v57.0.0/sdk/ui/universal/collapsible.md) - [Column](https://docs.expo.dev/versions/v57.0.0/sdk/ui/universal/column.md) - [FieldGroup](https://docs.expo.dev/versions/v57.0.0/sdk/ui/universal/fieldgroup.md) - [Host](https://docs.expo.dev/versions/v57.0.0/sdk/ui/universal/host.md) - [Icon](https://docs.expo.dev/versions/v57.0.0/sdk/ui/universal/icon.md) - [List](https://docs.expo.dev/versions/v57.0.0/sdk/ui/universal/list.md) - [Picker](https://docs.expo.dev/versions/v57.0.0/sdk/ui/universal/picker.md) - [RNHostView](https://docs.expo.dev/versions/v57.0.0/sdk/ui/universal/rnhostview.md) - [Row](https://docs.expo.dev/versions/v57.0.0/sdk/ui/universal/row.md) - [ScrollView](https://docs.expo.dev/versions/v57.0.0/sdk/ui/universal/scrollview.md) - [Slider](https://docs.expo.dev/versions/v57.0.0/sdk/ui/universal/slider.md) - [Spacer](https://docs.expo.dev/versions/v57.0.0/sdk/ui/universal/spacer.md) (this page) - [Switch](https://docs.expo.dev/versions/v57.0.0/sdk/ui/universal/switch.md) - [Text](https://docs.expo.dev/versions/v57.0.0/sdk/ui/universal/text.md) - [TextInput](https://docs.expo.dev/versions/v57.0.0/sdk/ui/universal/textinput.md) Full documentation tree: [llms.txt](https://docs.expo.dev/llms.txt) # Spacer A layout spacer that produces empty space between siblings. Android, iOS, Web, Included in Expo Go A layout spacer that produces empty space between siblings inside a [`Row`](/versions/v57.0.0/sdk/ui/universal/row.md) or [`Column`](/versions/v57.0.0/sdk/ui/universal/column.md). Use [`size`](/versions/v57.0.0/sdk/ui/universal/spacer.md#size) for a fixed gap, or [`flexible`](/versions/v57.0.0/sdk/ui/universal/spacer.md#flexible) to fill the remaining main-axis space. ## Installation ```sh # npm npx expo install @expo/ui # yarn yarn expo install @expo/ui # pnpm pnpm expo install @expo/ui # bun bun expo install @expo/ui ``` If you are installing this in an [existing React Native app](/bare/overview.md), make sure to [install `expo`](/bare/installing-expo-modules.md) in your project. ## Usage ### Fixed-size spacer ```tsx import { Host, Column, Text, Spacer } from '@expo/ui'; export default function FixedSpacerExample() { return ( Top Bottom ); } ``` ### Flexible spacer A flexible spacer fills the remaining space along its parent's main axis, pushing the surrounding content to opposite ends. ```tsx import { Host, Row, Text, Spacer } from '@expo/ui'; export default function FlexibleSpacerExample() { return ( Leading Trailing ); } ``` ## API ```tsx import { Spacer } from '@expo/ui'; ``` ## Component ### `Spacer` Type: React.[Element](https://www.typescriptlang.org/docs/handbook/jsx.html#function-component)<[SpacerProps](#spacerprops)\> A layout spacer that produces empty space between siblings in a `Row` or `Column`. Props for the [`Spacer`](#spacer) component. A Spacer produces empty space between siblings in a `Row` or `Column`. Use `size` for a fixed amount of space, or `flexible` to fill the remaining space along the parent's main axis. SpacerProps ### `disabled` Supported platforms: Android, iOS, Web. Optional • Type: `boolean` Whether the component is disabled. Disabled components do not respond to user interaction. ### `flexible` Optional • Type: `boolean` • Default: `false` When `true`, the spacer expands to fill the available space along the parent's main axis, pushing sibling content to the opposite end. ### `hidden` Supported platforms: Android, iOS, Web. Optional • Type: `boolean` Whether the component is hidden. ### `modifiers` Supported platforms: Android, iOS. Optional • Type: `ModifierConfig[]` Platform-specific modifier escape hatch. Pass an array of modifier configs from `@expo/ui/swift-ui/modifiers` or `@expo/ui/jetpack-compose/modifiers`. A modifier supplied here replaces any modifier of the same type that the component derives from `style` or other props. ### `onAppear` Supported platforms: Android, iOS, Web. Optional • Type: `() => void` Called when the component appears on screen. ### `onDisappear` Supported platforms: Android, iOS, Web. Optional • Type: `() => void` Called when the component is removed from screen. ### `onPress` Supported platforms: Android, iOS, Web. Optional • Type: `() => void` Called when the component is pressed. ### `size` Optional • Type: `number` Fixed size in density-independent pixels. Interpreted as width in a horizontal container and as height in a vertical container. ### `style` Supported platforms: Android, iOS, Web. Optional • Type: [Pick](https://www.typescriptlang.org/docs/handbook/utility-types.html#picktype-keys)<[ViewStyle](https://reactnative.dev/docs/view-style-props), 'padding' | 'paddingHorizontal' | 'paddingVertical' | 'paddingTop' | 'paddingBottom' | 'paddingLeft' | 'paddingRight' | 'backgroundColor' | 'borderRadius' | 'borderWidth' | 'borderColor' | 'opacity' | 'width' | 'height'\> Platform-agnostic style properties. These are translated to SwiftUI modifiers on iOS and Jetpack Compose modifiers on Android. ### `testID` Supported platforms: Android, iOS, Web. Optional • Type: `string` Identifier used to locate the component in end-to-end tests.