From 47f384616e193a0f85a8ee38223e92469c54a108 Mon Sep 17 00:00:00 2001
From: Amaury Liet <amaury.liet@gmail.com>
Date: Fri, 4 Sep 2020 12:05:47 +0200
Subject: [PATCH 1/2] Avoid overflowing last dash

Avoid inconsistent component size between its first and second render
---
 Dash.js | 17 +++++++++++++++--
 util.js | 21 +++++++++++++--------
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/Dash.js b/Dash.js
index 32ff1ec..19d5514 100644
--- a/Dash.js
+++ b/Dash.js
@@ -13,10 +13,12 @@ import { getDashStyle, isStyleRow } from '../util'
 const Dash = props => {
 	const isRow = isStyleRow(props.style)
 	const length = isRow ? props.width : props.height
-	const n = Math.ceil(length / (props.dashGap + props.dashLength))
+	const fullDashesCount = Math.floor(length / (props.dashGap + props.dashLength))
+	const lastDashSize = length - fullDashesCount * (props.dashGap + props.dashLength);
 	const calculatedDashStyles = getDashStyle(props)
+	const calculatedLastDashStyle = getDashStyle(props, lastDashSize)
 	let dash = []
-	for (let i = 0; i < n; i++) {
+	for (let i = 0; i < fullDashesCount; i++) {
 		dash.push(
 			<View
 				key={ i }
@@ -27,6 +29,17 @@ const Dash = props => {
 			/>
 		)
 	}
+	if (lastDashSize > 0) {
+		dash.push(
+			<View
+				key={ fullDashesCount }
+				style={ [
+					calculatedLastDashStyle,
+					props.dashStyle,
+				] }
+			/>
+		);
+	}
 	return (
 		<View
 			onLayout={ props.onLayout }
diff --git a/util.js b/util.js
index c5fa0b3..f0bc180 100644
--- a/util.js
+++ b/util.js
@@ -8,21 +8,26 @@ export const isStyleRow = style => {
 const getDashStyleId = (
   { dashGap, dashLength, dashThickness, dashColor },
   isRow,
+  isShortened = false
 ) =>
   `${dashGap}-${dashLength}-${dashThickness}-${dashColor}-${
     isRow ? 'row' : 'column'
-  }`
+  }-${isShortened}`
 
 const createDashStyleSheet = (
   { dashGap, dashLength, dashThickness, dashColor },
   isRow,
+  maxLength,
 ) => {
+  const currentDashLength = maxLength === undefined ? dashLength : Math.min(maxLength, dashLength);
+  const currentGapLength = maxLength === undefined ? dashGap : Math.max(maxLength - dashLength, 0);
+
   const idStyle = StyleSheet.create({
     style: {
-      width: isRow ? dashLength : dashThickness,
-      height: isRow ? dashThickness : dashLength,
-      marginRight: isRow ? dashGap : 0,
-      marginBottom: isRow ? 0 : dashGap,
+      width: isRow ? currentDashLength : dashThickness,
+      height: isRow ? dashThickness : currentDashLength,
+      marginRight: isRow ? currentGapLength : 0,
+      marginBottom: isRow ? 0 : currentGapLength,
       backgroundColor: dashColor,
     },
   })
@@ -30,13 +35,13 @@ const createDashStyleSheet = (
 }
 
 let stylesStore = {}
-export const getDashStyle = props => {
+export const getDashStyle = (props, maxLength=undefined) => {
   const isRow = isStyleRow(props.style)
-  const id = getDashStyleId(props, isRow)
+  const id = getDashStyleId(props, isRow, maxLength !== undefined)
   if (!stylesStore[id]) {
     stylesStore = {
       ...stylesStore,
-      [id]: createDashStyleSheet(props, isRow),
+      [id]: createDashStyleSheet(props, isRow, maxLength),
     }
   }
   return stylesStore[id]

From 4191116ce3eccda63258c5f59b747cdf1a66300f Mon Sep 17 00:00:00 2001
From: amauryliet <amaury.liet@hotmail.fr>
Date: Fri, 4 Sep 2020 12:12:05 +0200
Subject: [PATCH 2/2] chore: Build package

---
 dist/index.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/dist/index.js b/dist/index.js
index 4034e31..d9ebfce 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -25,15 +25,23 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var Dash = function Dash(props) {
 	var isRow = (0, _util.isStyleRow)(props.style);
 	var length = isRow ? props.width : props.height;
-	var n = Math.ceil(length / (props.dashGap + props.dashLength));
+	var fullDashesCount = Math.floor(length / (props.dashGap + props.dashLength));
+	var lastDashSize = length - fullDashesCount * (props.dashGap + props.dashLength);
 	var calculatedDashStyles = (0, _util.getDashStyle)(props);
+	var calculatedLastDashStyle = (0, _util.getDashStyle)(props, lastDashSize);
 	var dash = [];
-	for (var i = 0; i < n; i++) {
+	for (var i = 0; i < fullDashesCount; i++) {
 		dash.push(_react2.default.createElement(_reactNative.View, {
 			key: i,
 			style: [calculatedDashStyles, props.dashStyle]
 		}));
 	}
+	if (lastDashSize > 0) {
+		dash.push(_react2.default.createElement(_reactNative.View, {
+			key: fullDashesCount,
+			style: [calculatedLastDashStyle, props.dashStyle]
+		}));
+	}
 	return _react2.default.createElement(
 		_reactNative.View,
 		{