Added dot size prop

README.md

@@ -66,4 +66,13 @@ This prop will change the number of dots that will be displayed in the animation
 default ["#4dabf7", "#3bc9db", "#38d9a9", "#69db7c"]
 ```
 
-This prop will change the color of the dots in the given array order. If you declare the array but the length doesn't match with the amount of dots defined, the dot that cannot take a color from this array will instead use a fallback color of `"#4dabf7"`.
+This prop will change the color of the dots in the given array order. If you declare the array but the length doesn't match with the amount of dots defined, the dot that cannot take a color from this array will instead use a fallback color of `"#4dabf7"`.
+
+### size
+
+```js
+@type {Number}
+default 20
+```
+
+This prop will control the size of each dot that will be displayed for the animation.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-loading-dots",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "A React Native loading component with dots and smooth animation",
   "repository": "https://github.com/alexvcasillas/react-native-loading-dots",
   "author": "Alex Casillas",

src/react-native-loading-dots.js

@@ -8,7 +8,7 @@ const defaultColors = [
   "#69db7c"
 ];
 
-function LoadingDots({ dots = 4, colors = defaultColors }) {
+function LoadingDots({ dots = 4, colors = defaultColors, size = 20 }) {
   const [animations, setAnimations] = useState([]);
   const [reverse, setReverse] = useState(false);
 
@@ -80,7 +80,7 @@ function LoadingDots({ dots = 4, colors = defaultColors }) {
           // eslint-disable-next-line react/no-array-index-key
           key={`loading-anim-${index}`}
           style={[
-            styles.dot,
+            { width: size, height: size, borderRadius: size / 10 },
             { backgroundColor: colors[index] || "#4dabf7" },
             { transform: [{ translateY: animation }] }
           ]}
@@ -96,11 +96,6 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between"
-  },
-  dot: {
-    width: 20,
-    height: 20,
-    borderRadius: 10
   }
 });