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.

[IOS 15] TextInput textAlign:right space issue

See original GitHub issue

Description

If use TextInput component with textAlign:‘right’ property, when typing space, it is not shown until entering another character (not space)

Steps to Reproduce

      <TextInput style={{ textAlign: 'right' }} placeholder={'Please input '} />

Expected Results Show space in TextInput

Version

0.57.7

Output of `react-native info`

React Native Environment Info: System: OS: macOS 11.6.1 CPU: (8) x64 Intel® Core™ i7-7820HQ CPU @ 2.90GHz Memory: 63.70 MB / 16.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 15.11.0 - ~/.nvm/versions/node/v15.11.0/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 7.6.0 - ~/.nvm/versions/node/v15.11.0/bin/npm Watchman: 2021.06.07.00 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: iOS 14.2, DriverKit 20.0, macOS 11.0, tvOS 14.2, watchOS 7.1 IDEs: Android Studio: 3.5 AI-191.8026.42.35.5977832 Xcode: 12.2/12B45b - /usr/bin/xcodebuild npmPackages: react: 16.6.1 => 16.6.1 react-native: 0.57.7 => 0.57.7

Steps to reproduce

  <TextInput style={{ textAlign: 'right' }} placeholder={'Please input '} />

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

No response

Issue Analytics

State:
Created 2 years ago
Comments:15

Top GitHub Comments

7reactions

VladimirZLcommented, Dec 10, 2021

I would be fired if this issue is not resolved, pls help me !!!

5reactions

Chant-Leecommented, Dec 9, 2021

I tried the following methods and they didn’t work

   <TextInput
        value={value && value.replace(/\u0020/g, '\u00a0')} 
        onChangeText={text => {
          const actualText = text.replace(/\u00a0/g, '\u0020')
          setValue(actualText)
        }}
        style={{ textAlign: 'right' }}
        placeholder={'Please Input'}
      />