Let's jump to our App.tsx file.

This is the default output when we run the application without any changes.

Now, remove everything from the file and save the file and run. You should see an error on the screen like below saying that the file App.tsx is not exported. That's true because we don't have anything in the file and index.js file is expecting it to be exported.

Now let's add a couple of lines to get rid of the error. By adding this in App.tsx file we are properly exporting it. The result is that we will be seeing a blank screen on output and yes the error is gone as well.

function App() {}
export default App;

Now let's move a step further.

Before that, we need to import a few components to view content on screen. Some of them are

• <View>: It is like a wrapper for content.

• <Text>: This is used to write text or say content.

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

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

export default App;

Note: Every tag must be closed in react-native

Now run the application. You should still see the blank screen on output because you are not returning anything inside App() function. Let's return the whole thing inside App().

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

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

export default App;

Now run again and you should finally see the output with "Hello World !" on the screen.

More...

Let's have some fun by playing around with some more components.

We have SafeAreaView which is used majorly to counter screens having notches.

Also, let's use Image component. Import both as below.

import { SafeAreaView, Image } from 'react-native'

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

function App() {
  return (
    <SafeAreaView>
      <View>
        <Text>Hello World !</Text>
        <Button title="Submit" />
      </View>
    </SafeAreaView>
  );
}

export default App;

---

That's it! Hope you were able to make some progress in your journey as react native developer with me.

Stay tuned for more such blogs.