morph-text-native

Smooth, character-level text morphing for React Native. Powered by Reanimated and inspired by torph.

When the text changes, each character animates independently, persisting characters slide to new positions, exiting characters fade out, and entering characters fade in.

Live demo

Requirements

• React >= 18
• React Native >= 0.70
• react-native-reanimated >= 3 (installation guide)

Install

npm install morph-text-native

Usage

import { MorphText } from 'morph-text-native';

function StatusLabel({ text }) {
  return (
    <MorphText
      style={{ fontSize: 16, fontWeight: '600', color: '#fff' }}
      duration={400}
    >
      {text}
    </MorphText>
  );
}

Pass any string as children. When it changes, characters morph smoothly between the old and new text.

Toast example

A single toast component that morphs its message instead of stacking multiple toasts:

import { MorphText } from 'morph-text-native';
import Animated, { SlideInDown, SlideOutDown } from 'react-native-reanimated';

function Toast({ message, type }) {
  return (
    <Animated.View
      entering={SlideInDown.duration(300)}
      exiting={SlideOutDown.duration(200)}
      style={styles.toast}
    >
      <Icon type={type} />
      <MorphText
        style={{ fontSize: 16, fontWeight: '600', color: '#fff' }}
        duration={300}
      >
        {message}
      </MorphText>
    </Animated.View>
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | children | string | required | Text to display and morph between | | style | TextStyle | — | Style applied to each character's <Text> | | containerStyle | ViewStyle | — | Style applied to the outer wrapping <View> | | duration | number | 400 | Animation duration in ms | | ease | EasingFunction | Easing.bezier(0.19, 1, 0.22, 1) | Reanimated easing function | | scale | boolean | true | Whether entering/exiting characters scale | | onAnimationStart | () => void | — | Called when the morph animation begins | | onAnimationComplete | () => void | — | Called when the morph animation finishes |

License

MIT