# Morph Text — Per-Character Text Transitions & Rolling Numbers for React Native & Expo

> Text that changes beautifully in React Native: shared letters glide to their new places, removed ones leave and new ones rise in, never overlapping. Odometer numbers formatted by Intl, and a button that morphs through loading, success and error. Persian and Arabic stay joined.

- Kind: Mobile component (Text Effects)
- Price: Free
- License: MIT License. Do anything with it, keeping the copyright notice.
- Developer: UpFork
- Tags: text, button, react-native, expo, reanimated, text-animation, number-ticker, odometer
- npm packages: expo-haptics, react-native-reanimated, react-native-svg, react-native-worklets
- Published: 2026-10-14
- Updated: 2026-10-14
- Page: https://upfork.dev/products/morph-text-react-native

## How to get it

It's a React Native component for Expo apps (Expo SDK 57), not a shadcn item: copy its folders into the app's root from its ZIP (Download source on its page) or through UpFork's MCP server (install_product), then install its packages with Expo:

```bash
npx expo install expo-haptics react-native-reanimated react-native-svg react-native-worklets
```

It's free and in no plan: an AI assistant installs it through MCP with no account, and its ZIP downloads with a free UpFork account.

Step by step, with the App.tsx that shows it and Skia's web setup: https://upfork.dev/docs/mobile.

## About

Morph Text is the detail that makes an app feel expensive: labels, numbers and buttons that change in place instead of blinking.

- **MorphText.** "Follow" becomes "Following" by keeping "Follow" and bringing in "ing". Letters both strings share glide to their new places, removed ones shrink and fade, new ones rise in with a stagger, and the width springs to fit. An arrival waits for its spot to clear, so no letter is ever drawn over another, in any frame.
- **Every script.** Emoji, flags and accents move as one piece. Persian, Arabic and the Indic scripts move by word, so joined letters keep their shapes; right-to-left text is laid out right to left.
- **MorphNumber.** An odometer for prices, counters and balances: each digit rolls by its place, "999" becomes "1,000" with "1," sliding in, and Intl formats currency, percent, compact and decimals. Optional green and red trend flashes.
- **MorphButton.** Return a promise from onPress and the pill shrinks around a spinner, then draws a check with its success label, or shakes with an error, and goes back by itself. Solid, tinted and outline; accent, neutral and danger; three sizes; haptics.
- **Calm and accessible.** One readable label for screen readers, announcements on change, reduced motion respected, light and dark, every label at 4.5:1 or better.

Three complete demos: a creator's profile and shop with follow, subscribe, add to bag and a swap card; a live portfolio with ticking prices; and one greeting in five languages.