React Native

Smooth text morphing
for React Native

Character-level FLIP animations powered by Reanimated. Each character finds its way to the right place.

Get started

MIT License Reanimated 3+ ~3KB

Live Demo

Playground

Duration 400ms

Scale on

Get started

Drop in alongside your existing Reanimated setup.

      Install
      npm install morph-text-native
    

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

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

      Toast
      // Text morphs between messages instead of stacking toasts
<Animated.View entering={SlideInDown.duration(300)}>
  <AnimatedIcon type={type} />
  <MorphText
    style={{ fontSize: 16, color: theme.text }}
    duration={300}
  >
    {message}
  </MorphText>
</Animated.View>
    

How it works

The same FLIP algorithm behind torph, adapted for React Native.

Segment — text is split into characters, each assigned a stable ID. First a gets id "a", second gets "a-5".

Diff — old and new character sets are compared by ID to find persisting, entering, and exiting characters.

FLIP — persisting characters animate from their old position to their new position using transforms.

Enter/Exit — new characters fade in from a neighbor's old position. Removed characters fade out fast at their last known position.

API

All props are optional except children.

Prop	Type	Default	Description
children	string	—	Text to display and morph between
style	TextStyle	—	Style for each character
containerStyle	ViewStyle	—	Style for the outer container
duration	number	400	Animation duration in ms
ease	EasingFunction	bezier(0.19, 1, 0.22, 1)	Reanimated easing function
scale	boolean	true	Scale entering characters from 0.95
onAnimationStart	() => void	—	Fires when animation starts
onAnimationComplete	() => void	—	Fires when animation ends

Smooth text morphingfor React Native

Smooth text morphing
for React Native