Writing My First React-Native App

Today, I successfully built and ran my first React Native application to display "Hello world" and also learned about the components used in React Native.
The first step is to open the app.tsx file. At first glance, it may seem like there is a lot of code, but taking it step by step will help you understand what those components meaning and which ones are important in it.
To proceed further Just remove the complete coding, and start writing on your own.
The thing which must be included are:

  1. import react : react native is built on top of react so we need react

     import React from "react";
    
  2. import from react-native: we need import component from react-native. It includes view, scrollview, Text, button etc. There can be number of components that can be imported as per app requirement.

     import {
       View,
       ScrollView,
       SafeAreaView,
       Text,
       Button,
    
     } from "react-native";
    
  3. export default App: This line of code is mandatory to include, but remember that we haven't defined any App function yet. So, the next step is...

     export default App
    

define a function App() : This function returns a complete code which we need to display.

function App() {
  return (
  <SafeAreaView>
    <View>
    <Text>"Hello world" </Text>
    </View>
    <Button title = "button" onPress={() => console.log("Button pressed")} />

  </SafeAreaView>
  )
}

That's it. We can now run the application. Remember, in the App() function, we should always open and close the tags for the component, like <View></View>. Also, notice that the Button has a self-closing tag. As we continue to learn more about components, we will gain a deeper understanding of them.

Summary: This markdown content provides a step-by-step guide on building and running a React Native application to display "Hello world." It covers the necessary imports, defining the App function, and including components like View, Text, and Button. It emphasizes the importance of understanding and properly using components in React Native development.

Thanks Hitesh Choudhary for providing such a nice explanation for learning React Native