Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a way to do letterSpacing for TextInput in React Native?

Tags:

react-native

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}} />
like image 271
Frank Tian Avatar asked Jun 28 '16 14:06

Frank Tian


People also ask

How do you give border radius to TextInput in react native?

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.

How do I increase the space between words in react native?

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.


2 Answers

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.

like image 173
cristian Avatar answered Oct 21 '22 18:10

cristian


You should give letterSpacing inside inputStyle prop.

Example:

<TextInput inputStyle={{ letterSpacing: 20 }}/>
like image 41
Mukhammad Ali Avatar answered Oct 21 '22 18:10

Mukhammad Ali