Menu
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.
Android: No changes are made.
How can I make the TextInput in Android behave as it does in iOS for this particular scenario?
Thank you
787
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 11px; color: #141823; } All elements in the document will inherit this font unless they or one of their parents specifies a new rule. In React Native, we are more strict about it: you must wrap all the text nodes inside of a <Text> component.
To Achieve ellipses for the text use the Text property numberofLines= {1} which will automatically truncate the text with an ellipsis you can specify the ellipsizeMode as "head", "middle", "tail" or "clip" By default it is tail If you want read more behavior, then you can use the react-native-read-more-text library:
As of React Native 0.36, calling focus () (as suggested in several other answers) on a text input node isn't supported any more. Instead, you can use the TextInputState module from React Native. I created the following helper module to make this easier:
In React Native, we are more strict about it: you must wrap all the text nodes inside of a <Text> component. You cannot have a text node directly under a <View>. You also lose the ability to set up a default font for an entire subtree.
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}
/>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
