react-native-typing-animated-text

A React Native component that simulates typing text with an animated gradient background.

Installation

To install the package, use npm or yarn:

Using npm:

npm install react-native-typing-animated-text

Using yarn:

yarn add react-native-typing-animated-text

Usage

To use the TypingText component in your React Native project, follow these steps:

Import the Component

import TypingText from 'react-native-typing-animated-text';

Example

Here's a basic example of how to use the TypingText component:

import React from 'react';
import { View, StyleSheet } from 'react-native';
import TypingText from 'react-native-typing-animated-text';

const App = () => {
  return (
    <View style={styles.container}>
      <TypingText
        text="Welcome to the World Of Heaven!"
        typingSpeed={60}
        gradientColors={['#ff9a9e', '#fad0c4']}
        textStyle={{ color: '#fff', fontSize: 28 }}
        animationDuration={300}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#000',
  },
});

export default App;
  

Demo

Check out the demo of the component in action:

Props

Prop	Type	Default	Description
text	string	""	The text to display with typing effect.
typingSpeed	number	60	Speed of typing effect in milliseconds.
gradientColors	array of string	['#ff9a9e', '#fad0c4']	Array of colors for the gradient background.
textStyle	object	{}	Custom style for the text.
animationDuration	number	300	Duration of the animation in milliseconds.
gradientStyle	object	{}	Custom style for the gradient background.
containerStyle	object	{}	Custom style for the container view.

License

This project is licensed under the ISC License.

Contact

If you have any questions or issues, please open an issue on the GitHub repository or contact the author directly.