Hey folks! Here we'll see how to customize our react native app's home screen and show hello world.
First, let's understand the basic file structure in a react app. I want you to take a look at index.js file .
This file is responsible for rendering all the components of our react-native app. If you look closely, the AppRegistry is registering a component which is taking 2 parameters, first is the appName which is coming from app.json and it declares name of your app, and the second parameter is App which is component in itself and coming from './App'. Now you know, this App.tsx file is responsible for all the things you are seeing in your app. So all the customizations we'll do are within App.tsx
Let's open App.tsx now. You'll see a bunch of code there but don't worry and clear it all. Now we'll see the basic file structure of App.tsx.
Here's our hello world. let's understand the code flow now.
First, we imported react because obviously, we'll be using some of the libraries from react. And then comes react native, we're importing a few core components from it like Text, View and safe area view. I'll recommend you check out the actual website and take a look at some of the core components.
Let's add one more component which is Button that I picked up from the website as an assignment.
<Button
title="Learn More"
color="#841584"
/>
Add this code just below Hello world text and you'll see a button on the screen.
Then we created a function named App() (as it was imported in index.js). This function returns a JSX component which should always be wrapped around any core component. Here we've wrapped it around <SafeAreaView> as it is always a good practice. One thing to keep in mind is that this function should always return, a JSX element. I don't use return, nothing will be shown on our screen but it won't throw any error too.
In the next blog, we'll talk about style sheets and how we style elements in react app
Thanks for reading !!!