react-native-switch icon indicating copy to clipboard operation
react-native-switch copied to clipboard

The width of a switcher changes but the circle stays on it's place

Open Danik711 opened this issue 5 years ago • 1 comments

Hello, I am using the prop switchWidthMultiplier. The width of the bar changed but the circles did not move to the very end of the bar. It stayed on its previous place. Attached the imagesa of the switcher, and the code. Please help. Am I doing something wrong, or is it a bug?

react-native : 0.61.5 Device: Android Xiaomi Your package version: 2.0.0

IMG_20200701_123726 IMG_20200701_123842 Swither

Danik711 avatar Jul 01 '20 16:07 Danik711

Unfortunately if you specify switchWidthMultipler prop to anything except 2, then you will face such bug. But I found workaround for it.

export const Toggle = () => {
  const toggleWidth = 40;
  const circleSize = 18;
  const switchWidthMultiplier = toggleWidth / circleSize;
  const multiplierFix = circleSize / (((circleSize * switchWidthMultiplier) - circleSize) / 2)
  return <Switch 
                 value={true}
                 circleSize={circleSize}
                 switchLeftPx={multiplierFix}
                 switchRightPx={multiplierFix}
                 switchWidthMultiplier={switchWidthMultiplier}
  />
}

layerok avatar Nov 18 '22 00:11 layerok