Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-native-loading-ellipsis

JanidHam26MIT1.0.1

A simple, loading dots component like Airbnb loading. Ideal for everywhere.

react-native, react-component, react-native-component, react, react native, mobile, ios, android, ui, loading, loading-component, react-native-loading-ellipsis, ellipsis, airbnb loading

readme

react-native-loading-ellipsis

A simple, loading dots component like Airbnb loading. Ideal for everywhere.

Installation

If using npm:

npm i react-native-loading-ellipsis

Usage

import EllipsisLoading from 'react-native-loading-ellipsis'

Simply place a <EllipsisLoading /> inside of any compnent.

<View style={{ flex: 1 }}>
    <EllipsisLoading />
</View>

Styling Usage

EllipsisLoading is fully customizable using the styleDot, animationDelay, numberOfDots, minOpacity, and dotSize props.

Example usage to change dots color:

const styleDot = {
    backgroundColor: '#000000',
    marginRight: 3,
};

return (
    <View style={{flex: 1}}>
        <EllipsisLoading styleDot={styleDot} />
    </View>
)

Documentation

EllipsisLoading Component

Name Description Default Type
styleDoT Dot styles Object Object
animationDelay Delay for animation in milliseconds 300 Number
numberOfDots Number of dot to display 3 Number
minOpacity Opacity of dot animatino 0.2 Number
dotSize Size of the dots 12 Number

Contributing

Pull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made.

Author

Janid Ham | https://janidham.com

License

MIT