v1.0.4

Author: mrakesh0608

README.md

@@ -40,7 +40,7 @@ npm i @mrakesh0608/react-native-loading-dots
 import { View, Text, ScrollView } from 'react-native';
 import { LoadingDots } from '@mrakesh0608/react-native-loading-dots';
 
-const list = ['elastic', 'flashing', 'typing', 'ping', 'pulse'];
+const list = ['elastic', 'flashing', 'pulse', 'ping', 'typing'];
 
 export default function App() {
   return (
@@ -67,6 +67,20 @@ export default function App() {
 }
 ```
 
+## 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
 <div style="display:flex;align-items: center;">
     <img src='https://avatars.githubusercontent.com/u/101246871?v=sd4' alt = '👤' width='16px' height='16px'>

src/LoadingDots/types.ts

@@ -38,7 +38,7 @@ export function Container() {
             nodes.map((node, index) =>
                 animationStyle({
                     animation,
-                    delay: index * (delay ? delay : 260),
+                    delay: index * (delay ? delay : 280),
                     node,
                     size
                 })

src/LoadingDots/components/Container.tsx renamed to src/components/Container.tsx

@@ -10,7 +10,7 @@ export function LoadingDots({
     color = "black",
     size = 10,
     spacing = 2,
-    delay = 260,
+    delay = 280,
     containerStyle = {}
 }: LoadingDotsProps) {
     return (

src/LoadingDots/components/Dot.tsx renamed to src/components/Dot.tsx

@@ -1 +1,11 @@
-export * from './LoadingDots/types';
+import { StyleProp, ViewStyle } from "react-native";
+
+export type LoadingDotsProps = {
+    animation?: "elastic" | "flashing" | "typing" | "ping" | 'pulse' | undefined;
+    dots?: number;
+    color?: string;
+    size?: number;
+    spacing?: number;
+    delay?: number;
+    containerStyle?: StyleProp<ViewStyle>;
+};