This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 57).

Modifiers

Jetpack Compose layout modifiers for @expo/ui components.

Android

Included in Expo Go

Jetpack Compose modifiers allow you to customize the layout, appearance, and behavior of UI components. Modifiers are the Compose equivalent of style properties — they control sizing, padding, backgrounds, interactions, and more.

Installation

Terminal

- npx expo install @expo/ui

- yarn expo install @expo/ui

- pnpm expo install @expo/ui

- bun expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

Usage

Modifiers are applied to components using the modifiers prop with an array syntax. You can combine multiple modifiers to create complex styling and behavior. Modifiers are applied in the order they appear in the array, which can affect the final result (for example, applying padding before background produces different results than the reverse).

import { Button, Host } from '@expo/ui/jetpack-compose';
import {
  paddingAll,
  fillMaxWidth,
  background,
  border,
  shadow,
  clickable,
} from '@expo/ui/jetpack-compose/modifiers';

function ModifiersExample() {
  return (
    <Host style={{ flex: 1 }}>
      {/* Basic styling modifiers */}
      <Button
        modifiers={[
          paddingAll(16),
          fillMaxWidth(),
          background('#FF6B6B'),
        ]}>
        Full-width padded button
      </Button>

      {/* Complex combination with border and shadow */}
      <Button
        modifiers={[
          paddingAll(12),
          background('#4ECDC4'),
          border(2, '#2C3E50'),
          shadow(4),
        ]}>
        Styled with border and shadow
      </Button>
    </Host>
  );
}

You can also create custom modifiers that work with any Expo UI component. See the Custom Jetpack Compose components guide for details.

Padding

Control the spacing around a component's content.

`paddingAll(all)`

Applies equal padding on all four sides.

Parameter	Type	Description
`all`	`number`	Padding value in dp.

import { paddingAll } from '@expo/ui/jetpack-compose/modifiers';

<Button modifiers={[paddingAll(16)]}>Padded button</Button>;

`padding(start, top, end, bottom)`

Applies individual padding to each side.

Parameter	Type	Description
`start`	`number`	Left/start padding in dp.
`top`	`number`	Top padding in dp.
`end`	`number`	Right/end padding in dp.
`bottom`	`number`	Bottom padding in dp.

import { padding } from '@expo/ui/jetpack-compose/modifiers';

<Button modifiers={[padding(16, 8, 16, 8)]}>Custom padding</Button>;

Size

Control the dimensions of a component.

`size(width, height)`

Sets exact dimensions for the component.

Parameter	Type	Description
`width`	`number`	Width in dp.
`height`	`number`	Height in dp.

import { size } from '@expo/ui/jetpack-compose/modifiers';

<Button modifiers={[size(200, 48)]}>Fixed size</Button>;

`fillMaxSize(fraction?)`

Fills all available space in both dimensions.

Parameter	Type	Description
`fraction`	`number`	Fraction of available space (0.0–1.0). Default `1.0`.

import { fillMaxSize } from '@expo/ui/jetpack-compose/modifiers';

<Button modifiers={[fillMaxSize()]}>Fill all space</Button>
<Button modifiers={[fillMaxSize(0.5)]}>Fill half</Button>

`fillMaxWidth(fraction?)`

Fills available width.

Parameter	Type	Description
`fraction`	`number`	Fraction of available width (0.0–1.0). Default `1.0`.

import { fillMaxWidth } from '@expo/ui/jetpack-compose/modifiers';

<Button modifiers={[fillMaxWidth()]}>Full width</Button>;

`fillMaxHeight(fraction?)`

Fills available height.

Parameter	Type	Description
`fraction`	`number`	Fraction of available height (0.0–1.0). Default `1.0`.

`width(value)`

Sets an exact width, or the minimum or maximum intrinsic width of the content. The incoming constraints can still make the view narrower or wider than that width.

Parameter	Type	Description
`value`	`number \| IntrinsicSize`	Width in dp, or an `IntrinsicSize`. `IntrinsicSize.Min` uses the minimum intrinsic width, the smallest width at which the content still draws correctly (for a text, its widest word). `IntrinsicSize.Max` uses the maximum intrinsic width, the width the content needs when nothing limits it (for a text, a single line).

One case is a Host with matchContents: the available width has no limit, so children with weight in a Row get no space. In the following example, width(IntrinsicSize.Max) gives the Row the width its content needs, fillMaxWidth() before it keeps the row filling a bounded width, and weight(1) gives the label the space left next to the switch:

import { Host, Row, Switch, Text } from '@expo/ui/jetpack-compose';
import {
  fillMaxWidth,
  IntrinsicSize,
  weight,
  width,
} from '@expo/ui/jetpack-compose/modifiers';

<Host matchContents>
  <Row modifiers={[fillMaxWidth(), width(IntrinsicSize.Max)]}>
    <Text modifiers={[weight(1)]}>Errors only</Text>
    <Switch value={checked} onCheckedChange={setChecked} />
  </Row>
</Host>;

`height(value)`

Sets an exact height.

Parameter	Type	Description
`value`	`number`	Height in dp.

`wrapContentWidth(alignment?)`

Sizes the component to wrap its content width.

Parameter	Type	Description
`alignment`	`string`	Horizontal alignment of the content.

`wrapContentHeight(alignment?)`

Sizes the component to wrap its content height.

Parameter	Type	Description
`alignment`	`string`	Vertical alignment of the content.

Position

Control the position of a component relative to its natural placement.

`offset(x, y)`

Offsets the component from its natural position without affecting the layout of surrounding components.

Parameter	Type	Description
`x`	`number`	Horizontal offset in dp.
`y`	`number`	Vertical offset in dp.

import { offset } from '@expo/ui/jetpack-compose/modifiers';

<Button modifiers={[offset(10, 5)]}>Offset button</Button>;

Appearance

Control the visual appearance of a component.

`background(color)`

Sets the background color.

Parameter	Type	Description
`color`	`string`	Background color (hex string).

import { background } from '@expo/ui/jetpack-compose/modifiers';

<Button modifiers={[background('#3498DB')]}>
  Blue background
</Button>;

`border(borderWidth, borderColor)`

Adds a border around the component.

Parameter	Type	Description
`borderWidth`	`number`	Border width in dp.
`borderColor`	`string`	Border color (hex string).

import { border } from '@expo/ui/jetpack-compose/modifiers';

<Button modifiers={[border(2, '#E74C3C')]}>Bordered button</Button>;

`shadow(elevation)`

Adds an elevation shadow beneath the component.

Parameter	Type	Description
`elevation`	`number`	Shadow elevation in dp.

import { shadow } from '@expo/ui/jetpack-compose/modifiers';

<Button modifiers={[shadow(8)]}>Elevated button</Button>;

`dropShadow(shape, config?)`

Draws a shadow behind the component with control over the blur radius, spread, offset, and color. Unlike shadow, it does not require an elevation value.

Parameter	Type	Description
`shape`	`Shape`	The shape of the shadow (see the shapes table below).
`config.radius`	`number`	Blur radius in dp.
`config.spread`	`number`	Amount to expand (positive) or contract (negative) in dp.
`config.color`	`string`	Shadow color (hex string). Defaults to black.
`config.offsetX`	`number`	Horizontal offset in dp.
`config.offsetY`	`number`	Vertical offset in dp.
`config.alpha`	`number`	Shadow opacity (0.0–1.0).

import {
  dropShadow,
  Shapes,
} from '@expo/ui/jetpack-compose/modifiers';

<Button
  modifiers={[
    dropShadow(Shapes.RoundedCorner(24), {
      radius: 16,
      spread: 4,
      color: '#6200EE',
      offsetY: 8,
    }),
  ]}>
  Drop shadow
</Button>;

`innerShadow(shape, config?)`

Draws a shadow inside the component to create an inset effect. Apply the background modifier before innerShadow so the shadow renders.

Parameter	Type	Description
`shape`	`Shape`	The shape of the shadow (see the shapes table below).
`config.radius`	`number`	Blur radius in dp.
`config.spread`	`number`	Amount to expand (positive) or contract (negative) in dp.
`config.color`	`string`	Shadow color (hex string). Defaults to black.
`config.offsetX`	`number`	Horizontal offset in dp.
`config.offsetY`	`number`	Vertical offset in dp.
`config.alpha`	`number`	Shadow opacity (0.0–1.0).

import {
  innerShadow,
  background,
  Shapes,
} from '@expo/ui/jetpack-compose/modifiers';

<Button
  modifiers={[
    background('#FFFFFF'),
    innerShadow(Shapes.RoundedCorner(24), {
      radius: 16,
      spread: 2,
      offsetY: 6,
    }),
  ]}>
  Inner shadow
</Button>;

`alpha(alpha)`

Controls the opacity of the component.

Parameter	Type	Description
`alpha`	`number`	Opacity value (0.0–1.0).

