@webority-technologies/mobile 0.0.14 → 0.0.20

package/lib/commonjs/components/Modal/Modal.js

@@ -6,10 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Modal = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
 var _index = require("../../theme/index.js");
 var _hapticUtils = require("../../utils/hapticUtils.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// Local shape mirror — see types.ts ModalTokens for the canonical definition.
+
 const Modal = exports.Modal = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   const {
     visible,
@@ -27,10 +30,14 @@ const Modal = exports.Modal = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
     testID
   } = props;
   const theme = (0, _index.useTheme)();
+  const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
   const duration = animationDuration ?? theme.motion.duration.normal;
   const screenHeight = _reactNative.Dimensions.get('window').height;
+  const modalTokens = theme.components.modal;
+  const scaleStartValue = modalTokens?.scaleStartValue ?? 0.9;
+  const backdropHaptic = modalTokens?.backdropHaptic ?? false;
   const backdropAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
-  const scaleAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(0.9)).current;
+  const scaleAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(scaleStartValue)).current;
   const opacityAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
   const translateYAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(screenHeight)).current;
   const containerRef = (0, _react.useRef)(null);
@@ -38,10 +45,16 @@ const Modal = exports.Modal = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
   (0, _react.useEffect)(() => {
     if (visible) {
+      // Two Fabric quirks force this combination: backdrop View needs
+      // `collapsable={false}` (see render) so flattening doesn't drop it,
+      // AND opacity must run on the JS driver — native-driver opacity on an
+      // Animated.View that also sets backgroundColor inline renders as 0 on
+      // RN 0.85 / Fabric / iOS, leaving the dim layer invisible. Single
+      // 240ms tween — JS thread cost is negligible.
       _reactNative.Animated.timing(backdropAnim, {
         toValue: 1,
         duration,
-        useNativeDriver: true
+        useNativeDriver: false
       }).start();
       if (presentation === 'bottom') {
         _reactNative.Animated.spring(translateYAnim, {
@@ -65,12 +78,14 @@ const Modal = exports.Modal = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
         })]).start();
       }
     } else {
-      (0, _index.setNativeValue)(backdropAnim, 0);
-      (0, _index.setNativeValue)(scaleAnim, 0.9);
+      // backdropAnim is JS-driven (see note above) — reset directly so a
+      // zero-duration native timing doesn't re-claim the value.
+      backdropAnim.setValue(0);
+      (0, _index.setNativeValue)(scaleAnim, scaleStartValue);
       (0, _index.setNativeValue)(opacityAnim, 0);
       (0, _index.setNativeValue)(translateYAnim, screenHeight);
     }
-  }, [visible, presentation, duration, backdropAnim, scaleAnim, opacityAnim, translateYAnim, screenHeight, theme.motion.spring.gentle.damping, theme.motion.spring.gentle.stiffness, theme.motion.spring.gentle.mass]);
+  }, [visible, presentation, duration, backdropAnim, scaleAnim, opacityAnim, translateYAnim, screenHeight, theme.motion.spring.gentle.damping, theme.motion.spring.gentle.stiffness, theme.motion.spring.gentle.mass, scaleStartValue]);
 
   // Accessibility focus trap: when the modal opens, push screen-reader focus
   // into the dialog container after the mount animation; when it closes,
@@ -105,9 +120,9 @@ const Modal = exports.Modal = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
   }, [visible, duration, restoreFocusRef]);
   const handleBackdropPress = (0, _react.useCallback)(() => {
     if (!backdropPressClose) return;
-    (0, _hapticUtils.triggerHaptic)('selection');
+    if (backdropHaptic) (0, _hapticUtils.triggerHaptic)('selection');
     onRequestClose();
-  }, [backdropPressClose, onRequestClose]);
+  }, [backdropPressClose, onRequestClose, backdropHaptic]);
   const handleHardwareBack = (0, _react.useCallback)(() => {
     if (hardwareBackPress) {
       onRequestClose();
@@ -120,11 +135,15 @@ const Modal = exports.Modal = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
       }];
     }
     if (presentation === 'bottom') {
+      // paddingBottom includes the Android navigation-bar / iOS home-indicator
+      // inset so sheet content never lands behind the system chrome.
       return [styles.bottomContent, {
         backgroundColor: theme.colors.background.elevated,
         borderTopLeftRadius: theme.radius.xl,
         borderTopRightRadius: theme.radius.xl,
-        padding: theme.spacing.lg
+        paddingTop: theme.spacing.lg,
+        paddingHorizontal: theme.spacing.lg,
+        paddingBottom: theme.spacing.lg + insets.bottom
       }, theme.shadows.xl];
     }
     return [styles.centeredContent, {
@@ -132,7 +151,7 @@ const Modal = exports.Modal = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
       borderRadius: theme.radius.xl,
       padding: theme.spacing.xl
     }, theme.shadows.xl];
