Rewriting your new React native application

After initialising your React Native app, you can explore your project by finding app.tsx

Here is an example of App.jsx i.e Rewritten by removing all the previous code provided to us by boilerplate.

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

function App(){
  return (
    <SafeAreaView>
      <View>
        <Text>Hello</Text>
        <Text>Hello Ram Ji</Text>
        <Text>Hello sweets</Text>
      </View>
    </SafeAreaView>
  )
}

export default App;

Important imports

• SafeAreaView: Used to protect the content from some nought display devices.

• View: Used as div that we used in web development.

• Text: To display text on your device.

Modifications in App Component

You can modify your project by adding text inside the App component.

function App(){
  return (
    <SafeAreaView>
      <View>
        <Text>Hello</Text>
        <Text>Hello Ram Ji</Text>
        <Text>Hello sweets</Text>
      </View>
    </SafeAreaView>
  )
}

So we saw a bare minimum react-native app that has only a few lines of code but it makes us a little bit more comfortable with React Native.