@mrakesh0608/react-native-loading-dots

Welcome to @mrakesh0608/react-native-loading-dots 👋

A Loading Dots Component for React Native

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

Try this example on Expo Snack

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

Merugu Rakesh

• 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.