https://github.com/suchox/react-native-typewriter
React Native text component with animated typewriter effect
https://github.com/suchox/react-native-typewriter
android animation ios javascript react-native typescript
Last synced: about 1 year ago
JSON representation
React Native text component with animated typewriter effect
- Host: GitHub
- URL: https://github.com/suchox/react-native-typewriter
- Owner: suchoX
- License: mit
- Created: 2023-04-19T13:58:04.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-06-14T10:14:10.000Z (about 3 years ago)
- Last Synced: 2025-05-03T16:37:53.691Z (about 1 year ago)
- Topics: android, animation, ios, javascript, react-native, typescript
- Language: Kotlin
- Homepage:
- Size: 586 KB
- Stars: 13
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Native Typewriter
React Native text component with animated typewriter effect.
# Installation
```bash
yarn add @sucho/react-native-typewriter
```
OR
```bash
npm install --save @sucho/react-native-typewriter
```
# Usage
Add the `Typewriter` component to your app
```javascript
import React from 'react'
import { StyleSheet, View } from 'react-native'
import TypeWriter from '@sucho/react-native-typewriter'
const BACKGROUND = '#263238'
const WHITE = '#ffffff'
const PINK = '#c2185b'
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 24,
backgroundColor: BACKGROUND,
justifyContent: 'center',
},
typeWriterText: {
color: WHITE,
fontSize: 24,
},
typeWriterCursorText: {
color: PINK,
fontSize: 24,
},
})
const App = () => {
return (
)
}
```
# Documentation
The Typewriter has the following props
## text (Mandatory)
type: `Array of Strings`
The Typerwriter component will animate each string one by one. If there's only one string, just pass a single string as a single item of the array
## loop
type: `boolean` default: `false`
After all the strings have been types out, the Text will start looping from the beginning if loop=true. Else, the string will be left visible
## speed
type: `number` default: `300`
The speed of the typing animation. Lower value is higher speed
## delay
type: `number` default: `40`
Delay between two strings in the text array
## textStyle
type: `TextStyle`
Style of the Text being typed
## cursorStyle
type: `TextStyle`
Style of the blinking cursor
## License
Released under the MIT license. See [LICENSE](https://github.com/suchoX/react-native-type-writer/blob/main/LICENSE) for details