Menu
I've been trying to give <TextInput> a letterSpacing style but it seems it only works for <Text>. Is there a way in React Native to increase the space between characters in TextInput?
This increases the space between characters
<Text style={{'letterSpacing': 5}}>Some Text</Text>
This won't work
<TextInput style={{'letterSpacing': 5}} />
271
The complete code: import React from "react"; import { View, StyleSheet, TextInput } from "react-native"; const App = () => { return ( <View style={styles. screen}> <TextInput style={styles. input} placeholder="Type something here" /> </View> ); }; const styles = StyleSheet.
To set letter spacing in react native we have to use letterSpacing prop. The letterSpacing prop support Number type value. It works on both Number and Alphabets same.
I think this is a hack - nevertheless, it works:
<TextInput letterSpacing={5} ... />
I have asked here on SO why style keys also work as props on components, still no answer.
Do not consider this solution permanent, this is obviously not the intended way to style components in RN.
173
You should give letterSpacing inside inputStyle prop.
Example:
<TextInput inputStyle={{ letterSpacing: 20 }}/>
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
