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