In this tutorial, I am going to explain and show how we can set Text component Horizontally and Vertically at the center of the screen with complete source code. Text component is used to show simple text on the screen even you can also make Text component clickable in react native.
Now, let’s get started.
Step #1: Create a new and fresh react native project, if you don’t know how to create a project in react native just follow this tutorial.
Step #2: Open your project in any editor( Visual Studio Code, Sublime etc. ) and open index.android.js / index.ios.js file. Remove all the code from this file, because we are going to start from scratch. 🙂
Step #3: Import all required components from react , react-native .
import React, { Component } from 'react'; import { AppRegistry, View, Text, StyleSheet } from 'react-native';
Step #4: Create a class and implement it’s render and return methods.
class App extends Component { render() { return( <View style = { styles.container }> <Text style = { styles.text }>Hello, Guest</Text> </View> ); } }
Explanation:
- we simply create a class with class keyword and return a Text component wrapped by View component.
Step #5: Implement styles for components.
const styles = StyleSheet.create( { container: { flex: 1, justifyContent: 'center', // Used to set Text Component Vertically Center alignItems: 'center' // Used to set Text Component Horizontally Center }, text: { fontSize: 35 } });
Explanation:
- flex is used to define the layout of the component and makes responsive layout, here 1 means that a component with ID container takes whole remaining space on the screen. In our case we have only 1 View component. So it covers whole screen.
- flex supports a very special property named as flexDirection , which is used to change the default flow of layout. flexDirection supports two values named as row or column and according these values justifyContent and alignItems properties work. By default, flexDirection value is column . It means all the child components are arranged in a column layout or from top to bottom manner or if flexDirection value is row then it means all the child components are arranged in a row layout or from left to right manner. As in our case, no flexDirection value is specified then it means it takes default column value and sets our layout in column manner and justifyContent: ‘center’ , alignItems:’center’ properties set our Text component respectively Vertically and Horizontally center.
- You can set any react native component at the center of the screen using this approach such as: Image , Button , ActivityIndicator etc.
Always Remember:
- If we supply column for flexDirection and center for both justifyContent and alignItems properties then justifyContent sets our child component Vertically center and alignItems Horizontally center.
- If we supply row for flexDirection and center for both justifyContent and alignItems properties then justifyContent sets our child component Horizontally center and alignItems Vertically center.
Step #6: Register your app with AppRegistry .
AppRegistry.registerComponent('App', () => App);
Complete Source Code for index.android.js / index.ios.js:
import React, { Component } from 'react'; import { AppRegistry, View, Text, StyleSheet } from 'react-native'; class App extends Component { render() { return( <View style = { styles.container }> <Text style = { styles.text }>Hello, Guest</Text> </View> ); } } const styles = StyleSheet.create( { container: { flex: 1, justifyContent: 'center', // Used to set Text Component Vertically Center alignItems: 'center' // Used to set Text Component Horizontally Center }, text: { fontSize: 35 } }); AppRegistry.registerComponent('App', () => App);
Step #7: Run your app with react-native run-android for android and react-native run-ios for iOS devices.
- Output in iOS emulator:
- Output in Android emulator:
Please feel free to comment if you didn’t get any point… 🙂 and Enjoy…
Very Nice Tutorial Sir.
This is a very good tip particularly to those fresh to
the blogosphere. Shorrt but veryy precise information…Thankss for sharing this one.
A must read article!
Thanks Vivian
Wohh exactly what I was looking for, thanks for posting.
Thanks Nitridex.
Wow! After all I got a blog from where I be able to actually take valuable data regarding
my study and knowledge.
Thanks
Hello,nice share.
Thanks
Wonderful, what a blog it is! This blog presents valuable
information to us, keep it up.
Thanks