@draftbit/core 46.10.3-6f5759.2 → 46.10.3-7476ab.2

package/lib/module/components/DatePicker/DatePicker.js

@@ -1,4 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import * as React from "react";
 import { View, Animated, Text, StyleSheet, I18nManager, TextInput as NativeTextInput, Keyboard } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
@@ -83,24 +82,20 @@ const DatePicker = _ref => {
     focused ? _handleBlur() : _handleFocus();
   };
   const insets = useSafeAreaInsets();
-
   // const _restoreLabel = () =>
   //   Animated.timing(labeled, {
   //     toValue: 1,
   //     duration: FOCUS_ANIMATION_DURATION,
   //     useNativeDriver: true,
   //   }).start();
-
   // const _minmizeLabel = () =>
   //   Animated.timing(labeled, {
   //     toValue: 0,
   //     duration: BLUR_ANIMATION_DURATION,
   //     useNativeDriver: true,
   //   }).start();
-
   // const _showPlaceholder = () =>
   //   setTimeout(() => setPlaceholder1(placeholder || ""), 50);
-
   const _hidePlaceholder = () => {
     setPlaceholder1("");
   };
@@ -255,9 +250,7 @@ const DatePicker = _ref => {
   const inputStyles = [styles.input, inputStyle, type === "solid" ? {
     marginHorizontal: 12
   } : {}];
-
   // const render = (props) => <NativeTextInput {...props} />;
-
   return /*#__PURE__*/React.createElement(View, {
     style: [styles.container, style]
   }, /*#__PURE__*/React.createElement(Touchable, {
@@ -267,9 +260,10 @@ const DatePicker = _ref => {
     pointerEvents: "none"
   }, /*#__PURE__*/React.createElement(View, {
     style: [styles.container, style]
-  }, leftIconName && leftIconMode === "outset" ? /*#__PURE__*/React.createElement(Icon, _extends({}, leftIconProps, {
+  }, leftIconName && leftIconMode === "outset" ? /*#__PURE__*/React.createElement(Icon, {
+    ...leftIconProps,
     style: leftIconStyle
-  })) : null, /*#__PURE__*/React.createElement(View, {
+  }) : null, /*#__PURE__*/React.createElement(View, {
     style: [containerStyle, style ? {
       height: style.height
     } : {}, viewStyles]
@@ -318,12 +312,13 @@ const DatePicker = _ref => {
       opacity: hasActiveOutline ? labeled : 1
     }],
     numberOfLines: 1
-  }, label)) : null, leftIconName && leftIconMode === "inset" ? /*#__PURE__*/React.createElement(Icon, _extends({}, leftIconProps, {
+  }, label)) : null, leftIconName && leftIconMode === "inset" ? /*#__PURE__*/React.createElement(Icon, {
+    ...leftIconProps,
     style: {
       ...leftIconStyle,
       marginLeft: type === "solid" ? 16 : 0
     }
-  })) : null, /*#__PURE__*/React.createElement(NativeTextInput, _extends({
+  }) : null, /*#__PURE__*/React.createElement(NativeTextInput, {
     value: formatDate(),
     placeholder: label ? placeholder1 : placeholder,
     editable: !disabled,
@@ -332,8 +327,9 @@ const DatePicker = _ref => {
     onFocus: _handleFocus,
     onBlur: _handleBlur,
     underlineColorAndroid: "transparent",
-    style: [inputStyles, textStyles]
-  }, props))), rightIconName ? /*#__PURE__*/React.createElement(Icon, {
+    style: [inputStyles, textStyles],
+    ...props
+  })), rightIconName ? /*#__PURE__*/React.createElement(Icon, {
     name: rightIconName,
     size: ICON_SIZE,
     color: colors.light,
@@ -404,4 +400,22 @@ const styles = StyleSheet.create({
     alignSelf: "flex-end"
   }
 });
+export default withTheme(DatePicker);yContent: "center",
+    textAlignVertical: "center",
+    margin: 0,
+    textAlign: I18nManager.isRTL ? "right" : "left"
+  },
+  placeholder: {
+    position: "absolute",
+    left: 0
+  },
+  pickerContainer: {
+    flexDirection: "column",
+    width: "100%",
+    zIndex: 100
+  },
+  closeButton: {
+    alignSelf: "flex-end"
+  }
+});
 export default withTheme(DatePicker);

package/lib/module/components/DeckSwiper/DeckSwiper.js

