
- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Write a program to display "Hello World" in react native?
Once ReactNative is installed on your system, you should get a default code in App.js as follows −
import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default class App extends React.Component { render() { return ( <View style = {styles.container}> <Text>Open up App.js to start working on your app!</Text> <Text>Changes you make will automatically reload.</Text> <Text>Shake your phone to open the developer menu.</Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, });
Now you are free to change the code as per your requirement. We are interested here to display the text Hello World in the app.
To start with you need to first import the required components and modules. We need the React module so let’s import that first as shown below −
import React from 'react';
Next let’s import the other components that we are going to use in our code to display text Hello World.
import { StyleSheet, Text, View } from 'react-native';
We have imported a StyleSheet, Text and View component. We need StyleSheet component to style the View and Text component. The View component will be the parent component that will have Text component as its child.
The App is the default class that is exported and you run the project you should be able to see the text in <Text> component on your device as shown below −
export default class App extends React.Component { render() { return ( <View style = {styles.container}> <Text>Open up App.js to start working on your app!</Text> <Text>Changes you make will automatically reload.</Text> <Text>Shake your phone to open the developer menu.</Text> </View> ); } }
Change the text to Hello World as shown below −
export default class App extends React.Component { render() { return ( <View style = {styles.container}> <Text>Hello World</Text> </View> ); } }
The style's props are added to the View component. The value given is styles.container. The props value has to be given in curly brackets {} i.e style={styles.container}.
The styles object is created using StyleSheet.create(). All you style for the components can be defined inside StyleSheet.create(). Right now we have defined the container style that is used on View component as <View style={styles.container}></View>. The style forText variable is used to style the Text component.
const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, forText: { color: 'green', fontSize: '25px' } });
Here is the full code that helps to display Hello World on your mobile screen using ReactNative.
import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default class App extends React.Component { render() { return ( <View style = {styles.container}><Text style={styles.forText}>Hello World</Text></View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, forText: { color: 'green', fontSize: '25px' } });
Output
- Related Questions & Answers
- How to write "Hello, World!" program in JavaScript?
- How to write "Hello World" Program in C++?
- C++ "Hello, World!" Program
- How to write "Hello World" in C#?
- Analysis of Java "Hello World" Program
- A closer look at Java "Hello World" program
- Internal Analysis of Java "Hello World" Program
- How to print "Hello World!" using Python?
- What is the difference between String s1 = "Hello" and String s1= new String("Hello") in java?
- Display hello world using React.js
- How to use the "native" GUI look with Tkinter?
- How to display loading indicator in React Native?
- Hello World Program in Java
- Java regex program to match parenthesis "(" or, ")".
- Python Program to Print Hello world