Switch component: Possibility to style handle and track individually

[federicoportoghese]

Description

Since the component is directly imported from react native, it doesn't have descendants (such as _track or _thumb) it is impossible to give particular styles to the single elements. It would be nice to have this possibility

Problem Statement

For example: is there a way to add such a particular border or outline around the handle for particular states?

Proposed Solution or API

Is something like this somehow possible?

export function createSwitch<
  SwitchProps,
  HandleProps,
  TrackProps,
>({
  Root,
  Handle,
  Track
}: {
  Root: React.ComponentType<SwitchProps>;
  Handle: React.ComponentType<HandleProps>;
  Track: React.ComponentType<TrackProps>;
}) {
  const Switch = SwitchMain(Root) as any;
  Switch.Handle = SwitchHandle(Handle);
  Switch.Track = SwitchTrack(Track);

  Switch.displayName = 'Switch';
  Switch.Handle.displayName = 'Switch.Handle';
  Switch.Track.displayName = 'Switch.Track';

  return Switch as ISwitchComponentType<
    SwitchProps,
    HandleProps,
    TrackProps,
  >;
}

Alternatives

No response

Additional Information

No response

[rajat693]

hi @federicoportoghese thanks for reporting the issue, We are working on custom switch component which will have all of this options.

[federicoportoghese]

Thanks for your reply @rajat693. Is there by any chance an estimated date for that to happen? Thanks

[rajat693]

Hi @federicoportoghese , thank you for your patience. We have this on our roadmap and will address it as soon as our core issues are resolved.