import { alpha } from '@expo/ui/jetpack-compose/modifiers';

<Button modifiers={[alpha(0.5)]}>Semi-transparent</Button>;

`blur(radius)`

Applies a blur effect to the component.

Parameter	Type	Description
`radius`	`number`	Blur radius in dp.

import { blur } from '@expo/ui/jetpack-compose/modifiers';

<Button modifiers={[blur(4)]}>Blurred button</Button>;

`cornerRadius(radius)`

Adds rounded corners to the component.

Works only inside Android widgets built with expo-widgets, on Android 12 (API level 31) and later.

Jetpack Compose has no exact equivalent of Glance's cornerRadius, so Expo UI ignores this modifier. Use clip(Shapes.RoundedCorner(radius)) to round corners in an app.

Parameter	Type	Description
`radius`	`number`	Corner radius in dp.

import {
  background,
  cornerRadius,
} from '@expo/ui/jetpack-compose/modifiers';

<Box modifiers={[cornerRadius(12), background('#3498DB')]} />;

Shadow recipes

Common shadow styles are combinations of the dropShadow and innerShadow modifiers rather than separate APIs. Because the modifiers prop takes an array, you stack and tune the shadow modifiers to build each style.

Neobrutalist shadow

A neobrutalist shadow is a hard-edged drop shadow with no blur and a thick border. Set radius and spread to 0, then offset the shadow.

import {
  dropShadow,
  border,
  background,
  Shapes,
} from '@expo/ui/jetpack-compose/modifiers';

<Box
  modifiers={[
    dropShadow(Shapes.Rectangle, {
      radius: 0,
      spread: 0,
      offsetX: 8,
      offsetY: 8,
      color: '#000000',
    }),
    border(8, '#000000'),
    background('#FFFFFF'),
  ]}
/>;

Neumorphic shadow

A neumorphic shadow layers two drop shadows on a surface that shares its background color: a light shadow toward the light source and a darker shadow on the opposite side. Apply both before the background.

import {
  dropShadow,
  background,
  Shapes,
} from '@expo/ui/jetpack-compose/modifiers';

const shape = Shapes.RoundedCorner(24);

<Box
  modifiers={[
    dropShadow(shape, {
      radius: 15,
      offsetX: -10,
      offsetY: -10,
      color: '#FFFFFF',
    }),
    dropShadow(shape, {
      radius: 15,
      offsetX: 10,
      offsetY: 10,
      color: '#B1B1B1',
    }),
    background('#E0E0E0'),
  ]}
/>;

To create the pressed, recessed variant, use two innerShadow modifiers instead and place them after the background.

Transform

Apply visual transformations to a component.

`rotate(degrees)`

Rotates the component.

Parameter	Type	Description
`degrees`	`number`	Rotation angle in degrees.

import { rotate } from '@expo/ui/jetpack-compose/modifiers';

<Button modifiers={[rotate(45)]}>Rotated</Button>;

`zIndex(index)`

Controls the drawing order of overlapping components.

Parameter	Type	Description
`index`	`number`	Layer index.

import { zIndex } from '@expo/ui/jetpack-compose/modifiers';

<Button modifiers={[zIndex(10)]}>On top</Button>;

Animation

Animate layout changes within a component.

`animateContentSize(dampingRatio?, stiffness?)`

Animates size changes of the component's content using a spring animation.

Parameter	Type	Description
`dampingRatio`	`number`	Spring damping ratio. Controls bounciness.
`stiffness`	`number`	Spring stiffness. Controls animation speed.

import { animateContentSize } from '@expo/ui/jetpack-compose/modifiers';

<Button modifiers={[animateContentSize()]}>Animated size</Button>
<Button modifiers={[animateContentSize(0.5, 200)]}>Custom spring</Button>

Layout

Control how a component is sized and positioned within its parent container.

`weight(weight)`

Assigns a flexible weight to a component inside a Row or Column, distributing available space proportionally among weighted children.

Parameter	Type	Description
`weight`	`number`	Weight factor.

import { weight } from '@expo/ui/jetpack-compose/modifiers';

// In a Row, the first button takes 2/3 and the second takes 1/3
<Button modifiers={[weight(2)]}>Wider</Button>
<Button modifiers={[weight(1)]}>Narrower</Button>

`align(alignment)`

Sets the alignment of the component within its parent container.

Parameter	Type	Description
`alignment`	`string`	Alignment within the container.

`matchParentSize()`

Sizes the component to match the size of its parent Box. Unlike fillMaxSize, this does not affect the parent's measurement.

