TextInput cursor not aligned in the centre when value is empty

[ShivamJoker]

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.

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

[react-native-bot]

It looks like you are using an older version of React Native. Please update to the latest release, v0.61 and verify if the issue still exists.

The "Resolution: Old Version" label will be removed automatically once you edit your original post with the results of running `react-native info` on a project using the latest release.

[alisterrick]

The same issue. I use the latest version v0.61.5

[s349856186]

same issue, any update ?

[Joeelll]

Same issue on the latest version. It happens for me when using textAlign and value parameter to control what user can submit.

[dung-dd]

It still exists. tricks is use a space instead an empty string, imperfect but better the present

[alexsenichev]

Same for me

[TeddyBearItsMe]

Im also stuck with this issue, in the latest version

[flungloaf]

Same here on v0.62.2

[outaTiME]

Im using in the following way and it works:

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

i hope it helps

[rhysdavies1994]

Same issue here

Is there any progress on this?

[ShivamJoker]

It's been 6 months what Facebook's React native team is doing ?

Why can't you fix such a minor issue ?

Maybe it's not big of a deal for you but for many people it is.

[dederomagnolo]

I have the same issue here in Android, textAlign aligns in the center with flex: 1 (in the middle of placeholder string). Should be aligned with the placeholder first char. In iOS it is working fine like this. 0.61 version.

[fabOnReact]

Please test my fix #28995
This issue should be closed once #28995 is merged.

[ShivamJoker]

@fabriziobertoglio1987 how will we test it ? I am new to this so .. sorry 😅

[fabOnReact]

@ShivamJoker You either clone my branch

https://github.com/fabriziobertoglio1987/react-native/tree/fix-text-input-cursor-jump

and test it in the RNTester App
Read the instructions here
https://github.com/facebook/react-native/tree/master/RNTester

Or even better, if you also want to fix this issue in your React Native project.
Clone my branch of react native
https://github.com/fabriziobertoglio1987/react-native/tree/fix-text-input-cursor-jump

and install in your project that version of react native as explained in the instructions here
https://github.com/facebook/react-native/wiki/Building-from-source

otherwise wait for the latest release and support me 😃
Thanks

[ramykl]

Seems to be an issue since 2016 with it being classified as desired behaviour #10030. Would really like it fixed so it matches with ios and normal web behaviour

[ShivamJoker]

Thanks @fabriziobertoglio1987 I have tested your changes and it works perfect, hope they merge this soon

[anagovitsyn]

here is full component code with cursor centered in TextInput. react natiive v0.61

import React, {useState, useEffect} from 'react';
import {
  View,
  TouchableOpacity,
  Text,
  Image,
  TextInput
} from 'react-native';

export default function Welcome({navigation}) {
    const [name, setName] = useState('')

    return(
      <>
        <View style={{paddingTop: 64, paddingLeft: 34, paddingRight: 34}}>
            <Text>
            </Text>
            <TextInput
                autoFocus={true}
                style={{
                    marginTop: 24,
                    fontFamily: 'StyreneAWeb-Regular',
                    fontSize: 24,
                    lineHeight: 36,
                    fontWeight: '700',
                    color: '#333',
                    textAlign: 'center'
                }}
                value={name}
                onChangeText={text => setName(text)}
                selectionColor='#333'
            />
              <TouchableOpacity
                style={{
                  marginTop: 27,
                  paddingTop: 11,
                  height: 41,
                  paddingLeft: 32,
                  paddingRight: 32,
                  backgroundColor: '#333333',
                  alignItems: 'center',
                  justifyContent: 'center',
                  paddingBottom: 11
                }}
                onPress={() => { 

                }}
            >
                  <Text
                    style={{
                      color: '#FFF',
                      fontSize: 15,
                      lineHeight: 19,
                      fontFamily: 'StyreneAWeb-Regular',
                      fontWeight: 'normal',
                    }}>
                    Продолжить
                  </Text>
              </TouchableOpacity>
        </View>
        <View
            style={{height: 16, marginLeft: 16, marginRight: 16, backgroundColor: '#F2E6E6'}}
        />
        </>
    )
}

[Joshmatjjen]

Ohh... When will this be fixed ?

[Yandamuri]

Any update about fix?

[Fedorrychkov]

Same in 0.63.2

[lautaro-osacar]

I had to remove the placeholder when the input is focused to center the cursor, maybe adding a label to the input when is focused could help to improve the UX with this workaround.

[hugoh59]

Same issue in 0.62.2

[MerouaneBali]

+1, still a thing for now.

[colinmatthewlee]

Still an issue in 0.63.4

[Vivers0]

Still an issue in 0.64.2

[mrshahzeb7]

any solution to this ? I am facing on "react-native": "0.64.2",

[efefurkankarakaya]

any solution to this ? I am facing on "react-native": "0.64.2",

I have same issue too.

"react-native": "0.64.2",

[ShivamJoker]

Guys please upgrade to the latest react native version, the changes are included in 0.65.1

I've not tested it in this but I believe it should work.

[mrshahzeb7]

