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)