Simple “Hello World” Example by React Native

Since functional components are simpler in terms of syntax, reading and testing, they are commonly preferred. Although they have some advantages over class components, they had been called stateless until the usage of Hooks with React. After React v.16.8 versions, with useState Hooks, functional components can be stateful while maintaining their benefits such as simplicity in writing and testing, more focusing on the separation of container and presentation.

A simple functional component can be given as an example as follows:

import React from ‘react’;
import {StyleSheet, Text, View} from ‘react-native’;
const HelloWorld = () => {
   return (
      <View style={styles.container}>
         <Text style={styles.text}> Hello world!</Text>
      </View>
   )
}
const styles = StyleSheet.create({
container: {
   flex: 1,
   backgroundColor: ‘#ddd’,
   alignItems: ‘center’,
   justifyContent: ‘center’,
},
text:{
   fontSize:20,
   color:”red”
}
});
export default HelloWorld;

In the example above, text is wrapped by <View></View> core component which has simple style properties that center the text on the screen. This is just the easy way to demonstrate a simple “Hello world” text.

This HelloWorld component is used in our App.js file as below: