Teach with us

Write a program to display "Hello World" in react native?

React NativeJavascriptMobile Development

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

raja
Shilpa S
Updated on 01-Jul-2021 08:18:14

Previous Page Print Page Next Page  
Advertisements