This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.
Modifiers
Jetpack Compose layout modifiers for @expo/ui components.
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>;
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>;
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>;
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
Type: {
Circle: BuiltinShape,
CutCorner: (params: number | CornerRadii) => BuiltinShape,
Material: {
Arch: BuiltinShape,
Boom: BuiltinShape,
Bun: BuiltinShape,
Clover4Leaf: BuiltinShape,
Clover8Leaf: BuiltinShape,
Cookie12Sided: BuiltinShape,
Cookie4Sided: BuiltinShape,
Cookie6Sided: BuiltinShape,
Cookie7Sided: BuiltinShape,
Cookie9Sided: BuiltinShape,
Diamond: BuiltinShape,
Fan: BuiltinShape,
Ghostish: BuiltinShape,
Heart: BuiltinShape,
Oval: BuiltinShape,
Pentagon: BuiltinShape,
Pill: BuiltinShape,
PixelCircle: BuiltinShape,
PixelTriangle: BuiltinShape,
Puffy: BuiltinShape,
PuffyDiamond: BuiltinShape,
Slanted: BuiltinShape,
SoftBurst: BuiltinShape,
Sunny: BuiltinShape,
Triangle: BuiltinShape,
VerySunny: BuiltinShape
},
Rectangle: BuiltinShape,
RoundedCorner: (params: number | CornerRadii) => BuiltinShape
}
Predefined shapes for use with the clip modifier.
Example
clip(Shapes.Circle) clip(Shapes.RoundedCorner(16)) clip(Shapes.RoundedCorner({ topStart: 8, bottomEnd: 16 })) clip(Shapes.Material.Heart)
Methods
Animates size changes with spring animation.
ModifierConfigSets the background color.
Pass an animationSpec to smoothly animate between colors when the prop changes (backed by animateColorAsState).
ModifierConfigMakes the view respond to both click and long-click gestures.
Wraps Compose's Modifier.combinedClickable. Useful for triggering a DropdownMenu
on long-press while keeping a separate short-press action.
ModifierConfigFactory function to create modifier configuration objects.
ModifierConfigConstrain the size of the wrapped layout only when it would be
otherwise unconstrained: the minWidth and minHeight constraints
are only applied when the incoming corresponding constraint is 0.
ModifierConfigDraws a shadow behind the view with control over the blur radius, spread, offset, and color. Unlike
shadow, it does not require an elevation value.
ModifierConfigApplies a graphics layer transformation with animation support.
ModifierConfigMakes the view horizontally scrollable.
Wraps Modifier.horizontalScroll(rememberScrollState()).
Use on a Row to create a non-lazy scrollable container.
ModifierConfigAdds padding to avoid the software keyboard (IME). When the keyboard is visible, padding is added to keep content above it.
ModifierConfigDraws a shadow inside the view to create an inset effect. The view's background must come before
this modifier for the shadow to render.
ModifierConfig{
$type: 'keyframes',
delayMillis: number,
durationMillis: number,
keyframes: Record<number, number>
}Makes the view match the parent Box size. Only works when used inside Box.
ModifierConfigMarks a composable as the anchor for an ExposedDropdownMenuBox.
Only works when used inside ExposedDropdownMenuBox.
ModifierConfigCalls the handler whenever the composable is positioned, with its position and size.
x and y are relative to the window. All values are in dp.
ModifierConfigCalls the handler whenever the composable's measured size changes. Sizes are in dp.
ModifierConfigCalls the handler when the composable's visibility changes (for example, enters or leaves the viewport in a lazy list).
ModifierConfigApplies padding with individual values for each side.
ModifierConfigMakes the view selectable, like a radio button row.
ModifierConfigMarks a column/row as a selectable group for accessibility. Screen readers will treat the children as a group of selectable items.
ModifierConfigApplies semantic properties. Wraps Modifier.semantics { ... }.
ModifierConfig{
$type: 'spring',
dampingRatio: number,
stiffness: number,
visibilityThreshold: number
}Makes the view toggleable with accessibility semantics. Use this to make a row containing a checkbox or switch tappable as a whole.
ModifierConfig{
$type: 'tween',
delayMillis: number,
durationMillis: number,
easing: 'linear' | 'ease' | 'fastOutSlowIn' | 'fastOutLinearIn' | 'linearOutSlowIn'
}Makes the view vertically scrollable.
Wraps Modifier.verticalScroll(rememberScrollState()).
Use on a Column to create a non-lazy scrollable container.
ModifierConfigSets the weight for flexible sizing in Row or Column. Only works when used inside Row or Column.
ModifierConfigEvent subscriptions
Creates a modifier with an event listener.
ModifierConfigInterfaces
Modifier configuration for native views. This is the JSON Config pattern used by both iOS (SwiftUI) and Android (Jetpack Compose).
Types
Literal type: string
Acceptable values are: 'topStart' | 'topCenter' | 'topEnd' | 'centerStart' | 'center' | 'centerEnd' | 'bottomStart' | 'bottomCenter' | 'bottomEnd' | 'top' | 'centerVertically' | 'bottom' | 'start' | 'centerHorizontally' | 'end'
Built-in Jetpack Compose shape for the clip modifier.
Type: object shaped as below:
Or object shaped as below:
Or object shaped as below:
Or object shaped as below:
Or object shaped as below:
Deprecated: Use ModifierConfig instead. ExpoModifier (SharedRef pattern) has been replaced with JSON Config pattern for better DX and platform consistency.
Type: ModifierConfig