CustomThumb doesn't show up if width and height are not specified

[vendramini]

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

[Sharcoux]

Well, I checked your snack and it seems to be working fine. What's your problem?

[vendramini]

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:

[Sharcoux]

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.

[ssomarii]

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',
  },
});