Fix minimumTrackImage, maximumTrackImage, and trackImage do not work together

.circleci/config.yml

@@ -1,7 +1,7 @@
 version: 2.1
 
 orbs:
-  rn: react-native-community/react-native@2.0.1
+  rn: react-native-community/react-native@5.1.0
 
 jobs:
   checkout_code:

example/ios/Podfile.lock

@@ -182,7 +182,7 @@ PODS:
     - React-cxxreact (= 0.62.2)
     - React-jsi (= 0.62.2)
   - React-jsinspector (0.62.2)
-  - react-native-slider (3.0.2):
+  - react-native-slider (4.0.0-rc.2):
     - React-Core
   - React-RCTActionSheet (0.62.2):
     - React-Core/RCTActionSheetHeaders (= 0.62.2)
@@ -261,7 +261,7 @@ DEPENDENCIES:
   - React-jsi (from `../../node_modules/react-native/ReactCommon/jsi`)
   - React-jsiexecutor (from `../../node_modules/react-native/ReactCommon/jsiexecutor`)
   - React-jsinspector (from `../../node_modules/react-native/ReactCommon/jsinspector`)
-  - "react-native-slider (from `../node_modules/@react-native-community/slider`)"
+  - react-native-slider (from `../../src`)
   - React-RCTActionSheet (from `../../node_modules/react-native/Libraries/ActionSheetIOS`)
   - React-RCTAnimation (from `../../node_modules/react-native/Libraries/NativeAnimation`)
   - React-RCTBlob (from `../../node_modules/react-native/Libraries/Blob`)
@@ -309,7 +309,7 @@ EXTERNAL SOURCES:
   React-jsinspector:
     :path: "../../node_modules/react-native/ReactCommon/jsinspector"
   react-native-slider:
-    :path: "../node_modules/@react-native-community/slider"
+    :path: "../../src"
   React-RCTActionSheet:
     :path: "../../node_modules/react-native/Libraries/ActionSheetIOS"
   React-RCTAnimation:
@@ -349,7 +349,7 @@ SPEC CHECKSUMS:
   React-jsi: b6dc94a6a12ff98e8877287a0b7620d365201161
   React-jsiexecutor: 1540d1c01bb493ae3124ed83351b1b6a155db7da
   React-jsinspector: 512e560d0e985d0e8c479a54a4e5c147a9c83493
-  react-native-slider: 912097f311e20780e1eec115e4c127c2bb405dcf
+  react-native-slider: b0516fffccae0858ce1ab73ba1e80188d2041a27
   React-RCTActionSheet: f41ea8a811aac770e0cc6e0ad6b270c644ea8b7c
   React-RCTAnimation: 49ab98b1c1ff4445148b72a3d61554138565bad0
   React-RCTBlob: a332773f0ebc413a0ce85942a55b064471587a71
@@ -364,4 +364,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 65ed4e66fef8e5bea5ac04bddc5f5646eead8fdb
 
-COCOAPODS: 1.9.3
+COCOAPODS: 1.10.1

example/package.json

@@ -10,7 +10,7 @@
     "run:web": "expo web"
   },
   "dependencies": {
-    "@react-native-community/slider": "./src",
+    "@react-native-community/slider": "^4.0.0-rc.2",
     "babel-preset-expo": "^8.2.1",
     "expo": "^37.0.12",
     "react-dom": "~16.9.0",

src/ios/RNCSlider.m

@@ -10,6 +10,8 @@
 @implementation RNCSlider
 {
   float _unclippedValue;
+  bool _minimumTrackImageSet;
+  bool _maximumTrackImageSet;
 }
 
 - (instancetype)initWithFrame:(CGRect)frame
@@ -64,20 +66,25 @@ - (void)setTrackImage:(UIImage *)trackImage
   if (trackImage != _trackImage) {
     _trackImage = trackImage;
     CGFloat width = trackImage.size.width / 2;
-    UIImage *minimumTrackImage = [trackImage resizableImageWithCapInsets:(UIEdgeInsets){
-      0, width, 0, width
-    } resizingMode:UIImageResizingModeStretch];
-    UIImage *maximumTrackImage = [trackImage resizableImageWithCapInsets:(UIEdgeInsets){
-      0, width, 0, width
-    } resizingMode:UIImageResizingModeStretch];
-    [self setMinimumTrackImage:minimumTrackImage forState:UIControlStateNormal];
-    [self setMaximumTrackImage:maximumTrackImage forState:UIControlStateNormal];
+    if (!_minimumTrackImageSet) {
+      UIImage *minimumTrackImage = [trackImage resizableImageWithCapInsets:(UIEdgeInsets){
+        0, width, 0, width
+      } resizingMode:UIImageResizingModeStretch];
+      [self setMinimumTrackImage:minimumTrackImage forState:UIControlStateNormal];
+    }
+    if (!_maximumTrackImageSet) {
+      UIImage *maximumTrackImage = [trackImage resizableImageWithCapInsets:(UIEdgeInsets){
+        0, width, 0, width
+      } resizingMode:UIImageResizingModeStretch];
+      [self setMaximumTrackImage:maximumTrackImage forState:UIControlStateNormal];
+    }
   }
 }
 
 - (void)setMinimumTrackImage:(UIImage *)minimumTrackImage
 {
   _trackImage = nil;
+  _minimumTrackImageSet = true;
   minimumTrackImage = [minimumTrackImage resizableImageWithCapInsets:(UIEdgeInsets){
     0, minimumTrackImage.size.width, 0, 0
   } resizingMode:UIImageResizingModeStretch];
@@ -92,6 +99,7 @@ - (UIImage *)minimumTrackImage
 - (void)setMaximumTrackImage:(UIImage *)maximumTrackImage
 {
   _trackImage = nil;
+  _maximumTrackImageSet = true;
   maximumTrackImage = [maximumTrackImage resizableImageWithCapInsets:(UIEdgeInsets){
     0, 0, 0, maximumTrackImage.size.width
   } resizingMode:UIImageResizingModeStretch];

src/package.json

@@ -31,7 +31,7 @@
     "@react-native-community/eslint-config": "0.0.5",
     "babel-jest": "^24.9.0",
     "babel-plugin-module-resolver": "3.1.3",
-    "detox": "12.4.1",
+    "detox": "^18.9.0",
     "eslint": "^6.5.1",
     "flow-bin": "0.113.0",
     "jest": "^24.9.0",