@@ -24,7 +24,6 @@ const DeckSwiper = _ref => {
     console.warn("'children' of DeckSwiper ignored due to usage of 'data' and 'renderItem'");
   }
   const childrenArray = React.useMemo(() => React.Children.toArray(children), [children]);
-
   // an array of indices based on children count
   const cardsFillerData = React.useMemo(() => Array.from(Array(childrenArray.length).keys()), [childrenArray]);
   const cardsData = data || cardsFillerData;
@@ -51,7 +50,6 @@ const DeckSwiper = _ref => {
       return card === null || card === void 0 ? void 0 : card.toString();
     }
   };
-
   /**
    * By default react-native-deck-swiper positions everything with absolute position.
    * To overcome this, it is wrapped in a View to be able to add the component in any layout structure.
@@ -61,7 +59,6 @@ const DeckSwiper = _ref => {
    * To fix/mitage this without setting a static height, the first card is rendered in invisible state to take up space.
    * This effectivley makes the default height of the container be the height of the first card.
    */
-
   return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
     style: styles.containerHeightFiller
   }, renderFirstCard()), /*#__PURE__*/React.createElement(DeckSwiperComponent, {
@@ -97,4 +94,4 @@ const styles = StyleSheet.create({
     opacity: 0.0
   }
 });
-export default DeckSwiper;
+export default DeckSwiper;er;

package/lib/module/components/DeprecatedButton.js

@@ -1,4 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import * as React from "react";
 import { ActivityIndicator, View, Text, StyleSheet, Pressable } from "react-native";
 import color from "color";
@@ -75,7 +74,8 @@ const Button = _ref => {
       elevation,
       alignSelf: "stretch"
     }
-  }, /*#__PURE__*/React.createElement(Pressable, _extends({}, rest, {
+  }, /*#__PURE__*/React.createElement(Pressable, {
+    ...rest,
     onPress: onPress,
     accessibilityState: {
       disabled
@@ -83,7 +83,7 @@ const Button = _ref => {
     accessibilityRole: "button",
     disabled: disabled || loading,
     style: [styles.button, buttonStyle]
-  }), /*#__PURE__*/React.createElement(View, {
+  }, /*#__PURE__*/React.createElement(View, {
     style: styles.content
   }, icon && loading !== true ? /*#__PURE__*/React.createElement(View, {
     style: iconStyle
@@ -114,4 +114,22 @@ const styles = StyleSheet.create({
     width: Config.buttonIconSize
   }
 });
+export default withTheme(Button);: 1,
+    style: [textStyle, typography.button]
+  }, children))));
+};
+const styles = StyleSheet.create({
+  button: {
+    minWidth: 64,
+    borderStyle: "solid"
+  },
+  content: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  icon: {
+    width: Config.buttonIconSize
+  }
+});
 export default withTheme(Button);

package/lib/module/components/Divider.js

@@ -1,7 +1,24 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import * as React from "react";
 import { StyleSheet, View } from "react-native";
 import { withTheme } from "../theming";
+const Divider = _ref => {
+  let {
+    style,
+    color,
+    theme: {
+      colors
+    },
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/React.createElement(View, {
+    style: [{
+      backgroundColor: color || colors.divider,
+      height: StyleSheet.hairlineWidth
+    }, style],
+    ...rest
+  });
+};
+export default withTheme(Divider);ing";
 const Divider = _ref => {
   let {
     style,

package/lib/module/components/FormRow.js

@@ -1,4 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import * as React from "react";
 import { Text, StyleSheet } from "react-native";
 import { extractStyles } from "../utilities";
@@ -17,11 +16,27 @@ export default function FormRow(_ref) {
     textStyles,
     viewStyles
   } = extractStyles(style);
-  return /*#__PURE__*/React.createElement(Touchable, _extends({
+  return /*#__PURE__*/React.createElement(Touchable, {
     disabled: disabled,
     onPress: onPress,
     style: [styles.row, {
       flexDirection: direction
+    }, viewStyles],
+    ...rest
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: textStyles
+  }, label), children);
+}
+const styles = StyleSheet.create({
+  row: {
+    marginLeft: 8,
+    marginRight: 8,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center"
+  }
+});styles.row, {
+      flexDirection: direction
     }, viewStyles]
   }, rest), /*#__PURE__*/React.createElement(Text, {
     style: textStyles

package/lib/module/components/NumberInput.js

@@ -1,4 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React, { useEffect, useState } from "react";
 import { TextInput } from "react-native";
 import { isString, isNumber, isNaN } from "lodash";
@@ -32,7 +31,6 @@ const NumberInput = _ref => {
     setCurrentStringNumberValue(newStringNumberValue);
     onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(number);
   };
-
   // run handleChangeText with value prop only when value prop changes (and first render to reset currentStringNumberValue)
   useEffect(() => {
     const nextStringNumberValue = formatValueToStringNumber(value);
@@ -41,7 +39,6 @@ const NumberInput = _ref => {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value]);
-
   // set currentStringNumberValue as defaultValue prop if there is a differnce on first render only
   useEffect(() => {
     const defaultStringNumberValue = formatValueToStringNumber(defaultValue);
@@ -50,6 +47,17 @@ const NumberInput = _ref => {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  return /*#__PURE__*/React.createElement(TextInput, {
+    keyboardType: "numeric",
+    value: currentStringNumberValue,
+    onChangeText: handleChangeText,
+    ...props
+  });
+};
+export default NumberInput;     setCurrentStringNumberValue(defaultStringNumberValue);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   return /*#__PURE__*/React.createElement(TextInput, _extends({
     keyboardType: "numeric",
     value: currentStringNumberValue,

package/lib/module/components/Picker/PickerComponent.android.js

@@ -1,4 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import * as React from "react";
 import { View, StyleSheet } from "react-native";
 import omit from "lodash.omit";
@@ -8,7 +7,6 @@ import { extractStyles } from "../../utilities";
 import TextField from "../TextField";
 import Touchable from "../Touchable";
 const Picker = _ref => {
-  var _options$find$label, _options$find;
   let {
     style,
     options,
@@ -18,6 +16,7 @@ const Picker = _ref => {
     onValueChange: onValueChangeOverride = () => {},
     ...props
   } = _ref;
+  var _a, _b;
   const {
     viewStyles: {
       borderRadius,
@@ -62,7 +61,7 @@ const Picker = _ref => {
   };
 
   const stylesWithoutMargin = style && omit(StyleSheet.flatten(style), ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft"]);
-  const selectedLabel = selectedValue && ((_options$find$label = (_options$find = options.find(o => o.value === selectedValue)) === null || _options$find === void 0 ? void 0 : _options$find.label) !== null && _options$find$label !== void 0 ? _options$find$label : selectedValue);
+  const selectedLabel = selectedValue && ((_b = (_a = options.find(o => o.value === selectedValue)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : selectedValue);
   return /*#__PURE__*/React.createElement(Touchable, {
     disabled: disabled,
     onPress: toggleFocus,
@@ -84,6 +83,25 @@ const Picker = _ref => {
     label: o.label,
     value: o.value,
     key: o.value
+  }))), /*#__PURE__*/React.createElement(View, {
+    pointerEvents: "none"
+  }, /*#__PURE__*/React.createElement(TextField, {
+    ...props,
+    value: selectedLabel,
+    placeholder: placeholder,
+    // @ts-ignore
+    ref: textField,
+    disabled: disabled,
+    // @ts-expect-error
+    style: stylesWithoutMargin
+  }))));
+};
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: "stretch"
+  }
+});
+export default withTheme(Picker);y: o.value
   }))), /*#__PURE__*/React.createElement(View, {
     pointerEvents: "none"
   }, /*#__PURE__*/React.createElement(TextField, _extends({}, props, {

package/lib/module/components/Portal/PortalHost.js

@@ -1,11 +1,7 @@
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import * as React from "react";
 import { View, StyleSheet } from "react-native";
 import PortalManager from "./PortalManager";
 export const PortalContext = /*#__PURE__*/React.createContext(null);
-
 /**
  * Portal host renders all of its children `Portal` elements.
  * For example, you can wrap a screen in `Portal.Host` to render items above the screen.
@@ -33,10 +29,10 @@ export const PortalContext = /*#__PURE__*/React.createContext(null);
 export default class PortalHost extends React.Component {
   constructor() {
     super(...arguments);
-    _defineProperty(this, "setManager", manager => {
+    this.setManager = manager => {
       this.manager = manager;
-    });
-    _defineProperty(this, "mount", children => {
+    };
+    this.mount = children => {
       const key = this.nextKey++;
       if (this.manager) {
         this.manager.mount(key, children);
@@ -48,8 +44,8 @@ export default class PortalHost extends React.Component {
         });
       }
       return key;
-    });
-    _defineProperty(this, "update", (key, children) => {
+    };
+    this.update = (key, children) => {
       if (this.manager) {
         this.manager.update(key, children);
       } else {
@@ -66,8 +62,8 @@ export default class PortalHost extends React.Component {
           this.queue.push(op);
         }
       }
-    });
-    _defineProperty(this, "unmount", key => {
+    };
+    this.unmount = key => {
       if (this.manager) {
         this.manager.unmount(key);
       } else {
@@ -76,10 +72,9 @@ export default class PortalHost extends React.Component {
           key
         });
       }
-    });
-    _defineProperty(this, "nextKey", 0);
-    _defineProperty(this, "queue", []);
-    _defineProperty(this, "manager", void 0);
+    };
+    this.nextKey = 0;
+    this.queue = [];
   }
   componentDidMount() {
     const manager = this.manager;
@@ -117,6 +112,41 @@ export default class PortalHost extends React.Component {
     }));
   }
 }
+PortalHost.displayName = "Portal.Host";
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});    switch (action.type) {
+          case "mount":
+            manager.mount(action.key, action.children);
+            break;
+          case "update":
+            manager.update(action.key, action.children);
+            break;
+          case "unmount":
+            manager.unmount(action.key);
+            break;
+        }
+      }
+    }
+  }
+  render() {
+    return /*#__PURE__*/React.createElement(PortalContext.Provider, {
+      value: {
+        mount: this.mount,
+        update: this.update,
+        unmount: this.unmount
+      }
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.container,
+      collapsable: false,
+      pointerEvents: "box-none"
+    }, this.props.children), /*#__PURE__*/React.createElement(PortalManager, {
+      ref: this.setManager
+    }));
+  }
+}
 _defineProperty(PortalHost, "displayName", "Portal.Host");
 const styles = StyleSheet.create({
   container: {

package/lib/module/components/RadioButton/RadioButtonFieldGroup.js

@@ -1,4 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React from "react";
 import { View } from "react-native";
 import Text from "../Text";
@@ -20,6 +19,16 @@ const RadioButtonFieldGroup = _ref => {
       fontSize: theme.typography.headline4.fontSize,
       color: theme.typography.headline4.color
     }, labelStyle]
+  }, label), /*#__PURE__*/React.createElement(RadioButtonGroup, {
+    theme: theme,
+    ...rest
+  }, children));
+};
+export default withTheme(RadioButtonFieldGroup);}, /*#__PURE__*/React.createElement(Text, {
+    style: [{
+      fontSize: theme.typography.headline4.fontSize,
+      color: theme.typography.headline4.color
+    }, labelStyle]
   }, label), /*#__PURE__*/React.createElement(RadioButtonGroup, _extends({
     theme: theme
   }, rest), children));

