fix: add limit check with warning

Author: maciej.lodygowski

package/android/src/main/java/com/reactnativecommunity/slider/ReactSlider.java

@@ -11,6 +11,7 @@
 import android.graphics.BitmapFactory;
 import android.graphics.drawable.BitmapDrawable;
 import android.os.Build;
+import android.util.Log;
 import android.util.AttributeSet;
 import android.view.accessibility.AccessibilityEvent;
 import android.view.accessibility.AccessibilityManager;
@@ -105,15 +106,13 @@ private void disableStateListAnimatorIfNeeded() {
   }
 
   /*package*/ int getValidProgressValue(int progress) {
-      if (getLowerLimit() <= getUpperLimit()) {
-        if (progress < getLowerLimit()) {
-          progress = getLowerLimit();
-        } else if (progress > getUpperLimit()) {
-          progress = getUpperLimit();
-        }
+      if (progress < getLowerLimit()) {
+        progress = getLowerLimit();
+      } else if (progress > getUpperLimit()) {
+        progress = getUpperLimit();
       }
       return progress;
-    }
+  }
 
   /* package */ void setValue(double value) {
     mValue = value;
@@ -233,16 +232,28 @@ private void updateAll() {
     updateValue();
   }
 
-  /** Update limit based on props limit, max and min */
+  /** Update limit based on props limit, max and min
+   * Fallback to upper limit if invalid configuration provided
+  */
   private void updateLowerLimit() {
     double limit = Math.max(mRealLowerLimit, mMinValue);
-    mLowerLimit = (int) Math.round((limit - mMinValue) / (mMaxValue - mMinValue) * getTotalSteps());
+    int lowerLimit = (int) Math.round((limit - mMinValue) / (mMaxValue - mMinValue) * getTotalSteps());
+    if(lowerLimit > mUpperLimit) {
+      Log.w("Invalid configuration", "reverting lower limit to upper limit");
+    }
+    mLowerLimit = Math.min(lowerLimit, mUpperLimit);
   }
 
-  /** Update limit based on props limit, max and min */
+  /** Update limit based on props limit, max and min
+    * Fallback to lower limit if invalid configuration provided
+  */
   private void updateUpperLimit() {
     double limit = Math.min(mRealUpperLimit, mMaxValue);
-    mUpperLimit = (int) Math.round((limit - mMinValue) / (mMaxValue - mMinValue) * getTotalSteps());
+    int upperLimit = (int) Math.round((limit - mMinValue) / (mMaxValue - mMinValue) * getTotalSteps());
+    if(mLowerLimit > upperLimit) {
+      Log.w("Invalid configuration", "reverting upper limit to equal to lower limit");
+    }
+    mUpperLimit = Math.max(upperLimit, mLowerLimit);
   }
 
   /** Update value only (optimization in case only value is set). */

package/ios/RNCSlider.m

@@ -14,6 +14,14 @@ @implementation RNCSlider
   bool _maximumTrackImageSet;
 }
 
+- (instancetype)init {
+  if (self = [super init]) {
+      _upperLimit = FLT_MAX;
+      _lowerLimit = FLT_MIN;
+  }
+  return self;
+}
+
 - (instancetype)initWithFrame:(CGRect)frame
 {
     return [super initWithFrame:frame];
@@ -46,7 +54,7 @@ - (void)setupAccessibility:(float)value
     if (sliderValue && [sliderValue intValue] == 1) {
       spokenUnits = [spokenUnits substringToIndex:stringLength-1];
     }
-    
+
     self.accessibilityValue = [NSString stringWithFormat:@"%@ %@", sliderValue, spokenUnits];
   }
 }

package/ios/RNCSliderComponentView.mm

@@ -47,12 +47,12 @@ - (instancetype)initWithFrame:(CGRect)frame
          forControlEvents:(UIControlEventTouchUpInside |
                            UIControlEventTouchUpOutside |
                            UIControlEventTouchCancel)];
-        
+
         UITapGestureRecognizer *tapGesturer;
         tapGesturer = [[UITapGestureRecognizer alloc] initWithTarget: self action:@selector(tapHandler:)];
         [tapGesturer setNumberOfTapsRequired: 1];
         [slider addGestureRecognizer:tapGesturer];
-        
+
         slider.value = (float)defaultProps->value;
         self.contentView = slider;
     }
@@ -65,12 +65,12 @@ - (void)tapHandler:(UITapGestureRecognizer *)gesture {
     }
     RNCSlider *slider = (RNCSlider *)gesture.view;
     slider.isSliding = _isSliding;
-    
+
     // Ignore this tap if in the middle of a slide.
     if (_isSliding) {
         return;
     }
-    
+
     if (!slider.tapToSeek) {
         return;
     }
@@ -88,14 +88,14 @@ - (void)tapHandler:(UITapGestureRecognizer *)gesture {
     }
 
     [slider setValue:[slider discreteValue:value] animated: YES];
-    
+
     std::dynamic_pointer_cast<const RNCSliderEventEmitter>(_eventEmitter)
     ->onRNCSliderSlidingStart(RNCSliderEventEmitter::OnRNCSliderSlidingStart{.value = static_cast<Float>(slider.lastValue)});
-    
+
     // Trigger onValueChange to address https://github.com/react-native-community/react-native-slider/issues/212
     std::dynamic_pointer_cast<const RNCSliderEventEmitter>(_eventEmitter)
     ->onRNCSliderValueChange(RNCSliderEventEmitter::OnRNCSliderValueChange{.value = static_cast<Float>(slider.value)});
-    
+
     std::dynamic_pointer_cast<const RNCSliderEventEmitter>(_eventEmitter)
     ->onRNCSliderSlidingComplete(RNCSliderEventEmitter::OnRNCSliderSlidingComplete{.value = static_cast<Float>(slider.value)});
 }
