How to Change Default Letter Spacing of Text Component in React Native

Sometimes, adjusting the letter spacing of text in your React Native app can enhance its visual appeal. In this tutorial, let’s learn how to change the default letter spacing of a text component in React Native.

Changing the letter space is so easy and you can do that by tweaking the style of the Text component. Just use the letterSpacing style property as given below.

<Text style={{letterSpacing: 3}}>Hello World</Text>

Then you will get the following output.

Following is the complete code.

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={{letterSpacing: 3}}>Hello World</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

That’s how you change the letter spacing of text in react native.