package/lib/module/components/Shadow.js

@@ -1,4 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React from "react";
 import { Shadow as ShadowComponent } from "react-native-shadow-2";
 const Shadow = _ref => {
@@ -17,7 +16,7 @@ const Shadow = _ref => {
     style,
     ...rest
   } = _ref;
-  return /*#__PURE__*/React.createElement(ShadowComponent, _extends({
+  return /*#__PURE__*/React.createElement(ShadowComponent, {
     offset: [offsetX, offsetY],
     sides: {
       start: showShadowSideStart,
@@ -32,6 +31,20 @@ const Shadow = _ref => {
       bottomEnd: showShadowCornerBottomEnd
     },
     containerStyle: style,
+    paintInside: paintInside,
+    ...rest
+  });
+};
+export default Shadow;hadowSideTop,
+      bottom: showShadowSideBottom
+    },
+    corners: {
+      topStart: showShadowCornerTopStart,
+      topEnd: showShadowCornerTopEnd,
+      bottomStart: showShadowCornerBottomStart,
+      bottomEnd: showShadowCornerBottomEnd
+    },
+    containerStyle: style,
     paintInside: paintInside
   }, rest));
 };

package/lib/module/components/StarRating.js

@@ -1,4 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import * as React from "react";
 import { View, StyleSheet, Pressable } from "react-native";
 import { withTheme } from "../theming";
