From 1269611eae3c54dae9706941237c09ff6e6d986a Mon Sep 17 00:00:00 2001
From: Alex Casillas <alexvcasillas@gmail.com>
Date: Mon, 17 Jun 2019 15:42:53 +0200
Subject: [PATCH] Added dot size prop

---
 README.md                        | 11 ++++++++++-
 package.json                     |  2 +-
 src/react-native-loading-dots.js |  9 ++-------
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index 674b533..b287521 100644
--- a/README.md
+++ b/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"`.
\ No newline at end of file
+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.
\ No newline at end of file
diff --git a/package.json b/package.json
index 5dd4ad1..5216b03 100644
--- a/package.json
+++ b/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",
diff --git a/src/react-native-loading-dots.js b/src/react-native-loading-dots.js
index b55c352..6cfa7c0 100644
--- a/src/react-native-loading-dots.js
+++ b/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
   }
 });