React Native Animated Letter Text 🚀

This library adds captivating letters animations to your React Native apps, perfect for dynamic interfaces like meter boards.💥

Installation

npm install react-native-animated-letter-text

Usage

Once installed, you can import and use the AnimatedLetterText component in your React Native application.

import AnimatedLetterText from "react-native-animated-letter-text";

Basic Usage

import React, { useState } from "react";
import { View, StyleSheet, Button } from "react-native";
import AnimatedLetterText from "react-native-animated-letter-text";

const App = () => {
  const [value, setValue] = useState(1); // The value you want to display

  return (
    <View style={styles.container}>
      <AnimatedLetterText value={value} letterStyle={{ fontSize: 20 }} />
      <View style={styles.br} />
      <Button
        title="increment by 4"
        onPress={() => setValue((val) => val + 4)}
      />
      <View style={styles.br} />
      <Button
        title="decrement by 4"
        onPress={() => setValue((val) => val - 4)}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  br: {
    height: 20,
  },
});

export default App;

Properties

| Property | Description | Type | Default | | -------------------------- | ----------------------------------------------------------------------------------------------------------------- | -------------------- | ----------- | | value | The text or number to be displayed and animated. | string or number | - | | animationDirection | The direction of letter animation. Choose from: 'top-to-bottom', 'bottom-to-top', 'random', or 'default'. | string | 'default' | | containerStyle | Additional styles for the container View. | ViewStyle | {} | | letterStyle | Additional styles for each animated letter. | TextStyle | {} | | translateValue | Adjust the translation distance for animation effect. | number | 30 | | isSameAnimationDelay | Set whether all letters have the same animation delay. | boolean | false | | disableEntryTranslation | Disable entry translation effect. | boolean | false | | disableExitTranslation | Disable exit translation effect. | boolean | false | | textVertical | Set text orientation to vertical. | boolean | false | | animateHorizontally | Enable horizontal animation. | boolean | false | | animateEntryHorizontally | Enable horizontal entry animation. | boolean | false | | animateExitHorizontally | Enable horizontal exit animation. | boolean | false | | flipLetter | Apply a letter flip effect. | boolean | false | | animateOnLoad | Enable animation when component loads. | boolean | true |

Advance Usage

import { View, Text, StyleSheet, Button } from "react-native";
import React, { useState } from "react";
import AnimatedLetterText from "react-native-animated-letter-text";
import Slider from "@react-native-community/slider";

export default function App() {
  const [value, setValue] = useState(188);

  const setRandomNumber = () => {
    const min = 1000;
    const max = 9999;
    const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
    setValue(randomNumber);
  };

  const setRandomWord = () => {
    const alphabet = "abcd";
    let randomWord = "";
    for (let i = 0; i < 4; i++) {
      const randomIndex = Math.floor(Math.random() * alphabet.length);
      randomWord += alphabet[randomIndex];
    }
    setValue(randomWord);
  };

  return (
    <View style={styles.container}>
      <View>
        <Text style={{ textAlign: "center", marginBottom: 20 }}>
          value:{" "}
          <Text style={{ fontWeight: "bold", fontSize: 18 }}>{value}</Text>
        </Text>
        <View style={styles.row}>
          <Text>Different delay</Text>
          <AnimatedLetterText
            value={value}
            containerStyle={styles.containerStyle}
            letterStyle={styles.letterStyle}
          />
        </View>
        <View style={styles.row}>
          <Text>Flip</Text>
          <AnimatedLetterText
            value={value}
            letterStyle={styles.letterStyle}
            containerStyle={{ justifyContent: "center", marginVertical: 20 }}
            flipLetter
            animateOnLoad={false}
          />
        </View>
        <View style={styles.row}>
          <Text>Same delay</Text>
          <AnimatedLetterText
            value={value}
            containerStyle={styles.containerStyle}
            letterStyle={styles.letterStyle}
            isSameAnimationDelay
          />
        </View>
        <View style={styles.row}>
          <Text>Vertical</Text>
          <AnimatedLetterText
            value={value}
            containerStyle={{ alignSelf: "center", marginTop: 20 }}
            textVertical
            animateHorizontally
            isSameAnimationDelay
          />
        </View>
      </View>
      <View
        style={{
          flexDirection: "row",
          width: "100%",
          justifyContent: "center",
        }}
      >
        <View style={{ margin: 15 }}>
          <Button title="   -   " onPress={() => setValue((val) => val - 1)} />
        </View>
        <View style={{ marginTop: 15, marginHorizontal: 10 }}>
          <Button title="  +  " onPress={() => setValue((val) => val + 1)} />
        </View>
      </View>
      <View style={{ marginTop: 15 }}>
        <Button title="random number" onPress={setRandomNumber} />
      </View>
      <View style={{ marginTop: 15 }}>
        <Button title="random word" onPress={setRandomWord} />
      </View>
      <Slider
        style={{ height: 40, marginTop: 15 }}
        minimumValue={100}
        maximumValue={500}
        step={1}
        onValueChange={(val) => setValue(Math.floor(val))}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    padding: 20,
  },
  containerStyle: {
    backgroundColor: "lightgrey",
    padding: 10,
  },
  letterStyle: {
    fontSize: 20,
    fontWeight: "bold",
    backgroundColor: "#000",
    color: "#fff",
    borderRadius: 40,
    marginHorizontal: 3,
    height: 30,
    width: 30,
    textAlign: "center",
    textAlignVertical: "center",
  },
  row: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-around",
  },
});

Props

The AnimatedLetterText component accepts the following props:

• value (required): The value you want to display and animate.

• animationDirection (optional, default: 'default'): The type of animation to use. It can be 'top-to-bottom', 'bottom-to-top', 'random', or 'default'.

• containerStyle (optional): Additional styles to apply to the container View.

• letterStyle (optional): Additional styles to apply to each animated letter.

• isSameAnimationDelay (optional, default: false): If true, all letters will have the same animation delay. If false, letters will have random animation delays.

• disableEntryTranslation (optional, default: false): If true, entry translations will be disabled.

• disableExitTranslation (optional, default: false): If true, exit translations will be disabled.

• textVertical (optional, default: false): If true, the text orientation will be vertical; otherwise, it will be horizontal.

• animateHorizontally (optional, default: false): If true, horizontal animation will be enabled instead of vertical.

• animateEntryHorizontally (optional, default: false): If true, horizontal entry animation will be enabled instead of vertical.

• animateExitHorizontally (optional, default: false): If true, horizontal exit animation will be enabled instead of vertical.

• translateValue (optional, default: 30): Adjust the translation distance for the animation effect.

• flipLetter (optional, default: false): If true, a letter flip effect will be applied for an additional animation dimension.

• animateOnLoad (optional, default: true): Enable animation when the component loads.

Customization

You can customize the appearance of the animated text by providing styles through the containerStyle and letterStyle props.

Copyright and License

ISC License

Copyright Aswin C. All rights reserved.