microsoft / microsoft/react-native-windows

TextInput value and placeholders are not aligned out of the box

Open
#15,939 3 comments 0 reactions 1 assignee View on GitHub

@protikbiswas100 is already working on this.

Since Apr 7, 2026.

bug
Dominant language
C++
Stars
17.3k
Forks
1.2k
Avg merge
1d 13h
Merged PRs (30d)
33

Description

Problem Description

I have

      <TextInput
        style={styles.input}
        placeholder="Note title testing!!..."
        placeholderTextColor="#666"
        value={title}
        onChangeText={setTitle}
      />

and

  input: {
    backgroundColor: '#16213e',
    borderRadius: 8,
    padding: 12,
    color: '#fff',
    fontSize: 16,
    borderWidth: 1,
    borderColor: '#0f3460',
    marginBottom: 16,
  },

That yields this unaligned textinput

Image
Steps To Reproduce
  1. create a text input
  2. set the placeholder prop

See that the placeholder is unaligned

Expected Results

The textinput placeholder to be aligned

CLI version

20.0.0

Environment
(I am running on Parrallels)

info Fetching system and libraries information...
System:
  OS: Windows 11 10.0.26200
  CPU: (4) arm64 Apple Silicon
  Memory: 1.36 GB / 7.99 GB
Binaries:
  Node:
    version: 24.14.0
    path: C:\Program Files\nodejs\node.EXE
  Yarn: Not Found
  npm:
    version: 11.9.0
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
    Versions:
      - 10.0.22621.0
      - 10.0.26100.0
IDEs:
  Android Studio: Not Found
  Visual Studio:
    - 18.3.11520.95 (Visual Studio Community 2026)
Languages:
  Java: Not Found
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli":
    installed: 20.0.0
    wanted: 20.0.0
  react:
    installed: 19.1.1
    wanted: 19.1.1
  react-native:
    installed: 0.82.1
    wanted: 0.82.1
  react-native-windows:
    installed: 0.82.3
    wanted: ^0.82.3
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

info React Native v0.84.1 is now available (your project is running on v0.82.1).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.84.1
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.82.1&to=0.84.1
info For more info, check out "https://reactnative.dev/docs/upgrading?os=windows".
Community Modules
    "@react-native/new-app-screen": "0.82.1",
    "@react-navigation/bottom-tabs": "^7.15.9",
    "@react-navigation/native": "^7.2.2",
    "@react-navigation/stack": "^7.8.9",
    "@tanstack/react-query": "^5.96.2",
    "react": "19.1.1",
    "react-native": "0.82.1",
    "react-native-gesture-handler": "^2.31.0",
    "react-native-safe-area-context": "^5.5.2",
    "react-native-windows": "^0.82.3"
Target React Native Architecture

New Architecture (WinAppSDK) Only

Target Platform Version

<= 10.0.17763

Visual Studio Version

Visual Studio 2022

Build Configuration

Debug

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

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.