React Native text component with animated typewriter effect
source link: https://reactnativeexample.com/react-native-text-component-with-animated-typewriter-effect/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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
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
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
GitHub
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK