TouchableRipple

Glowup

FOUNDATIONS · 10 / 89

TouchableRipple

TouchableRipple — a Material You foundations component for React Native and web.

󱀫

packages/ui/src/components/TouchableRipple.tsx

Live demo

󰄜

360

󰓶

720

󰍹

Full

Hover or press this surface

Properties

3 controls

Borderless

Border radius

Disabled

Usage

TouchableRipple.tsx

Variants

The states and shapes this component is meant to be used in.

State layer

Hover and press — 8% / 12% of the “on” role over the surface

Tappable surface

The layer is derived from the theme, never a hardcoded overlay

Borderless

borderless — tints the child without painting a container

No container background

As list rows

Email digest

Mentions

Product updates

Disabled

Disabled — no state layer

API reference

Generated from the library's TypeScript, so it cannot drift from the implementation.

Props

6 on TouchableRippleProps

Also accepts everything from Omit< PressableProps, "style" | "children" >.

children

required

React.ReactNode

borderless

boolean

default: false

Skip the container background so the layer only tints the child.

borderRadius

number

Matches the parent's corner radius so the layer doesn't bleed out.

rippleColor

string

Colour of the state layer itself — the M3 "on" role of the surface. Defaults to `onSurface`.

style

StyleProp<ViewStyle>

underlayColor

string

Surface the state layer is drawn over. Defaults to `surface`.