question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

TextInput cursor not aligned in the centre when value is empty

See original GitHub issue

When using TextInput with textAlign: center, the cursor is in the wrong position when the text is empty. It seems to be aligning with the placeholder. image

React Native version:

System:
    OS: macOS 10.15.2
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Memory: 185.86 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.13.0 - /usr/local/bin/node
    npm: 6.13.4 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    Android SDK:
      API Levels: 23, 25, 27, 28
      Build Tools: 26.0.2, 28.0.1, 28.0.3
      System Images: android-25 | Google Play Intel x86 Atom
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5791312
    Xcode: /undefined - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.5 => 0.61.5 
  npmGlobalPackages:
    react-native: 0.61.5

Steps To Reproduce

<TextInput placeholder='NAME'  textAlign={'center'}/>

Expected Behaviour

The cursor should be in the middle of text input

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:37
  • Comments:48

github_iconTop GitHub Comments

42reactions
outaTiMEcommented, Jun 24, 2020

Im using in the following way and it works:

<TextInput
  style={[
    {
      textAlign: 'center',
      flex: 1,
    },
  ]}
/>

i hope it helps

6reactions
Vivers0commented, Aug 5, 2021

Still an issue in 0.64.2

Read more comments on GitHub >

github_iconTop Results From Across the Web

TextInput cursor jump to right end when the input is empty
this is the exact problem i was facing, its a bug in React native textInput when the input is empty , the cursor...
Read more >
Text Input — Kivy 2.1.0 documentation
The TextInput widget provides a box for editable plain text. Unicode, multiline, cursor navigation, selection and clipboard features are supported.
Read more >
align-self - CSS: Cascading Style Sheets - MDN Web Docs
The align-self CSS property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area.
Read more >
TextField QML Type | Qt Quick Controls 1 5.15.11
TextField is used to accept a line of text input. Input constraints can ... The value is a bit-wise combination of flags, or...
Read more >
TextView - Android Developers
Automatically fills the content of this view with the value . void, beginBatchEdit(). boolean, bringPointIntoView(int offset).
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found