[IOS 15] TextInput textAlign:right space issue

[Chant-Lee]

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(R) Core(TM) 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

[Chant-Lee]

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'}
      />

[supervons]

Same issues，anyone here？

[tracyhyq]

Same issues

[yangzhen0]

facing the same issue, any bro can help me :(

[MrYz912]

same issues😭😭

[supervons]

I add multiline={true} props, can typing space but keyboard return will add a newline.

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

[Darkindom]

I have the same issue, too 😭

[Jaycexx]

same issues. sb can help?

[VladimirZL]

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

[Chant-Lee]

I tried，the user experience is not good

[RickardZrinski]

Seems to be an issue in iOS's UITextField itself: https://stackoverflow.com/questions/19569688/right-aligned-uitextfield-spacebar-does-not-advance-cursor-in-ios-7

[arpitBhalla]

Facing same issue.

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

Just curious to know, did they fired you yet?

[riledv]

I have the same problem....

[efstathiosntonas]

duplicate: #10218

[dilan-dio4]

Any update on this?

[dtalbot-goto]

I was able to have a fix using styling. I have a container and text input inside. Put the textAlign of the input to 'left' and container flex-direction to 'row-reverse'. Works on iOs 16.

container: {
  flex: 1,
  flexDirection: 'row-reverse',
},
textInput: {
  textAlign: 'left',
},

Screen.Recording.2023-03-29.at.11.40.49.AM.mov

[mlecoq]

I was able to have a fix using styling. I have a container and text input inside. Put the textAlign of the input to 'left' and container flex-direction to 'row-reverse'. Works on iOs 16.

container: {
  flex: 1,
  flexDirection: 'row-reverse',
},
textInput: {
  textAlign: 'left',
},

Screen.Recording.2023-03-29.at.11.40.49.AM.mov

unfortunately it does not work well with a placeholder in the textinput (cursor is first displayed on the left)