Modifiers

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

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>
  );
}

Padding

Control the spacing around a component's content.

paddingAll(all)

Applies equal padding on all four sides.

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.

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.

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.

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.

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

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

fillMaxHeight(fraction?)

Fills available height.

width(value)

Sets an exact width.

height(value)

Sets an exact height.

wrapContentWidth(alignment?)

Sizes the component to wrap its content width.

wrapContentHeight(alignment?)

Sizes the component to wrap its content height.

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.

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.

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

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

border(borderWidth, borderColor)

Adds a border around the component.

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.

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.

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.

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.

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.

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

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

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.

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

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

zIndex(index)

Controls the drawing order of overlapping components.

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.

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.

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.

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.

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.

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.

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.

Available shapes

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.

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

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

API

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

Constants

clip(Shapes.Circle)
clip(Shapes.RoundedCorner(16))
clip(Shapes.RoundedCorner({ topStart: 8, bottomEnd: 16 }))
clip(Shapes.Material.Heart)

Methods

Event Subscriptions

Interfaces

Types