Thumb hides behind track on upgrade to ReactNative 76

[mahcloud-tinker]

Here are our custom styles

return (
    <Toggle
      onPress={onToggle}
      thumbButton={{
        width: 20,
        height: 20,
      }}
      thumbStyle={{
        activeBackgroundColor: '#303030',
      }}
      trackBar={{
        activeBackgroundColor: '#E5FE52',
        inActiveBackgroundColor: '#C7C7C7',
        borderActiveColor: '#E5FE52',
        borderInActiveColor: '#C7C7C7',
        borderWidth: 3,
        radius: 20,
        height: 20,
        width: 40,
      }}
      value={isOn}
    />
  );

This worked for us in RN 0.73.9 but after we upgraded to RN 0.76.5, the thumb button would always hide behind the track bar. Even if I change the styling to make the thumb button bigger, it would still be hidden behind the trackbar.

[aabolade]

Also experiencing the same issue - hope the PR above can be merged!

[sirmong]

Try to add trackBarStyle={{zIndex: -1}}

Worked for me on iOS

[n-ii-ma]

Try to add trackBarStyle={{zIndex: -1}}

Worked for me on iOS

Works on Android too. Thanks!

[chico-oliveira]

Still getting this issue, fix works though!

[matheuscouto]

Same issue, fix works though

[Huy22032002]

Try to add trackBarStyle={{zIndex: -1}}

Worked for me on iOS

you saved my life