typewriter4react-native

KO | EN

gitlite — search

#python #react #ai #golang #machine-learning #rust #deep-learning #macos #awesome #cli #awesome-list #pytorch #security #openai

typewriter4react-native

(★ 13)

Customizable typewriter-style text animation component for React Native, built for smooth, lightweight, and flexible usage in mobile apps.

typewriter4react-native Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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: September 15, 2025

Version: 0.5.3

New updates:

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

## Examples

![Example App](https://github.com/irolinski/typewriter4react-native/blob/main/docs/assets/example_img_1.gif?raw=true)
![Example App](https://github.com/irolinski/typewriter4react-native/blob/main/docs/assets/example_img_2.gif?raw=true)

## Installation

```bash
npm install --save typewriter4react-native
```

```bash
yarn add typewriter4react-native
```

## Usage

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

```javascript
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`.                                                                                             | `{ height: fontSize * 0.6, width: fontSize * 0.1, minOpacity: 0, maxOpacity: 1, transform: [{ translateX: fontSize / 3 }, { scale: 1.75 }] }` |
| **containerStyle**             | `StyleProp<ViewStyle>`                                                                                                                                                                                                                      | Container style.                                                                                                                                                                                                                                          | —                                                                                                                                             |
| **speed**                      | `'slow'` &#124; `'medium'` &#124; `'fast'` &#124; `'very_fast'` &#124; `'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'` &#124; `'text_simple'`                                                                                                                                                                                                             | Cursor type. `'view'` is customizable; `'text_simple'` is simpler but more limited.                                                                                                                                                                        | `'view'`                                                                                                                                      |
| **cursorTextSimpleCustomChar** | `string`                                                                                                                                                                                                                                    | Replaces the &#124; 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

typewriter4react-native

typewriter4react-native Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

typewriter4react-native

typewriter4react-native Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README