First Changes to the Basic React Native App

Hopefully by now, like me, you're up and running with your first React Native app and viewing it on your own phone. If not, I strongly recommend reviewing Hitesh's videos and/or visiting his Discord server (linked from each video in the playlist) to get help.

After reviewing the folder and file structure of the basic app (the one that is there by default after creating the React Native app), Hitesh had us delete the entire contents of App.tsx and writing our own, just to get used to it.

First we added the import statements for React itself, and the React Native components required:import React from "react";

import React from 'react';

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

Next, we wrote the App function and the export default statement (to make the function available elsewhere:

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

export default App;

Our 'homework' was to add any other React Native component into the code ourselves. Here's my finished code, built based on this Digital Ocean article.

import React from "react";

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

function App() {
  return (
    <SafeAreaView>
      <View>
        <Text>Hello World!</Text>
        <Button 
        onPress={() => Alert.alert("That's all folks!")}
        title="alert-button"
        color="red"
          >

          </Button>
      </View>
    </SafeAreaView>
  )
}

export default App;

So, for now, my app contains a line of text saying "Hello World!", beneath which there is a red button labelled "Alert-Button". When you click / press this button an alert pop-up appears that says "That's all folks!"

As you can see:

1) Even individual components (view, text, button etc) have to be imported from React Native itself, as well as the React library overall

2) The component we are creating is written as a function, which contains a return statement containing the JSX code that renders as HTML on the page.

I hope this may be helpful for some people. Happy coding!