typewriter4react-native

typewriter4react-native

Customizable typewriter-style text animation component for [React Native].

Built for smooth, lightweight, and flexible usage in mobile apps.

Currently the only open-source React Native typewriter that ensures stable container sizing.

Fully compatible with Expo.

Update: July 31, 2025

Version: 0.5.2

New updates:

• Added 'pause' feature
• Numerous bugfixes
• Example app has been updated
• Readme has been updated

Examples

Installation

npm install --save typewriter4react-native

or

yarn add typewriter4react-native

Usage

Pass text and selected customization data into the component to set up the animation.

import { Typewriter } from "typewriter4react-native";

const SomeComponent = () => {
    return (
        <Typewriter
            isActive
            reserveSpace
            speed="fast"
            textStyle={{
                fontSize: 30,
                fontFamily: "Roboto",
            }}
            text="Lorem ipsum dolor sit amet..."
        />
    );
};

Documentation

Prop	Type	Description	Default
text	string	The text string that is to be animated.	—
textStyle	StyleProp<TextStyle>	Text style.	{ fontSize: DEFAULT_FONTSIZE_VALUE, color: 'black', flexWrap: 'wrap' }
cursorStyle	`Omit<ViewStyle, 'backgroundColor'	'opacity'> & { color?: ViewStyle['backgroundColor']; minOpacity?: ViewStyle['opacity']; maxOpacity?: ViewStyle['opacity']; fontSize?: TextStyle['fontSize']; fontWeight?: TextStyle['fontWeight']; }`	Cursor style. Size/position are derived from the font size by default (unless explicit values are stated). Opacity is controlled by minOpacity & maxOpacity.
containerStyle	StyleProp<ViewStyle>	Container style.	—
speed	'slow' | 'medium' | 'fast' | 'very_fast' | 'fastest'	Typing speed presets. Ignored if typingDelayPerChar is set. Options (equivalent values in ms per char): 'slow' (150), 'medium' (125), 'fast' (100), 'very_fast' (75), 'fastest' (55).	'fast'
hideCursorOnFinish	boolean	Determines if the cursor disappears after the text is displayed.	true
isActive	boolean	Determines if the animation should run.	true
startDelay	number	Delay in ms before animation starts after activation.	—
cursorDisappearDelay	number	How many ms the cursor stays after text is displayed.	—
cursorBlinkTime	number	How many ms a single cursor blink lasts.	200
onFinish	() => void	Callback when typing animation finishes (before cursor disappears).	—
reserveSpace	boolean	Reserves space for the text before it appears.	true
backwards	boolean	If true, animation erases text instead of typing it.	—
typingDelayPerChar	number	Delay in ms per character. Overrides speed.	Derived from speed
typingDelayPerCharVariance	number	Random additional delay variance per character.	100
cursorType	'view' | 'text_simple'	Cursor type. 'view' is customizable; 'text_simple' is simpler but more limited.	'view'
cursorTextSimpleCustomChar	string	Replaces the | string in text_simple cursor. Recommended single character.	—
disableCursor	boolean	If true, the cursor isn't rendered.	false
pause	boolean	If true, pauses writing text. Cursor remains (if not disabled).	—

Contributing

Best contact me via GitHub or e-mail if you are willing to contribute.
Some of the planned (or dreamed) additions are listed in the file toadd.txt in the root folder of the package repository.

License

MIT