Long text inside TextInput aligment in React native

73 views Asked by At

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

There are 1 answers

0
Damià On BEST ANSWER

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.