Sharcoux
CustomThumb doesn't show up if width and height are not specified
Describe the bug
<RangeSlider
minimumValue={0}
maximumValue={1440}
CustomThumb={({value, thumb}) => {
return <Text>a</Text>;
}}
{...sliderProps}
/>
The original provided snack does work with @sharcoux/slider package. However, it doesn't work with @react-native-assets/slider which I believe is the correct one to use. Also, I've updated the snack to Expo 52. Not sure if it's related.
To Reproduce
- Go to this Snack
- Edit the model to reproduce the issue
- Save your changes and paste the link here: https://snack.expo.dev/@rosterelf/sharcoux-slider-demo
Expected behavior Replacing thumbs.
Please complete the following information:
- OS: iOS and Android
- Browser: Apparently it does work on browsers.
- @react-native-assets/slider 10.0.0
Well, I checked your snack and it seems to be working fine. What's your problem?
Expo on iOS:
Code:
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.paragraph}>
Change code in the editor and watch it change on your phone! Save to get a shareable url.
</Text>
<Text style={styles.title}>
Normal Slider
</Text>
<Slider
value={0} // set the current slider's value
minimumValue={0} // Minimum value
maximumValue={1} // Maximum value
step={0} // The step for the slider (0 means that the slider will handle any decimal value within the range [min, max])
minimumTrackTintColor='grey' // The track color before the current value
maximumTrackTintColor='grey' // The track color after the current value
thumbTintColor='darkcyan' // The color of the slider's thumb
thumbStyle={undefined} // Override the thumb's style
trackStyle={undefined} // Override the tracks' style
minTrackStyle={undefined} // Override the tracks' style for the minimum range
maxTrackStyle={undefined} // Override the tracks' style for the maximum range
vertical={false} // If true, the slider will be drawn vertically
inverted={false} // If true, min value will be on the right, and max on the left
enabled={true} // If false, the slider won't respond to touches anymore
trackHeight={4} // The track's height in pixel
thumbSize={15} // The thumb's size in pixel
thumbImage={undefined} // An image that would represent the thumb
slideOnTap={true} // If true, touching the slider will update it's value. No need to slide the thumb.
onValueChange={undefined} // Called each time the value changed. The type is (value: number) => void
onSlidingStart={undefined} // Called when the slider is pressed. The type is (value: number) => void
onSlidingComplete={undefined} // Called when the press is released. The type is (value: number) => void
CustomThumb={() => <Text>Test</Text>} // Provide your own component to render the thumb. The type is a component: ({ value: number }) => JSX.Element
/>
<Text style={styles.title}>
Range Slider
</Text>
<RangeSlider
range={[0, 1]} // set the current slider's value
minimumValue={0} // Minimum value
maximumValue={1} // Maximum value
step={0} // The step for the slider (0 means that the slider will handle any decimal value within the range [min, max])
minimumRange={0} // Minimum range between the two thumbs (defaults to --step--)
crossingAllowed={false} // If true, the user can make one thumb cross over the second thumb
outboundColor='grey' // The track color outside the current range value
inboundColor='grey' // The track color inside the current range value
thumbTintColor='darkcyan' // The color of the slider's thumb
thumbStyle={undefined} // Override the thumb's style
trackStyle={undefined} // Override the tracks' style
minTrackStyle={undefined} // Override the tracks' style for the minimum range
midTrackStyle={undefined} // Override the tracks' style for the middle range
maxTrackStyle={undefined} // Override the tracks' style for the maximum range
vertical={false} // If true, the slider will be drawn vertically
inverted={false} // If true, min value will be on the right, and max on the left
enabled={true} // If false, the slider won't respond to touches anymore
trackHeight={4} // The track's height in pixel
thumbSize={15} // The thumb's size in pixel
thumbImage={undefined} // An image that would represent the thumb
slideOnTap={true} // If true, touching the slider will update it's value. No need to slide the thumb.
onValueChange={undefined} // Called each time the value changed. The type is (range: [number, number]) => void
onSlidingStart={undefined} // Called when the slider is pressed. The type is (range: [number, number]) => void
onSlidingComplete={undefined} // Called when the press is released. The type is (range: [number, number]) => void
CustomThumb={() => <Text>Test</Text>} // Provide your own component to render the thumb. The type is a component: ({ value: number, thumb: 'min' | 'max' }) => JSX.Element
/>
</View>
);
}
Shouldn't it be showing Test as both left and right thumbs? Like it does on web version:
Got it. Apparently, there is an issue with the overflow property on React-Native. But if you specify the width and height manually, it starts working:
CustomThumb={() => (
<Text style={{ width: 20, height: 20 }}>
Test
</Text>
)}
I don't know how to provide a better solution. If someone has an idea, I'd gladly take it.
Hello :) I just made my custom thumb and found this quite fresh issue, soo.. I suppose this solution can help.
Try to make custom thumb as a different component and put it inside Slider CustomThumb prop. That's all.
My example:
<Slider
CustomThumb={({value}) => <ThumbCustom value={value} />}
/>
const ThumbCustom = ({value}: IThumbCustomProps) => {
return (
<View style={stylesThumb.wrap}>
<Text>{value}</Text>
</View>
);
};
const stylesThumb = StyleSheet.create({
wrap: {
width: 39,
height: 39,
backgroundColor: '#111111',
},
});
