CODEWITHSUNDEEP
react-native
Frank Tian
Frank Tian

Reputation: 807

Is there a way to do letterSpacing for TextInput in 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}} />

Upvotes: 10

Views: 13799

Answers (5)

cristian
cristian

Reputation: 1019

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.

Upvotes: 2

Mustafa
Mustafa

Reputation: 61

just put text inside textInput and style it like below

<TextInput 
  placeholder={'1  2      3     4     5     6'}
  style={textInputViewStyle}
  onChangeText={setCode}
  maxLength={6}
>
  <Text style={{ letterSpacing: 19 }}>{code}</Text>
</TextInput>

Upvotes: 0

Mukhammad Ali
Mukhammad Ali

Reputation: 850

You should give letterSpacing inside inputStyle prop.

Example: 

<TextInput inputStyle={{ letterSpacing: 20 }}/>

Upvotes: 1

Ethan Sharabi
Ethan Sharabi

Reputation: 85

Check out this component https://github.com/wix/react-native-ui-lib#masked-input it allows you to render custom masked input in any way you want it, without affecting the actual value of the input.

Upvotes: 0

Pablo Darde
Pablo Darde

Reputation: 6402

This is a possible solution, maybe not the better.

Jsfiddle

class Form extends React.Component {
  constructor() {
    super();
    this.state = {
        value: '',
    };
    this.onChangeText = this.onChangeText.bind(this);
  }

  onChangeText(e) {
    const val = e.target.value.replace(/ /g, '').split('');
    const spaced = val.join(' ');
    this.setState({
        value: spaced,
    });
  }

  render() {
    return(
        <div style={{flexDirection: 'column'}}>
        <div>Type Text</div>
        <input
          type='text'
          onChange={this.onChangeText}
          value={this.state.value}
        />
      </div>
    );
  }
}

Upvotes: 1

Related Questions