Wednesday, 20 March, 2019 UTC
Summary
React Native Animated Ellipsis
More Examples
A simple, customizable animated dots component for use in React Native apps. Ideal for loading screens.
Installation
npm install --save react-native-animated-ellipsis
import AnimatedEllipsis from 'react-native-animated-ellipsis';
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. |
<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,
}}
/>