Specify text/icon spacing rather than reusing horizontal padding.

Author: jameswilddev

components/createButtonComponent/index.tsx

@@ -104,20 +104,20 @@ export const createButtonComponent = (
 
   const leftIconBase: TextStyle = {};
 
-  if (buttonStyle.horizontalPadding) {
-    leftIconBase.paddingLeft = buttonStyle.horizontalPadding;
+  if (buttonStyle.iconSpacing) {
+    leftIconBase.paddingLeft = buttonStyle.iconSpacing;
   }
 
   const rightIconBase: TextStyle = {};
 
-  if (buttonStyle.horizontalPadding) {
-    rightIconBase.paddingRight = buttonStyle.horizontalPadding;
+  if (buttonStyle.iconSpacing) {
+    rightIconBase.paddingRight = buttonStyle.iconSpacing;
   }
 
   const leftAndRightIconsBase: TextStyle = {};
 
-  if (buttonStyle.horizontalPadding) {
-    leftAndRightIconsBase.paddingHorizontal = buttonStyle.horizontalPadding;
+  if (buttonStyle.iconSpacing) {
+    leftAndRightIconsBase.paddingHorizontal = buttonStyle.iconSpacing;
   }
 
   const styles = StyleSheet.create({

components/createButtonComponent/readme.md

@@ -13,6 +13,7 @@ const ExampleDropDown = createButtonComponent({
   fontSize: 16,
   horizontalPadding: 10,
   verticalPadding: 2,
+  iconSpacing: 5,
   default: {
     backgroundColor: `yellow`,
     color: `blue`,