PressableScale — componente React Native

Instalación

Instala solo este componente (copia el código fuente a tu proyecto, sin dependencia npm)

npx orn-ui add pressable-scale

O instala el paquete completo e impórtalo

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

Depende de:core (theme + icons)

Uso

cuándo usarlo — Dar feedback de presión a algo que no es un Button: una card, un tile, una fila.
scaleTo — `0.96` por defecto — se nota sin distraer. Los valores más bajos van mejor en targets chicos.
children — También acepta una render prop que recibe si está presionado, para cambiar el contenido mientras se mantiene.

Clip del demo todavía sin grabar — ver MEDIA.md

Variantes

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>

Código completo del demo

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

Nombre	Tipo	Por defecto	Descripción
`scaleTo?`	`number`	0.96	Escala objetivo al presionar.
`style?`	`StyleProp<ViewStyle>`	—	—
`children`	`ReactNode`	—	Los children, o una render prop que recibe un booleano indicando si el componente está presionado.