Hello World App in React Native

Hey friends, welcome back to my React Native series. Today, we will be creating our very first basic app i.e. Hello World in React Native. I know it's spoiler alert but if you are new then go and check out my previous article to follow me along.

So let's get started with our today's context...

• As you all know from our previous article that index.js file tells React Native which View needs to be rendered first when the application will load.

• Let's see the default code in index.js file.

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

• The line AppRegistry.registerComponent(appName, () => App); in code simply registers App component which is defined in App.tsx file to load at the start.

• It takes two parameters. The first is appName which we are importing from the app.json file and it is simply a name that we want to give to our app. The second parameter takes a callback function referring to the App component which we want to call.

• If you want then you can go ahead and create your own component and add it instead of the App component.

• As of now let's keep it as it is and let's write Hello World in App.tsx file.

Writing Hello World in App.tsx

• Firstly delete all the things in App.tsx file. We will rewrite it with some basic code.

• Now, as soon as you delete all code your app will crash (which is running on your device) with some error. The reason is it's not able to find the App component which is defined in the App.tsx file. So let's write it together.

function App() {}
export default App;

• So we wrote an App component (which is nothing but a Javascript function) and we need to export it if we want to access it in other files, hence we wrote the next line.

• Once you save this, your app will start refreshing. This time you won't get any errors. But on the screen, you will not see anything. It will be a blank white screen.

• To write Hello World text we need some elements to be imported from the react-native package. So let's see what are those.

import {
  SafeAreaView,
  View,
  Text
} from 'react-native';

function App() {}
export default App;

• Usage of each element:

  1. SafeAreaView: Its purpose is to render content within the safe area that is the boundaries of a device.

  2. View: It is like a <div> tag in HTML. It is a container in which we can wrap other elements.

  3. Text: It is used to display the text on the screen.

• Now let's write our Hello World text using these elements.

import {SafeAreaView, View, Text} from 'react-native';

function App() {
  <SafeAreaView>
    <View>
      <Text>Hello World!!!</Text>
    </View>
  </SafeAreaView>;
}

export default App;

• Even after writing this much code, you will not see anything on the screen because the lines inside the App function are JSX and JSX needs something to be returned to display on the screen.

• Also, remember one more thing in JSX each open tag should have a closing tag otherwise you will get an error.

• So let's wrap the code inside the return statement.

import {SafeAreaView, View, Text} from 'react-native';

function App() {
  return (
    <SafeAreaView>
      <View>
        <Text>Hello World!!!</Text>
      </View>
    </SafeAreaView>
  );
}

export default App;

• Boom!!! You should be seeing your Hello World text on your app. Congratulations, you have developed your first Hello World app.

• I know it's not very eye-catchy because we are not using any style over here. But don't be sad we will be learning that very soon. But at the beginning, showing you everything will be a little bit confusing.

Thank you guys for bearing me till the end. I hope this article has added some value to your knowledge. I will see you in our next article. Till that time try creating your first Hello World app.

---

Special thanks to Hitesh Choudhary !!!