react-nativereact-native-textinput

Long text inside TextInput aligment in React native


I have a TextInput in React native. If i change the value using keyboard it works fine but, if i change it programmatically using a useState var then, if the text is too long, the text alignment becomes centered and i saw the text cut off on both sides. enter image description here

I want to cut off the text only at the end.

It works fine in IOS but in android doesn't.

Thanks for the help!

I tried to do it using styles with no luck. The text alignment is correct on first load, but if I change it programmatically it is not. The expected behavior is to see the text cut off only at the end.

Here my TextInput code. Not much to see :)

<TextInput
    ref={ref}
    editable={!props.disabled}
    placeholder={isFocus || props.value ? undefined : props.title}
    placeholderTextColor={colors.neutral[600]}
    maxLength={props.maxLength || 60}
    onFocus={setFocusOn}
    onBlur={setFocusOff}
    multiline={false}
    value={checkedItems.length > 0 ? boxInfo : null}
    />

Solution

  • Finally i manage to "fix" it using maxLength in Android. For now i use a fixed value but i will use a screen width related value. Here is my code:

         <TextInput
          ref={ref}
          editable={!props.disabled}
          placeholder={isFocus || props.value ? undefined : props.title}
          placeholderTextColor={colors.neutral[600]}
          maxLength={props.maxLength || 60}
          onFocus={setFocusOn}
          onBlur={setFocusOff}
          multiline={false}
          maxLength={Platform.OS === 'ios' ? 0 : 42
          value={checkedItems.length > 0 ? boxInfo : null}
        />
    

    In case it can help someone.