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