paddingLeft of Switch doesn't work

[bahri-dev]

Problem Description

In order to fix the cut-off issue of Switch, I tried to add paddingLeft. But it doesn't work.


Are there any solutions?

Steps To Reproduce

Added paddingLeft in Switch component like the following.

<View style={{marginTop: 30, marginLeft: 30}}>
<Switch style={{paddingLeft: 10}} />

Expected Results

The placeholder of Switch shouldn't have cut-off issue.

CLI version

0.71.0

Environment

info Fetching system and libraries information...
System:
    OS: Windows 10 10.0.19044
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11800H @ 2.30GHz
    Memory: 2.97 GB / 15.67 GB
  Binaries:
    Node: 16.13.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
    Windows SDK:
      AllowDevelopmentWithoutDevLicense: Enabled
      AllowAllTrustedApps: Enabled
      Versions: 10.0.16299.0, 10.0.17134.0, 10.0.17763.0, 10.0.18362.0, 10.0.19041.0, 10.0.22000.0
  IDEs:
    Android Studio: Not Found
    Visual Studio: 16.11.33529.622 (Visual Studio Enterprise 2019)
  Languages:
    Java: 1.8.0_302 - C:\Program Files\Eclipse Foundation\jdk-8.0.302.8-hotspot\bin\javac.EXE
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0
    react-native: 0.71.0 => 0.71.0
    react-native-windows: 0.71.4 => 0.71.4
  npmGlobalPackages:
    react-native: Not Found

Target Platform Version

None

Target Device(s)

No response

Visual Studio Version

None

Build Configuration

None

Snack, code example, screenshot, or link to a repository

<View style={{marginTop: 30, marginLeft: 30}}>
<Switch style={{paddingLeft: 10}} />

[chrisglein]

I don't think there's an expectation that Switch handles this padding. See other platforms:

Snack

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>
        Change code in the editor and watch it change on your phone! Save to get a shareable url.
      </Text>
      <View style={{marginTop: 30, marginLeft: 30, backgroundColor: 'red'}}>
        <Switch style={{paddingLeft: 10}} />
      </View>
    </View>
  );
}

iOS

Android

Web

[chrisglein]

My understanding is that there isn't a standard where Switch applies the padding value. So the fact that it is ignored is by design.

[bahri-dev]

I don't think there's an expectation that Switch handles this padding. See other platforms:

Then, how can I solve the problem in UWP

[chrisglein]

In order to fix the cut-off issue of Switch

Can you elaborate on what you mean by this? I was focusing on the report that paddingLeft doesn't work, but it seems like you're trying to work around something. What are you working around?

[bahri-dev]

https://user-images.githubusercontent.com/92716081/236254064-ecf1c04f-8ee6-4fb8-85e7-5c100396cb95.png

[bahri-dev]

@chrisglein , You can see the difference between Switch placeholders in the above screen.

[chrisglein]

Gotcha. Let me open a new issue to track that.

[bahri-dev]

Gotcha. Let me open a new issue to track that.

Thank you, @chrisglein