React Native Animated Ellipsis

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

Kinda like iOS

Installation

npm install --save react-native-animated-ellipsis

Importing

import AnimatedEllipsis from 'react-native-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:

Basic Example

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.

More Examples

Ten Dots Example

<AnimatedEllipsis numberOfDots={10} />

Complex Example

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