This project was forked from adorableio, because the maintainer has not been replying for the last few months and I have too many of this in my projects.

React Native Animated Ellipsis

A simple, customizable animated dots component for use in React Native apps. Ideal for loading screens.

Installation

npm install --save @xlanor/react-native-animated-ellipsis

Importing

import AnimatedEllipsis from '@xlanor/react-native-animated-ellipsis';

Jest issue with scoped libraries.

Add the following after setupFilesAfterEnv

    "transformIgnorePatterns": ["^/node_module/[A-Za-z1-9./_-]*$"]

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:

| Property | Description | |----------|-------------| | numberOfDots | The number of dots you'd like to show. Defaults to 3. | | animationDelay | The length in milliseconds of each phase of the animated. Defaults to 300. | | minOpacity | The minimum opacity for the dots. Defaults to 0. | | style | CSS to apply to the dots. It accepts any styles that a normal <Text /> component can take. | | useNativeDriver | Specify true or false. Defaults to true. |

More Examples

![Ten Dots Example](https://raw.githubusercontent.com/wiki/adorableio/

-animated-ellipsis/images/example_ten_dots.gif)

<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,
                  }}
  />