React Native text component with animated typewriter effect
React Native Typewriter
React Native text component with animated typewriter effect.
Installation
yarn add @sucho/react-native-typewriter
OR
npm install --save @sucho/react-native-typewriter
Usage
Add the Typewriter component to your app
import React from 'react'
import { StyleSheet, View } from 'react-native'
import TypeWriter from 'react-native-type-writer'
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 (
<View style={styles.container}>
<TypeWriter
textArray={['Hello', 'How', 'Are', 'You', 'Doing?']}
loop
speed={200}
delay={500}
textStyle={styles.typeWriterText}
cursorStyle={styles.typeWriterCursorText}
/>
</View>
)
}
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 for details