React Native - Three dots when text in TextInput is longer than TextInput and when not in focus

user_2561994 0
Viewed 5030

So I'll try to explain my scenario.

I have a singleline TextInput. When the user is onFocus, the text within the TextInput can be longer than the TextInput itself.

However, when the user is no longer onFocus, Android and iOS behave differently.

iOS: Three dots are added to the end of the line and the beginning of the text is shown.

enter image description here

Android: No changes are made.

Behaviour in Android

How can I make the TextInput in Android behave as it does in iOS for this particular scenario?

Thank you

react-native
2 Answers
 const placeHolderLengthLimit = useMemo(
        () => (tooltip ? 31 : 37),
        [tooltip],
    );

    const placeholderString = useMemo(
        () =>
            placeholder
                ? Platform.OS === 'ios' ||
                  placeholder?.length <= placeHolderLengthLimit
                    ? placeholder
                    : placeholder?.slice(0, placeHolderLengthLimit) + '...'
                : undefined,
        [placeHolderLengthLimit, placeholder],
    );

                   <TextInput
                        placeholder={placeholderString}
                    />
user_76764710

I don't know you got an answer or not but ellipsizeMode and numberOfLines will help to this query.

          <TextInput
            ellipsizeMode="tail"
            numberOfLines={1}
            ref={(textInput) => { this.textInput = textInput; }}
            style={}
            placeholder="Type a message..."
            onSubmitEditing={}
            onChange={}
          />
user_101601120
Related