-  }, [presentation, theme, styles]);
+  }, [presentation, theme, styles, insets.bottom]);
   const wrapperStyle = (0, _react.useMemo)(() => {
     if (presentation === 'bottom') return styles.bottomWrapper;
     if (presentation === 'fullScreen') return styles.fullScreenWrapper;
@@ -161,11 +180,19 @@ const Modal = exports.Modal = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
     visible: visible,
     transparent: true,
-    statusBarTranslucent: true,
+    statusBarTranslucent: true
+    // Android-only API (RN 0.71+). On iOS the prop is harmless / ignored.
+    // Lets the backdrop and sheet extend behind the system navigation bar
+    // so the dim layer covers the entire screen and gesture-nav devices
+    // don't show a gap under the sheet.
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore — typed in RN 0.73+, the runtime prop exists on 0.71+
+    ,
+    navigationBarTranslucent: true,
     animationType: "none",
     onRequestClose: handleHardwareBack,
     testID: testID,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       ref: node => {
         containerRef.current = node;
         if (typeof ref === 'function') {
@@ -177,32 +204,33 @@ const Modal = exports.Modal = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
       style: styles.root,
       accessible: true,
       accessibilityViewIsModal: true,
-      accessibilityRole: 'dialog',
+      accessibilityRole: "alert",
       accessibilityLabel: accessibilityLabel,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-        style: [_reactNative.StyleSheet.absoluteFillObject, {
-          backgroundColor: theme.colors.background.inverse,
-          opacity: backdropAnim.interpolate({
-            inputRange: [0, 1],
-            outputRange: [0, backdropOpacity]
-          })
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View
+      // Backdrop wraps the dialog content (not sibling) — empirically,
+      // on RN 0.85 / Fabric / iOS a sibling backdrop is occluded by the
+      // wrapper View regardless of render order or pointerEvents.
+      // collapsable={false} prevents the backdrop View from being
+      // flattened out of the native tree. The backdrop uses a pre-baked
+      // rgba colour (no animated opacity) because Animated.View opacity
+      // on a coloured View doesn't update visibly on Fabric.
+      , {
+        collapsable: false,
+        style: [_reactNative.StyleSheet.absoluteFillObject, wrapperStyle, {
+          backgroundColor: theme.colors.background.overlay
         }, backdropStyle],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
           style: _reactNative.StyleSheet.absoluteFillObject,
           onPress: handleBackdropPress,
           accessibilityRole: "button",
           accessibilityLabel: "Close modal",
           disabled: !backdropPressClose
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: wrapperStyle,
-        pointerEvents: "box-none",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
           style: [containerStyle, animatedTransform, contentStyle],
           pointerEvents: "auto",
           children: children
-        })
-      })]
+        })]
+      })
     })
   });
 });

package/lib/commonjs/components/NumberInput/NumberInput.js

@@ -8,42 +8,11 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _index = require("../../theme/index.js");
 var _index2 = require("../../utils/index.js");
