1.0.0 • Published 5 years ago
react-native-text-effects v1.0.0
react-native-text-effects
This is a collection of effects for text component in React Native. It works fine in Android and iOS.
Setup
npm install --save react-native-text-effects
Usage
import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import {TextAnimationFadeIn, TextAnimationZoom, TextAnimationRain, TextAnimationSlideDown, TextAnimationSlideUp, TextAnimationSlideLeft, TextAnimationSlideRight, TextAnimationShake, TextAnimationReverse, TextAnimationDeZoom} from 'react-native-text-effects';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<TextAnimationFadeIn value={"Text With Fade IN!"} delay={100} duration={1000} style={{color: 'red'}} />
<TextAnimationZoom value={"Text With Zoom IN!"} delay={100} duration={1000} fontSize={32} style={{color: 'green'}} />
<TextAnimationRain value={"Text With Rain Effect!"} delay={100} duration={250} fontSize={32} sizeRain={10} style={{color: 'black'}}/>
<TextAnimationSlideDown value={"Text With SlideDown!"} delay={100} duration={1000} style={{color: 'purple', fontSize: 40}} />
<TextAnimationSlideUp value={"Text With SlideUp!"} delay={100} duration={1000} style={{color: 'yellow', fontSize: 40}}/>
<TextAnimationSlideLeft value={"Text With SlideLeft!"} delay={100} duration={1000} style={{color: 'orange', fontSize: 40}}/>
<TextAnimationSlideRight value={"Text With SlideRight!"} delay={100} duration={1000} style={{color: 'red', fontSize: 40}}/>
<TextAnimationShake value={"Text With Shake!"} delay={100} duration={1000} style={{color: 'black', fontSize: 40}}/>
<TextAnimationReverse value={"Text With Reverse!"} delay={100} duration={1000} style={{color: 'yellow', fontSize: 40}}/>
<TextAnimationDeZoom value={"Text With DeZoom!"} delay={100} duration={1000} style={{color: 'orange', fontSize: 40}}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'dodgerblue',
}
});
Example (Gif is slow and in low quality...)
Properties
name | description | type |
---|---|---|
value | The string to render | String (REQUIRED) |
delay | The dealy between each char | Int (REQUIRED) |
duration | The duration of the animation per each char | Int (REQUIRED) |
fontSize | Required for TextAnimationZoom and TextAnimationRain, specify the size to reach | Int |
sizeRain | Required for TextAnimationRain, specify the initial size of text | Int |
style | The style of the text | Object (OPTIONAL) |
1.0.0
5 years ago