How to Implement Vertical Text Alignment in React Native

Vertical text alignment is a common requirement in mobile app development. React Native offers various ways to vertically align text inside a container. In this blog post, we’ll go through each method, step-by-step, so that you can make the most out of your app’s UI.

What is Vertical Text Alignment?

Vertical text alignment refers to the positioning of text within a container along the vertical axis. It could be aligned at the top, middle, or bottom of the container. Despite its importance, vertical alignment is often less straightforward than horizontal alignment.

Basic Vertical Alignment Methods

Using justifyContent with Flexbox

Flexbox is a layout model that allows you to design complex layout structures with a more predictable way. The justifyContent style can be used for vertical alignment.

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

const App = () => (
  <View style={styles.container}>
    <Text>Vertically centered text</Text>
  </View>
);

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

export default App;

Using lineHeight

Another option is to use the lineHeight property, which can be especially useful when you have a single line of text and you know the height of the container.

<View style={{ height: 100 }}>
  <Text style={{ lineHeight: 100 }}>Centered Text</Text>
</View>

While vertical text alignment in React Native might seem tricky at first, it becomes much more manageable once you’re familiar with the different methods available. Use these tips to make your mobile app UI polished and visually appealing.