+var _FieldBase = require("../FieldBase/FieldBase.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-const sizeMap = {
-  sm: {
-    buttonSize: 30,
-    inputMinWidth: 44,
-    inputHeight: 30,
-    fontSize: 13,
-    iconFontSize: 16,
-    borderRadius: 8,
-    paddingHorizontal: 8,
-    gap: 6
-  },
-  md: {
-    buttonSize: 38,
-    inputMinWidth: 56,
-    inputHeight: 38,
-    fontSize: 15,
-    iconFontSize: 18,
-    borderRadius: 10,
-    paddingHorizontal: 10,
-    gap: 8
-  },
-  lg: {
-    buttonSize: 46,
-    inputMinWidth: 68,
-    inputHeight: 46,
-    fontSize: 17,
-    iconFontSize: 20,
-    borderRadius: 12,
-    paddingHorizontal: 12,
-    gap: 10
-  }
-};
-const LONG_PRESS_DELAY = 500;
-const LONG_PRESS_INTERVAL = 80;
+const DEFAULT_LONG_PRESS_DELAY = 500;
+const DEFAULT_LONG_PRESS_INTERVAL = 80;
 const roundToPrecision = (value, precision) => {
   if (!Number.isFinite(value)) return 0;
   if (precision <= 0) return Math.round(value);
@@ -65,12 +34,10 @@ const formatValue = (value, allowDecimal, precision) => {
 const sanitizeTyped = (raw, allowDecimal) => {
   if (!raw) return '';
   let cleaned = raw.replace(/[^0-9.-]/g, '');
-  // Allow only one leading minus.
   cleaned = cleaned.replace(/(?!^)-/g, '');
   if (!allowDecimal) {
     cleaned = cleaned.replace(/\./g, '');
   } else {
-    // Allow at most one decimal point.
     const firstDot = cleaned.indexOf('.');
     if (firstDot !== -1) {
       cleaned = cleaned.slice(0, firstDot + 1) + cleaned.slice(firstDot + 1).replace(/\./g, '');
@@ -96,17 +63,27 @@ const NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)((p
     unit,
     accessibilityLabel,
     style,
+    containerStyle,
     inputStyle,
+    buttonStyle,
+    unitStyle,
     labelStyle,
     textInputProps,
     testID
   } = props;
   const theme = (0, _index.useTheme)();
-  const sizeStyles = sizeMap[size];
+  const sizeTokens = (0, _FieldBase.resolveFieldSize)(theme, size);
+  const fieldText = (0, _FieldBase.resolveFieldTextStyle)(theme, {
+    disabled
+  });
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const longPressDelay = theme.components.numberInput?.longPressDelayMs ?? DEFAULT_LONG_PRESS_DELAY;
+  const longPressInterval = theme.components.numberInput?.longPressIntervalMs ?? DEFAULT_LONG_PRESS_INTERVAL;
+  const pressHaptic = theme.components.numberInput?.pressHaptic ?? false;
   const inputRef = (0, _react.useRef)(null);
   const [draft, setDraft] = (0, _react.useState)(formatValue(value, allowDecimal, precision));
   const [editing, setEditing] = (0, _react.useState)(false);
+  const [focused, setFocused] = (0, _react.useState)(false);
   const repeatTimeoutRef = (0, _react.useRef)(null);
   const repeatIntervalRef = (0, _react.useRef)(null);
   const clearRepeat = (0, _react.useCallback)(() => {
@@ -120,8 +97,6 @@ const NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)((p
     }
   }, []);
   (0, _react.useEffect)(() => clearRepeat, [clearRepeat]);
-
-  // Keep draft in sync with value when not actively editing.
   (0, _react.useEffect)(() => {
     if (!editing) {
       setDraft(formatValue(value, allowDecimal, precision));
@@ -139,16 +114,14 @@ const NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)((p
   }, [allowDecimal, max, min, onChange, precision, value]);
   const decrement = (0, _react.useCallback)(() => {
     if (!interactive || atMin) return;
-    (0, _index2.triggerHaptic)('impactLight');
+    if (pressHaptic) (0, _index2.triggerHaptic)('impactLight');
     setExternal(value - step);
-  }, [atMin, interactive, setExternal, step, value]);
+  }, [atMin, interactive, pressHaptic, setExternal, step, value]);
   const increment = (0, _react.useCallback)(() => {
     if (!interactive || atMax) return;
-    (0, _index2.triggerHaptic)('impactLight');
+    if (pressHaptic) (0, _index2.triggerHaptic)('impactLight');
     setExternal(value + step);
-  }, [atMax, interactive, setExternal, step, value]);
-
-  // Imperative ref.
+  }, [atMax, interactive, pressHaptic, setExternal, step, value]);
   _react.default.useImperativeHandle(ref, () => ({
     focus: () => inputRef.current?.focus(),
     blur: () => inputRef.current?.blur(),
@@ -167,23 +140,18 @@ const NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)((p
     repeatTimeoutRef.current = setTimeout(() => {
       repeatIntervalRef.current = setInterval(() => {
         if (direction === 'inc') {
-          // Read latest via closure of state via setExternal.
-          // Compute next by reading current value from props on each tick.
-          // Since closures capture, we rely on state updating between intervals.
           increment();
         } else {
           decrement();
         }
-      }, LONG_PRESS_INTERVAL);
-    }, LONG_PRESS_DELAY);
-  }, [clearRepeat, decrement, increment, interactive]);
+      }, longPressInterval);
+    }, longPressDelay);
+  }, [clearRepeat, decrement, increment, interactive, longPressDelay, longPressInterval]);
   const handleChangeText = (0, _react.useCallback)(text => {
     const cleaned = sanitizeTyped(text, allowDecimal);
     setDraft(cleaned);
-    // Don't push numeric value while user types intermediate states (e.g., '-' or '1.').
     const parsed = Number(cleaned);
     if (cleaned !== '' && cleaned !== '-' && cleaned !== '.' && Number.isFinite(parsed)) {
-      // Only push if within bounds; otherwise wait for blur to clamp.
       if (parsed >= min && parsed <= max) {
         if (parsed !== value) {
           onChange(roundToPrecision(parsed, allowDecimal ? precision : 0));
@@ -193,9 +161,9 @@ const NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)((p
   }, [allowDecimal, max, min, onChange, precision, value]);
   const handleBlur = (0, _react.useCallback)(() => {
     setEditing(false);
+    setFocused(false);
     const parsed = Number(draft);
     if (draft === '' || !Number.isFinite(parsed)) {
-      // Reset to the last known good value.
       setDraft(formatValue(value, allowDecimal, precision));
       return;
     }
@@ -208,27 +176,16 @@ const NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)((p
   }, [allowDecimal, draft, max, min, onChange, precision, value]);
   const handleFocus = (0, _react.useCallback)(() => {
     setEditing(true);
+    setFocused(true);
   }, []);
-  const minusBg = atMin || disabled ? theme.colors.surface.disabled : theme.colors.background.secondary;
-  const plusBg = atMax || disabled ? theme.colors.surface.disabled : theme.colors.background.secondary;
   const minusFg = atMin || disabled ? theme.colors.text.disabled : theme.colors.text.primary;
   const plusFg = atMax || disabled ? theme.colors.text.disabled : theme.colors.text.primary;
-  const inputBg = disabled ? theme.colors.surface.disabled : theme.colors.background.secondary;
-  const borderColor = error ? theme.colors.border.error : theme.colors.border.primary;
-  const buttonBaseStyle = {
-    width: sizeStyles.buttonSize,
-    height: sizeStyles.buttonSize,
-    borderRadius: sizeStyles.borderRadius,
-    borderWidth: 1,
-    borderColor,
-    alignItems: 'center',
-    justifyContent: 'center'
-  };
-  const renderButton = (type, onPress, disabledLocal, a11yLabel, bg, fg, glyph) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+  const stepperSize = sizeTokens.iconSize + 8;
+  const renderStepper = (type, onPress, disabledLocal, a11yLabel, fg, glyph) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
     onPress: onPress,
     onLongPress: () => startRepeating(type),
     onPressOut: clearRepeat,
-    delayLongPress: LONG_PRESS_DELAY,
+    delayLongPress: longPressDelay,
     disabled: disabledLocal,
     accessibilityRole: "button",
     accessibilityLabel: a11yLabel,
@@ -237,36 +194,37 @@ const NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)((p
     },
     style: ({
       pressed
-    }) => [buttonBaseStyle, {
-      backgroundColor: bg
+    }) => [{
+      width: stepperSize,
+      height: stepperSize,
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: stepperSize / 2
     }, pressed && !disabledLocal ? {
       backgroundColor: theme.colors.surface.pressed
-    } : null],
+    } : null, buttonStyle],
     testID: `${testID ?? 'numberinput'}-${type === 'inc' ? 'plus' : 'minus'}`,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: {
-        fontSize: sizeStyles.iconFontSize,
+        fontSize: sizeTokens.iconSize,
         color: fg,
         fontWeight: theme.typography.fontWeight.semibold,
-        lineHeight: sizeStyles.iconFontSize + 2
+        lineHeight: sizeTokens.iconSize + 2
       },
       children: glyph
     })
   });
   const accessibleInputLabel = accessibilityLabel ?? label ?? 'Number input';
