Closed CorentinClabaut closed 6 months ago
I can check that issue doesn't occurs in web version. Only android and iOS.
I don't now if you're still facing this issue but you can try patch:
diff --git a/node_modules/@miblanchard/react-native-slider/lib/index.js b/node_modules/@miblanchard/react-native-slider/lib/index.js
index 379639a..e146eac 100644
--- a/node_modules/@miblanchard/react-native-slider/lib/index.js
+++ b/node_modules/@miblanchard/react-native-slider/lib/index.js
@@ -138,23 +138,39 @@ export class Slider extends PureComponent {
return statePatch;
}
}
- componentDidUpdate() {
- const newValues = normalizeValue(this.props, this.props.value instanceof Animated.Value
- ? this.props.value.__getValue()
- : this.props.value);
- newValues.forEach((value, i) => {
- if (!this.state.values[i]) {
- this._setCurrentValue(value, i);
- }
- else if (value !== this.state.values[i].__getValue()) {
- if (this.props.animateTransitions) {
- this._setCurrentValueAnimated(value, i);
- }
- else {
- this._setCurrentValue(value, i);
- }
- }
- });
+ componentDidUpdate(prevProps) {
+ // Check if the value prop has changed
+ if (this.props.value !== prevProps.value) {
+ const newValues = normalizeValue(this.props, this.props.value);
+
+ this.setState({
+ values: updateValues({
+ values: this.state.values,
+ newValues: newValues,
+ }),
+ }, () => {
+ newValues.forEach((value, i) => {
+ const currentValue = this.state.values[i].__getValue();
+ if (value !== currentValue && this.props.animateTransitions) {
+ this._setCurrentValueAnimated(value, i);
+ } else {
+ this._setCurrentValue(value, i);
+ }
+ });
+ });
+ }
+
+ // Check for other prop changes that might require state updates, e.g., trackMarks
+ if (this.props.trackMarks !== prevProps.trackMarks) {
+ const newTrackMarksValues = normalizeValue(this.props, this.props.trackMarks);
+
+ this.setState({
+ trackMarksValues: updateValues({
+ values: this.state.trackMarksValues,
+ newValues: newTrackMarksValues,
+ }),
+ });
+ }
}
_getRawValues(values) {
return values.map((value) => value.__getValue());
@andremawad I opened #421 with your patch (it works for me)
<Slider minimumTrackTintColor={Colors.themeColor} maximumTrackTintColor={Colors.gray} minimumValue={0} maximumValue={100} thumbTintColor={Colors.themeColor} trackStyle={{backgroundColor:Colors.gray}} value={[low,high]} onValueChange={([low,high]) => { console.log(parseInt(low),parseInt(high)); setLow(parseInt(low)); setHigh(parseInt(high)); }} />
When the value is updated outside of the component, the thumb are updated correctly, but the max/minTrackTintColor is not updated.
That is the case with an array of 2 values. I didn't try with another number of values.