import { matchParentSize } from '@expo/ui/jetpack-compose/modifiers';

<Button modifiers={[matchParentSize()]}>Match parent</Button>;

Interaction

Add user interaction handlers to a component.

`clickable(handler)`

Makes the component respond to click events.

Parameter	Type	Description
`handler`	`() => void`	Callback invoked on click.

import { clickable } from '@expo/ui/jetpack-compose/modifiers';

<Button modifiers={[clickable(() => console.log('Clicked!'))]}>
  Clickable
</Button>;

`combinedClickable(handlers, options?)`

Makes the component respond to both short-tap and long-press gestures. Wraps Compose's Modifier.combinedClickable. Useful for opening a DropdownMenu on long-press while keeping a separate short-tap action on the same view.

Parameter	Type	Description
`handlers.onClick`	`() => void`	Optional callback invoked on a short tap.
`handlers.onLongClick`	`() => void`	Optional callback invoked on a long press.
`options.indication`	`boolean`	Whether to show a ripple indication. Defaults to `true`.

import { Text } from '@expo/ui/jetpack-compose';
import { combinedClickable } from '@expo/ui/jetpack-compose/modifiers';

<Text
  modifiers={[
    combinedClickable({
      onClick: () => console.log('Tapped'),
      onLongClick: () => setMenuExpanded(true),
    }),
  ]}>
  Long-press me
</Text>;

`selectable(selected, handler)`

Makes the component selectable, similar to a radio button.

Parameter	Type	Description
`selected`	`boolean`	Whether the component is currently selected.
`handler`	`() => void`	Callback invoked when selection state changes.

import { selectable } from '@expo/ui/jetpack-compose/modifiers';

<Button
  modifiers={[
    selectable(isSelected, () => setIsSelected(!isSelected)),
  ]}>
  Selectable option
</Button>;

Clipping

Clip a component's content to a specific shape.

`clip(shape)`

Clips the component to the given shape. Content outside the shape boundary is not drawn.

Parameter	Type	Description
`shape`	`Shape`	The shape to clip to.

Available shapes

Shape	Description
`Shapes.Rectangle`	A rectangle with no rounded corners.
`Shapes.Circle`	A perfect circle.
`Shapes.RoundedCorner(radius)`	A rectangle with uniform rounded corners. Pass a `number` for equal radius or an object `{ topStart, topEnd, bottomStart, bottomEnd }` for individual corner radii.
`Shapes.CutCorner(radius)`	A rectangle with cut (chamfered) corners. Accepts the same radius options as `RoundedCorner`.
`Shapes.Material.Cookie4Sided`	Material Design cookie shape with 4 sides.
`Shapes.Material.Cookie6Sided`	Material Design cookie shape with 6 sides.

import { clip } from '@expo/ui/jetpack-compose/modifiers';
import { Shapes } from '@expo/ui/jetpack-compose/modifiers';

// Circular clipping
<Button modifiers={[clip(Shapes.Circle)]}>Circle</Button>

// Rounded corners with uniform radius
<Button modifiers={[clip(Shapes.RoundedCorner(12))]}>Rounded</Button>

// Rounded corners with individual radii
<Button
  modifiers={[
    clip(Shapes.RoundedCorner({ topStart: 16, topEnd: 16, bottomStart: 0, bottomEnd: 0 })),
  ]}>
  Top rounded only
</Button>

// Cut corners
<Button modifiers={[clip(Shapes.CutCorner(8))]}>Cut corners</Button>

Utility

`testID(tag)`

Assigns a test identifier to the component for use in UI testing.

Parameter	Type	Description
`tag`	`string`	The test ID.

import { testID } from '@expo/ui/jetpack-compose/modifiers';

<Button modifiers={[testID('submit-button')]}>Submit</Button>;

`semantics(params)`

Sets semantic properties that accessibility and autofill services read.

Parameter	Type	Description
`params.contentDescription`	`string`	What TalkBack announces for the element, in place of content that does not read well aloud.
`params.contentType`	`string`	An autofill hint, such as `'email'` or `'password'`.

import { semantics } from '@expo/ui/jetpack-compose/modifiers';

// The visible label is an abbreviation; TalkBack reads the full phrase.
<Text modifiers={[semantics({ contentDescription: '1 week' })]}>
  1W
</Text>;

API

import { paddingAll, padding, size, fillMaxWidth, background, clickable, clip, Shapes } from '@expo/ui/jetpack-compose/modifiers';

No API data file found, sorry!