-  const inputBlock = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [styles.row, {
-      columnGap: sizeStyles.gap
-    }],
-    children: [renderButton('dec', decrement, atMin || disabled, 'Decrease', minusBg, minusFg, '−'), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: [styles.inputContainer, {
-        minWidth: sizeStyles.inputMinWidth,
-        height: sizeStyles.inputHeight,
-        paddingHorizontal: sizeStyles.paddingHorizontal,
-        borderRadius: sizeStyles.borderRadius,
-        backgroundColor: inputBg,
-        borderColor
-      }],
+  const inputBlock = /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldBase.FieldBase, {
+    size: size,
+    disabled: disabled,
+    error: Boolean(error),
+    filled: true,
+    focused: focused,
+    leading: renderStepper('dec', decrement, atMin || disabled, 'Decrease', minusFg, '−'),
+    trailing: renderStepper('inc', increment, atMax || disabled, 'Increase', plusFg, '+'),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.inputRow,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
         ref: inputRef,
         value: draft,
@@ -296,19 +254,19 @@ const NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)((p
           if (e.nativeEvent.actionName === 'decrement') decrement();
         },
         style: [styles.input, {
-          fontSize: sizeStyles.fontSize,
-          color: disabled ? theme.colors.text.disabled : theme.colors.text.primary,
-          fontWeight: theme.typography.fontWeight.medium
+          fontSize: sizeTokens.fontSize,
+          color: fieldText.color,
+          ...fieldText.weightStyle
         }, inputStyle],
         ...textInputProps
       }), unit ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [styles.unit, {
-          fontSize: sizeStyles.fontSize,
-          color: theme.colors.text.tertiary
-        }],
+          fontSize: sizeTokens.fontSize,
+          color: fieldText.placeholderColor
+        }, unitStyle],
         children: unit
       }) : null]
