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.
Version: 0.5.3
New updates:
- Added 'pause' feature
- Numerous bugfixes
- Example app has been updated
- Readme has been updated
npm install --save typewriter4react-nativeor
yarn add typewriter4react-nativePass 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..."
/>
);
};| 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). | — |
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.
MIT