@@ -122,7 +122,7 @@ - (void)sliderTouchEnd:(RNCSlider *)sender
 - (void)RNCSendSliderEvent:(RNCSlider *)sender withContinuous:(BOOL)continuous isSlidingStart:(BOOL)isSlidingStart
 {
     float value = [sender discreteValue:sender.value];
-    
+
     if (value < sender.lowerLimit) {
         value = sender.lowerLimit;
         [sender setValue:value animated:NO];
@@ -134,7 +134,7 @@ - (void)RNCSendSliderEvent:(RNCSlider *)sender withContinuous:(BOOL)continuous i
     if(!sender.isSliding) {
         [sender setValue:value animated:NO];
     }
-    
+
     if (continuous) {
         if (sender.lastValue != value)  {
             std::dynamic_pointer_cast<const RNCSliderEventEmitter>(_eventEmitter)
@@ -150,15 +150,15 @@ - (void)RNCSendSliderEvent:(RNCSlider *)sender withContinuous:(BOOL)continuous i
             ->onRNCSliderSlidingStart(RNCSliderEventEmitter::OnRNCSliderSlidingStart{.value = static_cast<Float>(value)});
         }
     }
-    
+
     sender.lastValue = value;
 }
 
 - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &)oldProps
 {
     const auto &oldScreenProps = *std::static_pointer_cast<const RNCSliderProps>(_props);
     const auto &newScreenProps = *std::static_pointer_cast<const RNCSliderProps>(props);
-    
+
     if (oldScreenProps.value != newScreenProps.value) {
         if (!slider.isSliding) {
             slider.value = newScreenProps.value;
@@ -176,12 +176,7 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
     if (oldScreenProps.maximumValue != newScreenProps.maximumValue) {
         [slider setMaximumValue:newScreenProps.maximumValue];
     }
-    if (oldScreenProps.lowerLimit != newScreenProps.lowerLimit) {
-        slider.lowerLimit = newScreenProps.lowerLimit;
-    }
-    if (oldScreenProps.upperLimit != newScreenProps.upperLimit) {
-        slider.upperLimit = newScreenProps.upperLimit;
-    }
+    updateLimits(slider, newScreenProps.lowerLimit, newScreenProps.upperLimit);
     if (oldScreenProps.tapToSeek != newScreenProps.tapToSeek) {
         slider.tapToSeek = newScreenProps.tapToSeek;
     }
@@ -272,6 +267,21 @@ - (void)loadImageFromImageSource:(ImageSource)source completionBlock:(RNCLoadIma
     }
 }
 
+void updateLimits(RNCSlider *slider, float newLowerLimit, float newUpperLimit) {
+    if (slider.lowerLimit != newLowerLimit) {
+        slider.lowerLimit = newLowerLimit;
+    }
+
+    if (slider.upperLimit != newUpperLimit) {
+        slider.upperLimit = newUpperLimit;
+    }
+
+    if (slider.lowerLimit > slider.upperLimit) {
+        NSLog(@"Invalid configuration: lowerLimit > upperLimit, reverting lowerLimit to upperLimit.");
+        slider.lowerLimit = slider.upperLimit;
+    }
+}
+
 - (void)setInverted:(BOOL)inverted
 {
     if (inverted) {

package/ios/RNCSliderManager.m

@@ -158,8 +158,26 @@ - (void)sliderTouchEnd:(RNCSlider *)sender
 RCT_EXPORT_VIEW_PROPERTY(maximumTrackImage, UIImage);
 RCT_EXPORT_VIEW_PROPERTY(minimumValue, float);
 RCT_EXPORT_VIEW_PROPERTY(maximumValue, float);
-RCT_EXPORT_VIEW_PROPERTY(lowerLimit, float);
-RCT_EXPORT_VIEW_PROPERTY(upperLimit, float);
+RCT_CUSTOM_VIEW_PROPERTY(lowerLimit, float, RNCSlider) {
+  float lowerLimit = [RCTConvert float:json];
+
+  if (lowerLimit > view.upperLimit) {
+    lowerLimit = view.upperLimit;
+    NSLog(@"Invalid configuration: reverting upper limit to equal to lower limit")
+  }
+
+  view.lowerLimit = lowerLimit;
+}
+RCT_CUSTOM_VIEW_PROPERTY(upperLimit, float, RNCSlider) {
+  float upperLimit = [RCTConvert float:json];
+
+  if (upperLimit < view.lowerLimit) {
+    upperLimit = view.lowerLimit;
+    NSLog(@"Invalid configuration: reverting lower limit to equal to upper limit")
+  }
+
+  view.upperLimit = upperLimit;
+}
 RCT_EXPORT_VIEW_PROPERTY(minimumTrackTintColor, UIColor);
 RCT_EXPORT_VIEW_PROPERTY(maximumTrackTintColor, UIColor);
 RCT_EXPORT_VIEW_PROPERTY(onRNCSliderValueChange, RCTBubblingEventBlock);

package/src/Slider.tsx

@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {useCallback, useEffect, useState} from 'react';
 import {
   Image,
   Platform,
@@ -281,6 +281,18 @@ const SliderComponent = (
           default: constants.LIMIT_MAX_VALUE,
         });
 
+  const limitCheck = useCallback(() => {
+    if (lowerLimit >= upperLimit) {
+      console.warn(
+        'Invalid configuration: lower limit is supposed to me smaller than upper limit',
+      );
+    }
+  }, [lowerLimit, upperLimit]);
+
+  useEffect(() => {
+    limitCheck();
+  }, [limitCheck, localProps]);
+
   return (
     <View
       onLayout={(event) => {