-    }), renderButton('inc', increment, atMax || disabled, 'Increase', plusBg, plusFg, '+')]
+    })
   });
   const labelEl = label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
     style: [styles.label, {
@@ -328,7 +286,7 @@ const NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)((p
   }) : null;
   if (variant === 'horizontal') {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: [styles.horizontalContainer, style],
+      style: [styles.horizontalContainer, style, containerStyle],
       testID: testID,
       accessibilityState: {
         disabled
@@ -341,10 +299,8 @@ const NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)((p
       })]
     });
   }
-
-  // 'inline' and 'stacked' both stack label above the spinner row.
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: style,
+    style: [style, containerStyle],
     testID: testID,
     accessibilityState: {
       disabled
@@ -354,20 +310,18 @@ const NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)((p
 });
 NumberInput.displayName = 'NumberInput';
 const buildStyles = _theme => _reactNative.StyleSheet.create({
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  inputContainer: {
+  inputRow: {
+    flex: 1,
     flexDirection: 'row',
     alignItems: 'center',
-    borderWidth: 1,
-    flex: 0
+    justifyContent: 'center'
   },
   input: {
     flex: 1,
     textAlign: 'center',
-    padding: 0
+    padding: 0,
+    margin: 0,
+    includeFontPadding: false
   },
   unit: {
     marginLeft: 4