React-native: 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.

[fabriziobertoglio1987]

Please test my fix https://github.com/facebook/react-native/pull/28995
This issue should be closed once https://github.com/facebook/react-native/pull/28995 is merged.

[ShivamJoker]

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

[fabriziobertoglio1987]

@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 :smiley:
Thanks

[ramykl]

Seems to be an issue since 2016 with it being classified as desired behaviour https://github.com/facebook/react-native/issues/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 ?