PressableScale — React Native component

Installation

Install just this component (copies the source into your project, no npm dependency)

npx orn-ui add pressable-scale

Or install the whole package and import it

pnpm add orn-ui
import { PressableScale } from 'orn-ui/pressable-scale';

Depends on:core (theme + icons)

Usage

when to use — Giving press feedback to something that is not a Button: a card, a tile, a row.
scaleTo — `0.96` by default — noticeable without being distracting. Lower values suit small targets.
children — Also accepts a render prop that receives whether it is pressed, to restyle the content while held.

Demo clip not recorded yet — see MEDIA.md

Variants

Default (0.96)

<PressableScale onPress={() => {}}>
  <Card>
    <Body>Press me — I scale down.</Body>
  </Card>
</PressableScale>

scaleTo=0.85

<PressableScale onPress={() => {}} scaleTo={0.85}>
  <Card>
    <Body>A bigger squeeze on press.</Body>
  </Card>
</PressableScale>

Full demo source

const variants: VariantDef[] = [
  {
    label: 'Default (0.96)',
    content: (
      <PressableScale onPress={() => {}}>
        <Card>
          <Body>Press me — I scale down.</Body>
        </Card>
      </PressableScale>
    ),
  },
  {
    label: 'scaleTo=0.85',
    content: (
      <PressableScale onPress={() => {}} scaleTo={0.85}>
        <Card>
          <Body>A bigger squeeze on press.</Body>
        </Card>
      </PressableScale>
    ),
  },
];
return <VariantList variants={variants} />;

Props

Name	Type	Default	Description
`scaleTo?`	`number`	0.96	Target scale while pressed.
`style?`	`StyleProp<ViewStyle>`	—	—
`children`	`ReactNode`	—	Either children or a render prop that receives a boolean reflecting whether the component is currently pressed.