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
;;; { return <View style=stylescontainer> <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;
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) |