From fd3f308655464940d4f616209580d610d0947ee4 Mon Sep 17 00:00:00 2001
From: Yasar icli <yasaricli@gmail.com>
Date: Tue, 6 Aug 2019 17:55:31 +0300
Subject: [PATCH] fixed min width container

---
 index.js | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/index.js b/index.js
index ab69846..2dcbc79 100644
--- a/index.js
+++ b/index.js
@@ -33,6 +33,8 @@ export default class Dots extends Component {
 
   static defaultProps = {
     width: 300,
+
+    marginHorizontal: 2,
     paddingVertical: 10,
     paddingHorizontal: 10,
 
@@ -77,16 +79,17 @@ export default class Dots extends Component {
       passiveColor,
       activeBorder,
       activeBorderWidth,
-      activeBorderColor
+      activeBorderColor,
+      marginHorizontal
     } = this.props;
     const width = isActive ? activeDotWidth : passiveDotWidth;
 
     let style = {
       width,
       height: width,
+      marginHorizontal,
       backgroundColor: isActive ? activeColor : passiveColor,
       borderRadius: width,
-      marginHorizontal: 2,
       marginTop: isActive ? -width / 6 : 0
     };
 
@@ -100,14 +103,22 @@ export default class Dots extends Component {
   }
 
   render() {
-    const { length, width, paddingVertical, paddingHorizontal } = this.props;
+    const {
+      length,
+      width,
+      paddingVertical,
+      paddingHorizontal,
+      passiveDotWidth,
+      marginHorizontal
+    } = this.props;
     const list = [...Array(length).keys()];
+    const scrollWidth = marginHorizontal * list.length * passiveDotWidth;
 
     return (
       <View style={Styles.container}>
         <ScrollView
           ref="_scrollView"
-          style={{ width }}
+          style={{ width: width < scrollWidth ? width : scrollWidth }}
           contentContainerStyle={{ paddingVertical, paddingHorizontal }}
           scalesPageToFit={scalesPageToFit}
           bounces={false}