Prerequisites - Peer Dependencies

• @types/react >= 18.0.0
• react >= 18.0.0
• react-native >= 0.70.0
• typescript >= 4.9.0

Install

npm i @mrakesh0608/react-native-loading-dots

Usage

import { View, Text, ScrollView } from 'react-native';
import { LoadingDots } from '@mrakesh0608/react-native-loading-dots';

const list = ['elastic', 'flashing', 'pulse', 'ping', 'typing'];

export default function App() {
  return (
    <ScrollView style={{ justifyContent: 'center', alignItems: 'center' }}>
      {list.map((item, index) => (
        <View
          key={index}
          style={{
            marginVertical: 12,
          }}>
          <LoadingDots
            animation={item}
            containerStyle={{
              backgroundColor: 'lightgray',
              padding: 18, 
              borderRadius: 10,
            }}
          />
          <Text style={{ textAlign: 'center' }}>{item}</Text>
        </View>
      ))}
    </ScrollView>
  );
}

Styling Options

A list of available props to pass into the <LoadingDots /> component:

| Props | Type | Default | Units | Description | | -------------- | ------ | ------- | ----- | ----------------------------------------------------------------------------------- | | animation | String | 'pulse' | - | Animation style : elastic, flashing, ping, pulse, typing | | color | String | 'black' | - | Color of dots | | containerStyle | Style | - | - | Container Style for Loading Dots top level component | | dots | Number | 3 | - | Number of dots to be displayed | | delay | Number | 280 | ms | Delay between the two dots | | size | Number | 10 | px | Size of dots | | spacing | Number | 2 | px | Space between dots |

Author

• Website: mrakesh.vercel.app
• Github: @mrakesh0608
• LinkedIn: @mrakesh0608

🤝 Contributing

Contributions, issues and feature requests are welcome!Feel free to check issues page. You can also take a look at the contributing guide.

💖 Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2023 Merugu Rakesh. This project is MIT licensed.