search

halilb / react-native-textinput-effects

Text inputs with custom label and icon animations for iOS and android. Built with react native and inspired by Codrops.
MIT License
2.98k stars 291 forks source link

Text overflow on Android #104

Open NalinKamboj opened 5 years ago

NalinKamboj commented 5 years ago

I'm currently using this library with React Native 0.59.9, and I've been using the Hoshi effect. The text currently overflows on the right side due to the 'inputPadding' attribute. Setting it to 0 removes any overflow, but makes the label and input stick to each other. Setting inputPadding to any number moves the overflow text to the right by that number. See the example image below where inputPadding has been set to 16.

Screenshot_20190703-112621_Trinity Live__01

Any workaround/help appreciated.

Thanks!

adrianocola commented 5 years ago

There is no way to fix that only using styles, because the width of the TextInput is set by this lib. But you can make it work if you change the line 68 to width: width - ( 2 * inputPadding),

https://github.com/halilb/react-native-textinput-effects/blob/b82383efc55e42526ad860f036fbf86ad5fad3e8/lib/Hoshi.js#L61-L78