rn-animated-ellipsis v2.1.3

React Native Animated Ellipsis

A simple, customizable animated dots component ideal for loading screens in React Native apps (forked from adorableio/react-native-animated-ellipsis - not maintained).

Installation

using npm

npm install rn-animated-ellipsis

or using yarn

yarn add rn-animated-ellipsis

Importing

import AnimatedEllipsis from 'rn-animated-ellipsis';

Usage

Just include the component in the output of any other component like this:

render() {
  return (
    <View>
      <Text>
        Loading
        <AnimatedEllipsis />
      </Text>
    </View>
  );
}

which will get you something like this:

Props

Customize the number of dots, animation speed, and style using these props:

More Examples

<AnimatedEllipsis numberOfDots={10} />

<AnimatedEllipsis 
  numberOfDots={4}
  animationDelay={150}
  style={{
    color: 'red',
    fontSize: 72,
  }}
/>

<AnimatedEllipsis 
  numberOfDots={3}
  minOpacity={0.4}
  animationDelay={200}
  style={{
    color: '#94939b',
    fontSize: 100,
    letterSpacing: -15,
  }}
/>