Slider marker vibrate

[zell180]

Hi, if i use this configuration for the component the markers shake (Android only)
If i remove border in slider prop the problem not occured

Semplified version:
<Slider min={0} max={15} increment={step} values={copy_filters.period.hours} style={{borderColor: 'gray', borderWidth: 2, borderRadius: 10, padding: 5, paddingLeft: 15, paddingRight: 20, margin: 5, width: '97%'}} />

Complete version:
<Slider min={0} max={15} increment={step} values={copy_filters.period.hours} style={{borderColor: 'gray', width: '97%', borderWidth: 2, borderRadius: 10, padding: 5, paddingLeft: 15, paddingRight: 20, marginVertical: 5}} trackStyle={{borderWidth: 1, marginBottom: 0, borderRadius: 10}} selectedTrackStyle={{borderWidth: 1, marginBottom: 0, borderColor: copy_filters.period.hours[0] != 0 || copy_filters.period.hours[1] != 15 ? level_up ? COLORS.GOLD : FONT_COLOR.PRIMARY : "gray"}} markerColor={copy_filters.period.hours[0] != 0 || copy_filters.period.hours[1] != 15 ? level_up ? COLORS.GOLD : FONT_COLOR.PRIMARY : "gray"} labelComponent={(position) => { const [label, setLabel] = useState(""); useEffect(() => { let dt = new Date(); dt.setHours(h_start, m_start); dt.setTime(dt.getTime() + (position.position.value / step) * 30 * 60000) setLabel((dt.getHours() <= 9 ? "0" : "")+ dt.getHours() + ":" + (dt.getMinutes() <= 9 ? "0" : "")+ dt.getMinutes()) }, [position]) return <Text style={{minWidth: 40, marginBottom: -10}}>{label}</Text> }} onSlidingStart={() => {setEnableScroll(false)}} onSlidingComplete={() => {setEnableScroll(true)}} onChange={(values) => { let f = copy_filters; f.period.hours = values; setCopyFilters({area: f.area, period: f.period, location: f.location, search: f.search, new: f.new, buy: f.buy}); }} />

Edit in this way and no shaking
<Slider min={0} max={15} increment={step} values={copy_filters.period.hours} selectedTrackStyle={{borderWidth: 1, marginBottom: 0, borderColor: copy_filters.period.hours[0] != 0 || copy_filters.period.hours[1] != 15 ? level_up ? COLORS.GOLD : FONT_COLOR.PRIMARY : "gray"}} markerColor={copy_filters.period.hours[0] != 0 || copy_filters.period.hours[1] != 15 ? level_up ? COLORS.GOLD : FONT_COLOR.PRIMARY : "gray"} labelComponent={(position) => { const [label, setLabel] = useState(""); useEffect(() => { let dt = new Date(); dt.setHours(h_start, m_start); dt.setTime(dt.getTime() + (position.position.value / step) * 30 * 60000) setLabel((dt.getHours() <= 9 ? "0" : "")+ dt.getHours() + ":" + (dt.getMinutes() <= 9 ? "0" : "")+ dt.getMinutes()) }, [position]) return <Text style={{minWidth: 40, marginBottom: -10}}>{label}</Text> }} onSlidingStart={() => {setEnableScroll(false)}} onSlidingComplete={() => {setEnableScroll(true)}} onChange={(values) => { let f = copy_filters; f.period.hours = values; setCopyFilters({area: f.area, period: f.period, location: f.location, search: f.search, new: f.new, buy: f.buy}); }} />

[jgillick]

Can you please format your code to make it easier to read and not all one on like? Wrapping the code in triple back-ticks provides a block of code, like this:
https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks#fenced-code-blocks

Additionally, can you explain what's different between the code that works and the code that does not?

Perhaps, try removing the inline styles as that might be causing React to re-render your component, which could lead to shaking. Since some of the styles are computed, consider using useMemo. For example:

import React, { useMemo } from "react";

export default function myComponent() {
  const selectedTrackStyle = useMemo(() => {
    return {
      borderWidth: 1,
      marginBottom: 0,
      borderColor:
        copy_filters.period.hours[0] != 0 || copy_filters.period.hours[1] != 15
          ? level_up
            ? COLORS.GOLD
            : FONT_COLOR.PRIMARY
          : "gray",
    };
  }, [copy_filters]);
  
  return (
    <Slider selectedTrackStyle={selectedTrackStyle} />
  )
}

[jgillick]

Marking this bug as closed with the latest versio of the lib. If it is still an issue with the latest version, can you fork this repo and use the example app to make a minimal reproducible example I can use for troubleshooting? Thank you.