@@ -32,9 +31,10 @@ const StarRating = _ref => {
     !!onPress && onPress(r);
   }, [onPress]);
   const ratingRounded = Math.round(localRating * 2) / 2;
-  return /*#__PURE__*/React.createElement(View, _extends({
-    style: [styles.container, style]
-  }, rest), [...Array(maxStars)].map((_, i) => /*#__PURE__*/React.createElement(View, {
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, style],
+    ...rest
+  }, [...Array(maxStars)].map((_, i) => /*#__PURE__*/React.createElement(View, {
     key: i,
     style: {
       display: "flex"
@@ -74,4 +74,24 @@ const styles = StyleSheet.create({
     width: "50%"
   }
 });
+export default withTheme(StarRating);ntainer: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  touchContainer: {
+    display: "flex",
+    flexDirection: "row",
+    position: "absolute",
+    top: 0,
+    right: 0,
+    left: 0,
+    bottom: 0,
+    zIndex: 1
+  },
+  pressable: {
+    flex: 1,
+    height: "100%",
+    width: "50%"
+  }
+});
 export default withTheme(StarRating);

package/lib/module/components/StepIndicator.js

@@ -1,6 +1,3 @@
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 // @ts-nocheck
 import React, { Component } from "react";
 import { View, Text, StyleSheet, Animated, TouchableWithoutFeedback } from "react-native";
@@ -12,7 +9,7 @@ const STEP_STATUS = {
 export default class StepIndicator extends Component {
   constructor(props) {
     super(props);
-    _defineProperty(this, "renderProgressBarBackground", () => {
+    this.renderProgressBarBackground = () => {
       const {
         stepCount,
         direction
@@ -55,8 +52,8 @@ export default class StepIndicator extends Component {
         },
         style: progressBarBackgroundStyle
       });
-    });
-    _defineProperty(this, "renderProgressBar", () => {
+    };
+    this.renderProgressBar = () => {
       const {
         stepCount,
         direction
@@ -86,8 +83,8 @@ export default class StepIndicator extends Component {
       return /*#__PURE__*/React.createElement(Animated.View, {
         style: progressBarStyle
       });
-    });
-    _defineProperty(this, "renderStepIndicator", () => {
+    };
+    this.renderStepIndicator = () => {
       let steps = [];
       const {
         stepCount,
@@ -118,8 +115,8 @@ export default class StepIndicator extends Component {
           height: this.state.customStyles.currentStepIndicatorSize
         }]
       }, steps);
-    });
-    _defineProperty(this, "renderStepLabels", () => {
+    };
+    this.renderStepLabels = () => {
       const {
         labels,
         direction,
@@ -161,8 +158,8 @@ export default class StepIndicator extends Component {
           alignItems: this.state.customStyles.labelAlign
         }]
       }, labelViews);
-    });
-    _defineProperty(this, "renderStep", position => {
+    };
+    this.renderStep = position => {
       const {
         renderStepIndicator
       } = this.props;
@@ -229,8 +226,8 @@ export default class StepIndicator extends Component {
       }) : /*#__PURE__*/React.createElement(Text, {
         style: indicatorLabelStyle
       }, "".concat(position + 1)));
-    });
-    _defineProperty(this, "getStepStatus", stepPosition => {
+    };
+    this.getStepStatus = stepPosition => {
       const {
         currentPosition
       } = this.props;
@@ -241,8 +238,8 @@ export default class StepIndicator extends Component {
       } else {
         return STEP_STATUS.UNFINISHED;
       }
-    });
-    _defineProperty(this, "onCurrentPositionChanged", position => {
+    };
+    this.onCurrentPositionChanged = position => {
       let {
         stepCount
       } = this.props;
@@ -262,7 +259,7 @@ export default class StepIndicator extends Component {
         toValue: this.state.customStyles.currentStepIndicatorSize / 2,
         duration: 100
       })])]).start();
-    });
+    };
     const defaultStyles = {
       stepIndicatorSize: 30,
       currentStepIndicatorSize: 40,
@@ -328,7 +325,6 @@ export default class StepIndicator extends Component {
     //     ),
     //   }));
     // }
-
     if (prevProps.currentPosition !== this.props.currentPosition) {
       this.onCurrentPositionChanged(this.props.currentPosition);
     }
@@ -369,6 +365,50 @@ const styles = StyleSheet.create({
     justifyContent: "center"
   }
 });
+StepIndicator.defaultProps = {
+  currentPosition: 0,
+  stepCount: 5,
+  customStyles: {},
+  direction: "horizontal"
+};rrentPositionChanged(this.props.currentPosition);
+    }
+  }
+}
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: "transparent"
+  },
+  stepIndicatorContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-around",
+    backgroundColor: "transparent"
+  },
+  stepLabelsContainer: {
+    justifyContent: "space-around"
+  },
+  step: {
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 2
+  },
+  stepContainer: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  stepLabel: {
+    fontSize: 12,
+    textAlign: "center",
+    fontWeight: "500"
+  },
+  stepLabelItem: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
 StepIndicator.defaultProps = {
   currentPosition: 0,
   stepCount: 5,