thumbImage not displaying

[1ak31sha]

Hi, I am trying to use a png as the thumbImage o the slider, but I cant seem to get it to work. I am using example 9 and just replaced the image path with my own:

        <Slider
          minimumTrackTintColor='#13a9d6'
          thumbImage={require('./slider_thumbnail.png')}
          thumbStyle={customStyles9.thumb}
          thumbTintColor='#0c6692'
          value={this.state.value}
          onValueChange={(value) => this.handleValueChange(value)}
        />

All i get is the styling from example#9 but my png is not displayed anywhere Any ideas or how to debug?

[lvxinyi]

+1

[nuttylord]

you could probably take a stab at fixing this by adding some styles to the <Image> in src/slider.js.

the only code in there for the image are the image being passed into the slider and these lines

_renderThumbImage = () => { // async function call
    var {thumbImage} = this.props; // grab image var from props
    if (!thumbImage) return; // if null do nothing
    return <Image source={thumbImage} />; // if not null then return a basic image object with no styling. 
};

as you can see, no styles added, so add style={{resizeMode: 'contain'}} to the Image or some other code and youll probably get the result you want(i am not sure 100% what to add, my slider.js is 878 lines and heavily edited).

Make sure you take a copy of the slider.js or move it out of node_modules though because every run of yarn or npm install will replace the slider.js with its original.

[Yonatani]

+1

[TracyYangg]

+1

[FMdigit]

+1

[Luckygirlllll]

The same problem, did anyone tried solution above? Did it help?

[ScreamZ]

Same here

[mkecman]

I'm still having this issue :(

[karthiks]

One thing that helped me fix this issue is to use one of thumbImage or thumbTintColor attribute of Slider. When you use both, the thumbTintColor dominates or overlays the image at unpredictable times.

[kcpal]

One thing that helped me fix this issue is to use one of thumbImage or thumbTintColor attribute of Slider. When you use both, the thumbTintColor dominates or overlays the image at unpredictable times.

Thanks @karthiks This helped me a lot. I was struggling to fix it for a while.

[SSOURABH58]

Hi, I am facing the same issue, I just used the <Image/> to verify the image path and all, it was all good but it's not visible on the slider thumImage.

<Slider
              style={{width: 256, height: 25}}
              minimumValue={0}
              maximumValue={2}
              minimumTrackTintColor="#00000000"
              maximumTrackTintColor="#0000001A"
              step={1}
              value={1}
              onValueChange={(index)=>slideHandler(index)}
              thumbImage={require("./../../imagesv2/feedbackModel/Thumnil.png")}
              // trackImage={require("./../../imagesv2/feedbackModel/Track.png")}
            />

[SSOURABH58]

sorry for the trouble I fix it, the thumbImage prop only uses uri not require.

import thumImage from './../../imagesv2/feedbackModel/Thumnil.png'
const ThumImageUri = Image.resolveAssetSource(thumImage).uri