Set Text Align Vertically Horizontally Center in React Native Android iOS

Text component is the most basic component in react native applications and used to display text in apps. Occasionally developer needs to show the Text just middle of application screen . So using this tutorial you can easily place the Text Align in just center of android and iOS device screen.

Contents in this project Set Text Align Vertically Horizontally Center :

1. Start a fresh React Native project. If you don’t know how then read my this tutorial.

2. Add AppRegistry, StyleSheet, Text and View component in import block.

3. Add View as parent view in render’s return block.

4. Create custom css class named as MainContainer just above the AppRegistry.registerComponent line.

justifyContent: ‘center’ sets the View’s inside child component align Vertically center.

alignItems: ‘center’ sets the View’s inside child component align Horizontally center.

5. Call the MainContainer class in View.

6. Add Text component inside View . Using Inline CSS style setting up Text font size as 25 pixels and Font color as back using hex code.

7. Complete source code of index.android.js / index.ios.js file :

Screenshot:

Text Align

Leave a Reply

Your email address will not be published. Required fields are marked *