rnnovaui 0.8.7 → 0.8.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rnnovaui",
-  "version": "0.8.7",
+  "version": "0.8.8",
   "description": "",
   "main": "src/index.js",
   "react-native": "src/index.js",

package/src/components/RadioGroup/UIRadioGroup.js

@@ -12,6 +12,10 @@ import { Pressable, StyleSheet, Text, View } from "react-native";
 
 import { useUITheme } from "../../theme";
 
+/* =========================================================
+   CONSTANTS
+========================================================= */
+
 const RADIO_GROUP_ORIENTATIONS = {
   vertical: "vertical",
   horizontal: "horizontal",
@@ -23,6 +27,10 @@ const RADIO_GROUP_SIZES = {
   lg: "lg",
 };
 
+/* =========================================================
+   CONTEXT
+========================================================= */
+
 const RadioGroupContext = createContext(null);
 
 /* =========================================================
@@ -38,8 +46,6 @@ const UIRadioGroupComponent = forwardRef(function UIRadioGroup(
 
     onChange,
 
-    name,
-
     label,
     helperText,
     errorText,
@@ -55,7 +61,6 @@ const UIRadioGroupComponent = forwardRef(function UIRadioGroup(
     size = "md",
 
     gap = 12,
-    optionGap,
 
     style,
     labelStyle,
@@ -78,9 +83,8 @@ const UIRadioGroupComponent = forwardRef(function UIRadioGroup(
 
   const selectedValue = isControlled ? value : internalValue;
 
-  const resolvedOrientation = RADIO_GROUP_ORIENTATIONS[orientation]
-    ? orientation
-    : "vertical";
+  const resolvedOrientation =
+    orientation === "horizontal" ? "horizontal" : "vertical";
 
   const resolvedSize = RADIO_GROUP_SIZES[size] ? size : "md";
 
@@ -103,7 +107,7 @@ const UIRadioGroupComponent = forwardRef(function UIRadioGroup(
 
   const contextValue = useMemo(
     () => ({
-      value: selectedValue,
+      selectedValue,
 
       onChange: handleChange,
 
@@ -122,8 +126,10 @@ const UIRadioGroupComponent = forwardRef(function UIRadioGroup(
         {...props}
         ref={ref}
         testID={testID}
-        style={[styles.wrapper, style]}
+        style={[styles.container, style]}
       >
+        {/* GROUP LABEL */}
+
         {label ? (
           <Text
             style={[
@@ -138,7 +144,7 @@ const UIRadioGroupComponent = forwardRef(function UIRadioGroup(
               labelStyle,
             ]}
           >
-            {label}
+            {String(label)}
 
             {required ? (
               <Text
@@ -152,22 +158,32 @@ const UIRadioGroupComponent = forwardRef(function UIRadioGroup(
           </Text>
         ) : null}
 
+        {/* OPTIONS */}
+
         <View
           style={[
             styles.options,
 
             resolvedOrientation === "horizontal"
-              ? styles.horizontal
-              : styles.vertical,
+              ? styles.optionsHorizontal
+              : styles.optionsVertical,
 
             {
-              gap: optionGap ?? gap,
+              gap,
             },
           ]}
         >
-          {children}
+          {React.Children.map(children, (child) => {
+            if (!React.isValidElement(child)) {
+              return null;
+            }
+
+            return child;
+          })}
         </View>
 
+        {/* ERROR */}
+
         {hasError ? (
           <Text
             style={[
@@ -180,7 +196,7 @@ const UIRadioGroupComponent = forwardRef(function UIRadioGroup(
               errorStyle,
             ]}
           >
-            {errorText}
+            {String(errorText)}
           </Text>
         ) : helperText ? (
           <Text
@@ -194,7 +210,7 @@ const UIRadioGroupComponent = forwardRef(function UIRadioGroup(
               helperStyle,
             ]}
           >
-            {helperText}
+            {String(helperText)}
           </Text>
         ) : null}
       </View>
@@ -208,8 +224,10 @@ const UIRadioGroupComponent = forwardRef(function UIRadioGroup(
 
 const UIRadioOptionComponent = function UIRadioOptionComponent({
   value,
+
   label = "",
-  description,
+
+  description = "",
 
   disabled = false,
 
@@ -232,16 +250,16 @@ const UIRadioOptionComponent = function UIRadioOptionComponent({
   }
 
   const {
-    value: selectedValue,
+    selectedValue,
     onChange,
     disabled: groupDisabled,
     size,
     error,
   } = context;
 
-  const checked = selectedValue === value;
+  const selected = selectedValue === value;
 
-  const isDisabled = groupDisabled || disabled;
+  const isDisabled = Boolean(groupDisabled || disabled);
 
   const radioSize = getRadioSize(size);
 
@@ -256,112 +274,116 @@ const UIRadioOptionComponent = function UIRadioOptionComponent({
   }, [isDisabled, onChange, value, onPress]);
 
   return (
-    <View style={[styles.optionWrapper, style]}>
-      <Pressable
-        {...props}
-        onPress={handlePress}
-        disabled={isDisabled}
-        accessibilityRole="radio"
-        accessibilityState={{
-          checked,
-          disabled: isDisabled,
-        }}
-        style={({ pressed }) => [
-          styles.optionPressable,
+    <Pressable
+      {...props}
+      onPress={handlePress}
+      disabled={isDisabled}
+      accessibilityRole="radio"
+      accessibilityState={{
+        checked: selected,
+
+        disabled: isDisabled,
+      }}
+      style={({ pressed }) => [
+        styles.option,
+
+        {
+          opacity: isDisabled ? 0.5 : pressed ? 0.7 : 1,
+        },
+
+        style,
+      ]}
+    >
+      {/* RADIO */}
+
+      <View
+        style={[
+          styles.radio,
 
           {
-            opacity: isDisabled ? 0.5 : pressed ? 0.7 : 1,
+            width: radioSize.outer,
+
+            height: radioSize.outer,
+
+            borderRadius: radioSize.outer / 2,
+
+            borderWidth: selected ? 2 : 1.5,
+
+            borderColor: error
+              ? colors.danger || "#DC2626"
+              : selected
+                ? colors.primary || "#FF5A1F"
+                : colors.borderStrong || "#D4D4D4",
           },
         ]}
       >
-        {/* RADIO CIRCLE */}
-        <View
-          style={[
-            styles.radio,
+        {selected ? (
+          <View
+            style={[
+              styles.radioDot,
 
-            {
-              width: radioSize.outer,
+              {
+                width: radioSize.inner,
 
-              height: radioSize.outer,
+                height: radioSize.inner,
 
-              borderRadius: radioSize.outer / 2,
+                borderRadius: radioSize.inner / 2,
 
-              borderColor: error
-                ? colors.danger || "#DC2626"
-                : checked
-                  ? colors.primary || "#FF5A1F"
-                  : colors.borderStrong || "#D4D4D4",
+                backgroundColor: error
+                  ? colors.danger || "#DC2626"
+                  : colors.primary || "#FF5A1F",
+              },
+            ]}
+          />
+        ) : null}
+      </View>
 
-              borderWidth: checked ? 2 : 1.5,
-            },
-          ]}
-        >
-          {checked ? (
-            <View
-              style={[
-                styles.radioDot,
+      {/* LABEL + DESCRIPTION */}
 
-                {
-                  width: radioSize.inner,
+      <View style={styles.content}>
+        {label !== null && label !== undefined && String(label).length > 0 ? (
+          <Text
+            style={[
+              styles.optionLabel,
 
-                  height: radioSize.inner,
+              {
+                color: isDisabled
+                  ? colors.textDisabled || "#A3A3A3"
+                  : colors.text || "#111111",
 
-                  borderRadius: radioSize.inner / 2,
+                fontSize: radioSize.fontSize,
 
-                  backgroundColor: error
-                    ? colors.danger || "#DC2626"
-                    : colors.primary || "#FF5A1F",
-                },
-              ]}
-            />
-          ) : null}
-        </View>
+                lineHeight: radioSize.lineHeight,
+              },
 
-        {/* TEXT AREA */}
-        <View style={styles.textContainer}>
-          {label !== "" ? (
-            <Text
-              numberOfLines={0}
-              style={[
-                styles.optionLabel,
-
-                {
-                  color: isDisabled
-                    ? colors.textDisabled || "#A3A3A3"
-                    : colors.text || "#111111",
-
-                  fontSize: radioSize.fontSize,
-
-                  lineHeight: radioSize.lineHeight,
-                },
-
-                labelStyle,
-              ]}
-            >
-              {String(label)}
-            </Text>
-          ) : null}
-
-          {description ? (
-            <Text
-              style={[
-                styles.description,
-
-                {
-                  color: isDisabled
-                    ? colors.textDisabled || "#A3A3A3"
-                    : colors.textSecondary || "#525252",
-                },
-
-                descriptionStyle,
-              ]}
-            >
-              {String(description)}
-            </Text>
-          ) : null}
-        </View>
-      </Pressable>
-    </View>
+              labelStyle,
+            ]}
+          >
+            {String(label)}
+          </Text>
+        ) : null}
+
+        {description !== null &&
+        description !== undefined &&
+        String(description).length > 0 ? (
+          <Text
+            style={[
+              styles.description,
+
+              {
+                color: isDisabled
+                  ? colors.textDisabled || "#A3A3A3"
+                  : colors.textSecondary || "#525252",
+              },
+
+              descriptionStyle,
+            ]}
+          >
+            {String(description)}
+          </Text>
+        ) : null}
+      </View>
+    </Pressable>
   );
 };
 
@@ -403,7 +425,7 @@ function getRadioSize(size) {
 ========================================================= */
 
 const styles = StyleSheet.create({
-  wrapper: {
+  container: {
     width: "100%",
   },
 
@@ -423,30 +445,38 @@ const styles = StyleSheet.create({
     width: "100%",
   },
 
-  vertical: {
+  optionsVertical: {
     flexDirection: "column",
+
+    alignItems: "stretch",
   },
 
-  horizontal: {
+  optionsHorizontal: {
     flexDirection: "row",
 
     flexWrap: "wrap",
 
     alignItems: "flex-start",
-  },
 
-  optionWrapper: {
-    width: "100%",
+    justifyContent: "flex-start",
   },
 
-  optionPressable: {
-    width: "100%",
-
-    minHeight: 34,
-
+  option: {
     flexDirection: "row",
 
     alignItems: "flex-start",
+
+    /*
+     * IMPORTANT:
+     *
+     * No width: "100%" here.
+     *
+     * That was the reason horizontal
+     * layout was not working.
+     */
+    flexShrink: 0,
+
+    minHeight: 34,
   },
 
   radio: {
@@ -461,8 +491,8 @@ const styles = StyleSheet.create({
 
   radioDot: {},
 
-  textContainer: {
-    flex: 1,
+  content: {
+    flexShrink: 1,
 
     minWidth: 0,
 

package/src/components/Slider/UISlider.js

@@ -12,6 +12,10 @@ import { Animated, PanResponder, StyleSheet, Text, View } from "react-native";
 
 import { useUITheme } from "../../theme";
 
+// ============================================================
+// CONSTANTS
+// ============================================================
+
 const UISLIDER_SIZES = {
   sm: "sm",
   md: "md",
@@ -23,11 +27,15 @@ const UISLIDER_ORIENTATIONS = {
   vertical: "vertical",
 };
 
+// ============================================================
+// COMPONENT
+// ============================================================
+
 const UISliderComponent = forwardRef(function UISlider(
   {
-    // -----------------------------------------
+    // ------------------------------------------------------
     // VALUE
-    // -----------------------------------------
+    // ------------------------------------------------------
 
     value,
     defaultValue = 0,
@@ -43,104 +51,138 @@ const UISliderComponent = forwardRef(function UISlider(
     onSlidingStart,
     onSlidingComplete,
 
-    // -----------------------------------------
+    // ------------------------------------------------------
     // LABEL
-    // -----------------------------------------
+    // ------------------------------------------------------
 
     label,
+
     showValue = false,
+
     valueFormatter,
 
     showMinMax = false,
+
     minLabel,
     maxLabel,
 
-    // -----------------------------------------
+    // ------------------------------------------------------
     // SIZE
-    // -----------------------------------------
+    // ------------------------------------------------------
 
     size = "md",
 
     orientation = "horizontal",
 
     width = "100%",
+
     height = 220,
 
     thumbSize,
+
     trackHeight,
 
-    // -----------------------------------------
+    // ------------------------------------------------------
     // COLORS
-    // -----------------------------------------
+    // ------------------------------------------------------
 
     minimumTrackColor,
+
     maximumTrackColor,
+
     thumbColor,
 
-    // -----------------------------------------
+    // ------------------------------------------------------
     // STATE
-    // -----------------------------------------
+    // ------------------------------------------------------
 
     disabled = false,
 
     error = false,
+
     errorText,
 
     helperText,
 
-    // -----------------------------------------
+    // ------------------------------------------------------
     // STYLES
-    // -----------------------------------------
+    // ------------------------------------------------------
 
     containerStyle,
+
     labelStyle,
+
     valueStyle,
+
     minMaxStyle,
+
     helperStyle,
+
     errorStyle,
 
     trackStyle,
+
     thumbStyle,
 
-    // -----------------------------------------
+    // ------------------------------------------------------
     // ANIMATION
-    // -----------------------------------------
+    // ------------------------------------------------------
 
     animated = false,
 
     animationDuration = 180,
 
     animateThumb = true,
+
     animateTrack = true,
+
     animatePress = true,
 
     pressScale = 1.12,
 
-    // -----------------------------------------
+    // ------------------------------------------------------
     // ACCESSIBILITY
-    // -----------------------------------------
+    // ------------------------------------------------------
 
     accessibilityLabel,
+
     testID,
 
+    // ------------------------------------------------------
+    // REST
+    // ------------------------------------------------------
+
     ...props
   },
+
   ref,
 ) {
+  // ========================================================
+  // THEME
+  // ========================================================
+
   const { theme } = useUITheme();
 
   const colors = theme?.colors || {};
 
-  // -----------------------------------------
-  // SAFE VALUES
-  // -----------------------------------------
+  // ========================================================
+  // SAFE MIN
+  // ========================================================
 
   const safeMin = useMemo(() => {
     const numeric = Number(min);
 
-    return Number.isFinite(numeric) ? numeric : 0;
+    if (Number.isFinite(numeric)) {
+      return numeric;
+    }
+
+    return 0;
   }, [min]);
 
+  // ========================================================
+  // SAFE MAX
+  // ========================================================
+
   const safeMax = useMemo(() => {
     const numeric = Number(max);
 
@@ -151,6 +193,10 @@ const UISliderComponent = forwardRef(function UISlider(
     return safeMin + 1;
   }, [max, safeMin]);
 
+  // ========================================================
+  // SAFE STEP
+  // ========================================================
+
   const safeStep = useMemo(() => {
     const numeric = Number(step);
 
@@ -161,18 +207,30 @@ const UISliderComponent = forwardRef(function UISlider(
     return 1;
   }, [step]);
 
+  // ========================================================
+  // RANGE
+  // ========================================================
+
   const range = safeMax - safeMin;
 
-  // -----------------------------------------
+  // ========================================================
   // SIZE
-  // -----------------------------------------
+  // ========================================================
 
   const safeSize = UISLIDER_SIZES[size] ? size : UISLIDER_SIZES.md;
 
+  // ========================================================
+  // ORIENTATION
+  // ========================================================
+
   const safeOrientation = UISLIDER_ORIENTATIONS[orientation]
     ? orientation
     : UISLIDER_ORIENTATIONS.horizontal;
 
+  // ========================================================
+  // DIMENSIONS
+  // ========================================================
+
   const dimensions = useMemo(() => getDimensions(safeSize), [safeSize]);
 
   const resolvedThumbSize = Number.isFinite(Number(thumbSize))
@@ -183,9 +241,9 @@ const UISliderComponent = forwardRef(function UISlider(
     ? Number(trackHeight)
     : dimensions.trackHeight;
 
-  // -----------------------------------------
-  // NORMALIZE
-  // -----------------------------------------
+  // ========================================================
+  // NORMALIZE VALUE
+  // ========================================================
 
   const normalizeValue = useCallback(
     (input) => {
@@ -203,31 +261,50 @@ const UISliderComponent = forwardRef(function UISlider(
 
       return roundValue(Math.min(Math.max(snapped, safeMin), safeMax));
     },
+
     [safeMin, safeMax, safeStep],
   );
 
-  // -----------------------------------------
-  // VALUE STATE
-  // -----------------------------------------
+  // ========================================================
+  // INITIAL VALUE
+  // ========================================================
 
   const initialValue = normalizeValue(
     value !== undefined ? value : defaultValue,
   );
 
+  // ========================================================
+  // INTERNAL VALUE
+  // ========================================================
+
   const [internalValue, setInternalValue] = useState(initialValue);
 
+  // ========================================================
+  // CURRENT VALUE
+  // ========================================================
+
   const currentValue =
     value !== undefined ? normalizeValue(value) : internalValue;
 
+  // ========================================================
+  // SYNC CONTROLLED VALUE
+  // ========================================================
+
   useEffect(() => {
     if (value !== undefined) {
       setInternalValue(normalizeValue(value));
     }
   }, [value, normalizeValue]);
 
-  // -----------------------------------------
-  // MEASUREMENT
-  // -----------------------------------------
+  // ========================================================
+  // PERCENTAGE
+  // ========================================================
+
+  const percentage = range > 0 ? ((currentValue - safeMin) / range) * 100 : 0;
+
+  // ========================================================
+  // TRACK MEASUREMENT
+  // ========================================================
 
   const trackLength = useRef(1);
 
@@ -235,8 +312,11 @@ const UISliderComponent = forwardRef(function UISlider(
 
   const handleLayout = useCallback(
     (event) => {
-      const { width: layoutWidth, height: layoutHeight } =
-        event.nativeEvent.layout;
+      const {
+        width: layoutWidth,
+
+        height: layoutHeight,
+      } = event.nativeEvent.layout;
 
       const length =
         safeOrientation === UISLIDER_ORIENTATIONS.horizontal
@@ -249,18 +329,13 @@ const UISliderComponent = forwardRef(function UISlider(
 
       setMeasuredLength(safeLength);
     },
+
     [safeOrientation],
   );
 
-  // -----------------------------------------
-  // PERCENTAGE
-  // -----------------------------------------
-
-  const percentage = range > 0 ? ((currentValue - safeMin) / range) * 100 : 0;
-
-  // -----------------------------------------
+  // ========================================================
   // ANIMATED VALUES
-  // -----------------------------------------
+  // ========================================================
 
   const thumbProgress = useRef(new Animated.Value(percentage)).current;
 
@@ -268,14 +343,25 @@ const UISliderComponent = forwardRef(function UISlider(
 
   const thumbScale = useRef(new Animated.Value(1)).current;
 
+  // ========================================================
+  // PREVIOUS PERCENTAGE
+  // ========================================================
+
   const previousPercentage = useRef(percentage);
 
-  // -----------------------------------------
-  // KEEP ANIMATION DRIVER CONSISTENT
-  // -----------------------------------------
+  // ========================================================
+  // ANIMATION FUNCTION
+  // ========================================================
 
   const runTiming = useCallback(
     (animatedValue, toValue) => {
+      /*
+       * Animation disabled.
+       *
+       * Immediately update the
+       * Animated.Value.
+       */
+
       if (!animated) {
         animatedValue.stopAnimation();
 
@@ -290,22 +376,23 @@ const UISliderComponent = forwardRef(function UISlider(
         duration: Math.max(0, Number(animationDuration) || 0),
 
         /*
-         * IMPORTANT:
-         *
-         * Every Animated.Value in this
-         * component uses JS driver.
+         * VERY IMPORTANT
          *
-         * Do NOT change this to true.
+         * Keep this false for
+         * ALL Animated.Values
+         * in this component.
          */
+
         useNativeDriver: false,
       }).start();
     },
+
     [animated, animationDuration],
   );
 
-  // -----------------------------------------
-  // PROGRAMMATIC VALUE CHANGE
-  // -----------------------------------------
+  // ========================================================
+  // PROGRAMMATIC ANIMATION
+  // ========================================================
 
   useEffect(() => {
     const nextPercentage =
@@ -317,10 +404,9 @@ const UISliderComponent = forwardRef(function UISlider(
 
     previousPercentage.current = nextPercentage;
 
-    /*
-     * During a programmatic value change,
-     * animate only when requested.
-     */
+    // ------------------------------------------------------
+    // THUMB
+    // ------------------------------------------------------
 
     if (animated && animateThumb) {
       runTiming(thumbProgress, nextPercentage);
@@ -330,6 +416,10 @@ const UISliderComponent = forwardRef(function UISlider(
       thumbProgress.setValue(nextPercentage);
     }
 
+    // ------------------------------------------------------
+    // TRACK
+    // ------------------------------------------------------
+
     if (animated && animateTrack) {
       runTiming(trackProgress, nextPercentage);
     } else {
@@ -339,22 +429,27 @@ const UISliderComponent = forwardRef(function UISlider(
     }
   }, [
     currentValue,
+
     safeMin,
+
     range,
 
     animated,
+
     animateThumb,
+
     animateTrack,
 
     runTiming,
 
     thumbProgress,
+
     trackProgress,
   ]);
 
-  // -----------------------------------------
+  // ========================================================
   // COLORS
-  // -----------------------------------------
+  // ========================================================
 
   const resolvedMinimumTrackColor =
     minimumTrackColor || colors.primary || "#FF5A1F";
@@ -364,9 +459,9 @@ const UISliderComponent = forwardRef(function UISlider(
 
   const resolvedThumbColor = thumbColor || colors.primary || "#FF5A1F";
 
-  // -----------------------------------------
-  // CHANGE
-  // -----------------------------------------
+  // ========================================================
+  // EMIT CHANGE
+  // ========================================================
 
   const emitChange = useCallback(
     (nextValue) => {
@@ -380,12 +475,13 @@ const UISliderComponent = forwardRef(function UISlider(
 
       return normalized;
     },
+
     [normalizeValue, value, onChange],
   );
 
-  // -----------------------------------------
-  // POSITION -> VALUE
-  // -----------------------------------------
+  // ========================================================
+  // POSITION TO VALUE
+  // ========================================================
 
   const positionToValue = useCallback(
     (position) => {
@@ -395,23 +491,35 @@ const UISliderComponent = forwardRef(function UISlider(
 
       ratio = Math.max(0, Math.min(ratio, 1));
 
+      /*
+       * Vertical slider:
+       *
+       * top = max
+       * bottom = min
+       */
+
       if (safeOrientation === UISLIDER_ORIENTATIONS.vertical) {
         ratio = 1 - ratio;
       }
 
       return safeMin + ratio * range;
     },
+
     [safeOrientation, safeMin, range],
   );
 
-  // -----------------------------------------
-  // DRAG UPDATE
-  // -----------------------------------------
+  // ========================================================
+  // DRAGGING
+  // ========================================================
 
   const sliding = useRef(false);
 
   const lastGestureValue = useRef(currentValue);
 
+  // ========================================================
+  // UPDATE FROM POSITION
+  // ========================================================
+
   const updateFromPosition = useCallback(
     (position) => {
       const nextValue = positionToValue(position);
@@ -421,60 +529,37 @@ const UISliderComponent = forwardRef(function UISlider(
       lastGestureValue.current = normalized;
 
       /*
-       * IMPORTANT:
-       *
-       * While dragging we update the
-       * Animated.Values directly.
+       * Update animation values
+       * immediately during drag.
        *
-       * We do NOT start timing animations
-       * for every finger movement.
+       * We DO NOT run timing on
+       * every finger movement.
        */
+
       const nextPercentage =
         range > 0 ? ((normalized - safeMin) / range) * 100 : 0;
 
-      if (animateThumb || animated) {
-        thumbProgress.stopAnimation();
+      thumbProgress.stopAnimation();
 
-        thumbProgress.setValue(nextPercentage);
-      }
+      trackProgress.stopAnimation();
 
-      if (animateTrack || animated) {
-        trackProgress.stopAnimation();
+      thumbProgress.setValue(nextPercentage);
 
-        trackProgress.setValue(nextPercentage);
-      }
+      trackProgress.setValue(nextPercentage);
     },
-    [
-      positionToValue,
-      emitChange,
-      range,
-      safeMin,
-
-      animateThumb,
-      animateTrack,
-      animated,
 
-      thumbProgress,
-      trackProgress,
-    ],
+    [positionToValue, emitChange, range, safeMin, thumbProgress, trackProgress],
   );
 
-  // -----------------------------------------
-  // PRESS ANIMATION
-  // -----------------------------------------
+  // ========================================================
+  // PRESS IN ANIMATION
+  // ========================================================
 
   const animatePressIn = useCallback(() => {
     if (!animated || !animatePress) {
       return;
     }
 
-    /*
-     * IMPORTANT:
-     *
-     * useNativeDriver MUST remain false
-     * because thumbScale uses the same
-     * JS animation system as the slider.
-     */
     Animated.spring(thumbScale, {
       toValue: pressScale,
 
@@ -482,10 +567,18 @@ const UISliderComponent = forwardRef(function UISlider(
 
       tension: 120,
 
+      /*
+       * MUST REMAIN FALSE.
+       */
+
       useNativeDriver: false,
     }).start();
   }, [animated, animatePress, pressScale, thumbScale]);
 
+  // ========================================================
+  // PRESS OUT ANIMATION
+  // ========================================================
+
   const animatePressOut = useCallback(() => {
     if (!animated || !animatePress) {
       return;
@@ -498,13 +591,17 @@ const UISliderComponent = forwardRef(function UISlider(
 
       tension: 120,
 
+      /*
+       * MUST REMAIN FALSE.
+       */
+
       useNativeDriver: false,
     }).start();
   }, [animated, animatePress, thumbScale]);
 
-  // -----------------------------------------
+  // ========================================================
   // PAN RESPONDER
-  // -----------------------------------------
+  // ========================================================
 
   const panResponder = useMemo(
     () =>
@@ -581,27 +678,33 @@ const UISliderComponent = forwardRef(function UISlider(
           onSlidingComplete?.(finalValue);
         },
       }),
+
     [
       disabled,
+
       currentValue,
 
       safeOrientation,
 
       animatePressIn,
+
       animatePressOut,
 
       updateFromPosition,
 
       onChangeStart,
+
       onSlidingStart,
+
       onChangeEnd,
+
       onSlidingComplete,
     ],
   );
 
-  // -----------------------------------------
+  // ========================================================
   // DISPLAY VALUE
-  // -----------------------------------------
+  // ========================================================
 
   const displayValue = valueFormatter
     ? valueFormatter(currentValue)
@@ -611,35 +714,15 @@ const UISliderComponent = forwardRef(function UISlider(
 
   const displayMax = maxLabel ?? formatValue(safeMax);
 
-  // -----------------------------------------
-  // TRACK LENGTH
-  // -----------------------------------------
+  // ========================================================
+  // USABLE LENGTH
+  // ========================================================
 
   const usableLength = Math.max(measuredLength - resolvedThumbSize, 0);
 
-  // -----------------------------------------
-  // ACCESSIBILITY
-  // -----------------------------------------
-
-  const increase = useCallback(() => {
-    if (disabled) {
-      return;
-    }
-
-    emitChange(currentValue + safeStep);
-  }, [disabled, emitChange, currentValue, safeStep]);
-
-  const decrease = useCallback(() => {
-    if (disabled) {
-      return;
-    }
-
-    emitChange(currentValue - safeStep);
-  }, [disabled, emitChange, currentValue, safeStep]);
-
-  // -----------------------------------------
+  // ========================================================
   // RENDER
-  // -----------------------------------------
+  // ========================================================
 
   return (
     <View
@@ -672,9 +755,9 @@ const UISliderComponent = forwardRef(function UISlider(
         now: currentValue,
       }}
     >
-      {/* -------------------------------- */}
+      {/* ================================================= */}
       {/* HEADER */}
-      {/* -------------------------------- */}
+      {/* ================================================= */}
 
       {label || showValue ? (
         <View style={styles.header}>
@@ -718,9 +801,9 @@ const UISliderComponent = forwardRef(function UISlider(
         </View>
       ) : null}
 
-      {/* -------------------------------- */}
+      {/* ================================================= */}
       {/* SLIDER */}
-      {/* -------------------------------- */}
+      {/* ================================================= */}
 
       <View
         style={[
@@ -756,9 +839,9 @@ const UISliderComponent = forwardRef(function UISlider(
                 },
           ]}
         >
-          {/* -------------------------------- */}
-          {/* MAXIMUM TRACK */}
-          {/* -------------------------------- */}
+          {/* ============================================ */}
+          {/* MAX TRACK */}
+          {/* ============================================ */}
 
           <View
             pointerEvents="none"
@@ -795,9 +878,9 @@ const UISliderComponent = forwardRef(function UISlider(
             ]}
           />
 
-          {/* -------------------------------- */}
+          {/* ============================================ */}
           {/* ACTIVE TRACK */}
-          {/* -------------------------------- */}
+          {/* ============================================ */}
 
           <Animated.View
             pointerEvents="none"
@@ -844,9 +927,9 @@ const UISliderComponent = forwardRef(function UISlider(
             ]}
           />
 
-          {/* -------------------------------- */}
+          {/* ============================================ */}
           {/* THUMB */}
-          {/* -------------------------------- */}
+          {/* ============================================ */}
 
           <Animated.View
             pointerEvents="none"
@@ -897,9 +980,9 @@ const UISliderComponent = forwardRef(function UISlider(
         </View>
       </View>
 
-      {/* -------------------------------- */}
+      {/* ================================================= */}
       {/* MIN / MAX */}
-      {/* -------------------------------- */}
+      {/* ================================================= */}
 
       {showMinMax ? (
         <View
@@ -941,9 +1024,9 @@ const UISliderComponent = forwardRef(function UISlider(
         </View>
       ) : null}
 
-      {/* -------------------------------- */}
+      {/* ================================================= */}
       {/* ERROR / HELPER */}
-      {/* -------------------------------- */}
+      {/* ================================================= */}
 
       {error || errorText ? (
         <Text
@@ -974,33 +1057,13 @@ const UISliderComponent = forwardRef(function UISlider(
           {helperText}
         </Text>
       ) : null}
-
-      {/* -------------------------------- */}
-      {/* ACCESSIBILITY BUTTONS */}
-      {/* -------------------------------- */}
-
-      {!disabled ? (
-        <View style={styles.accessibilityActions}>
-          <Pressable
-            onPress={decrease}
-            accessibilityRole="button"
-            accessibilityLabel="Decrease slider value"
-          />
-
-          <Pressable
-            onPress={increase}
-            accessibilityRole="button"
-            accessibilityLabel="Increase slider value"
-          />
-        </View>
-      ) : null}
     </View>
   );
 });
 
-// ======================================================
+// ============================================================
 // HELPERS
-// ======================================================
+// ============================================================
 
 function getDimensions(size) {
   switch (size) {
@@ -1017,6 +1080,7 @@ function getDimensions(size) {
       };
 
     case UISLIDER_SIZES.md:
+
     default:
       return {
         thumbSize: 22,
@@ -1025,6 +1089,10 @@ function getDimensions(size) {
   }
 }
 
+// ============================================================
+// FORMAT VALUE
+// ============================================================
+
 function formatValue(value) {
   if (Number.isInteger(value)) {
     return String(value);
@@ -1033,13 +1101,17 @@ function formatValue(value) {
   return String(Number(Number(value).toFixed(2)));
 }
 
+// ============================================================
+// ROUND
+// ============================================================
+
 function roundValue(value) {
   return Number(Number(value).toFixed(10));
 }
 
-// ======================================================
+// ============================================================
 // STYLES
-// ======================================================
+// ============================================================
 
 const styles = StyleSheet.create({
   container: {
@@ -1146,20 +1218,12 @@ const styles = StyleSheet.create({
 
     includeFontPadding: false,
   },
-
-  accessibilityActions: {
-    position: "absolute",
-
-    width: 1,
-
-    height: 1,
-
-    opacity: 0,
-
-    overflow: "hidden",
-  },
 });
 
+// ============================================================
+// EXPORT
+// ============================================================
+
 export const UISlider = memo(UISliderComponent);
 
 UISlider.displayName = "UISlider";