I have solved it by wrapping textInput in with justify content/alignitem:'center'

[efefurkankarakaya]

I have solved it by wrapping textInput in with justify content/alignitem:'center'

Can you share the JSX and StyleSheet code with React Native version?

[fabOnReact]

Guys please upgrade to the latest react native version, the changes are included in 0.65.1

I've not tested it in this but I believe it should work.

Sorry. This commit was not cherry picked in 0.65.1 react-native-community/releases#244
You can check the changelog https://github.com/react-native-community/releases/blob/master/CHANGELOG.md
#28995

Upgrading will not fix this issue

[ShivamJoker]

Oh no, why not ? What was issue with including it ?

I mean it's been 2 years why they can't just merge this and release.

[fabOnReact]

Maybe because was merged to master 14 days ago. May require some testing before making a release. Hopefully we will see this fix soon in an upcoming release. Thanks for the support 🙏

[Alihassan001]

I have managed by this:

`
<TextInput
value={value}
onChangeText={val => setValue(val)}
placeholder="Input Placeholder"
style={styles.input}
/>

// styling
inputWrapper: {
backgroundColor: colors.grey,
width: '90%', //depending on your style
borderRadius: 30,
marginVertical: 20,
justifyContent: 'center',
alignItems: 'center',
},
input: {
paddingHorizontal: 20,
paddingVertical: 10,
fontSize: scaleFont(16),
}
`

[eduardofischer]

+1

[AliRehman7141]

+1

[AliRehman7141]

here is my solution

<View style={{ alignItems: 'center' }}>
          {testInputText.length == 0 &&
            <Text style={[styles.inputText, {
              color: '#C7C7CD',
              position: 'absolute'
            }]}>
              {'My placeholder'}
            </Text>
          }
          <TextInput
            value={testInputText}
            placeholder={''}
            textAlign={'center'}
            style={styles.inputText}
            onChangeText={setTestInputText}
          />
</View>

styles

inputText: {
    fontSize: 16,
    textAlign: 'center',
  },

[mohamedanwer123]

this issue still occurs

[Aashir1]

still happening with me

[CaptainHaider]

still

[mrjackwhitaker]

I was getting this issue only on iOS (RN 0.63.4). For some reason the previous developer had the following:
placeholder='email' placeholderColor='transparent'
Removing both those lines (obviously didn't need a placeholder) worked for me. Might be worth trying it without a placeholder to see if it still bugs out.

[AhmedAbuelenin]

I was getting this issue only on iOS (RN 0.63.4). For some reason the previous developer had the following: placeholder='email' placeholderColor='transparent' Removing both those lines (obviously didn't need a placeholder) worked for me. Might be worth trying it without a placeholder to see if it still bugs out.

Thanks for the idea @mrjackwhitaker
After commenting placeholder and placeholderTextColor props, the cursor is aligned to center correctly but the issue is there's no placeholder exist anymore.

This is a workaround if you still need a placeholder with textAlign='center'

import {  InteractionManager } from react-native

const inputRef = React.createRef() 

const focusInputWithKeyboard = () => { //  this part is copied from Stackoverflow
    InteractionManager.runAfterInteractions(() => {
      inputRef.current.focus();
    });
  };

<View>
     <TextInput ref={inputRef} value={someValue}  textAlign={'center'}/>
     {!someValue ? 
        <View style={{
                 position: 'absolute',
                  top: 0,
                  bottom: 0,
                  left: 0,
                  right: 0,
                  justifyContent: 'center',
                  alignItems: 'center',
              }}>
             <Text onPress={focusInputWithKeyboard}>{'placeholder'}</Text>
          </View> 
    :  null}
</View>

Hope this help someone.

[ChrisBews]

Right, as someone that just hit this bug, just adding a wrapper that centers a TextInput with a dynamic width wasn't good enough. The caret would still appear at the end of the smaller TextInput when the placeholder was showing, and this approach would also reduce the touchable area (horizontally) that the user can press to focus the TextInput.

I have managed to find a dodgy hackaround that will fix it (or rather make it appear to be fixed).

You do want the wrapper element around your TextInput styled like so:

<View
  style={{
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  }}
>
  {{your text input}}
</View>

Then for your TextInput, you want to change the width depending on whether there is a value or not, so as to trigger a redraw of the element, and a recalculation of the caret position:

<TextInput
  value={inputValue}
  style={{
    flex: 1,
    width: Boolean(inputValue) ? '100%' : '95%',
    textAlign: 'center',
  }}
/>

This will result in the behaviour appearing as you'd expect - the caret remains centered regardless of placeholder text, but the TextInput is still nice and wide to allow for touches at the edges.

[shafqatbarireporteq]

this works fine you can also use number of line. For I wanted one line text so I used
numberOfLines={1}
https://stackoverflow.com/a/67281614/12242668

[CDBridger]

Is there a reason this issue is closed? on android text align center with a placeholder still puts the cursor at the end.

[RayRead]

Still an issue

[lennartkloock]

+1 Still an issue

As mentioned above, a workaround is:

multiline={true}
numberOfLines={1}