Namaste World with React Native 🙏🏻 ⚛️
We will start by deleting the boilerplate code provided to us by react native and rewrite the code by ourselves.
So we’ll first import React from react.
import React from 'react';
Now we’ll import some components from React Native.
import { View, Text, SafeAreaView } from 'react-native';
Now what is View, Text and SafeAreaView? let’s get to know about them briefly.
So View component is like a div in web, you can use it to wrap some elements or text. It is a container that supports styling, flexbox and more.
Text is basically used for displaying text. It supports nesting, styling and touch handling.
SafeAreaView is used to render the content within safe boundaries of the device. It is basically to avoid notches and navigation bar.
Now that we have understood the components that we imported let’s move forward with our application and create the main App component.
function App(){
return(
<SafeAreaView>
<View>
<Text>
Namaste World!!
</Text>
</View>
</SafeAreaView>
)
}
export default App;
This code will give you and output like the image showing below
As you can see we used SafeAreaView which helped us to render Namaste World below the notch clearly. If we had not used the SafeAreaView it would not have rendered clearly.
So this was it! Our namaste world mobile application. Hope it helped you