Basics of React Native Explained

Complex Folder Structure

• The folder structure is not complex don't get afraid from it.

• For simplicity just assume you will write mainly all your code in App.tsx.

• Now go in App.tsx , you have initialized a basic App if not you can read my detailed article for it here :Article Link

• Now coming back go to your App.tsx and remove all the data from there lets write it from scratch.

1. Import React from React as it is the base.

2. Now import SafeAreaView , View and Text from React-native.

3. SafeAreaView is nothing but a component that ensures that the visibility of the content in it is not effected by the Screen or bezel size.

Detail About SafeAreaView ( Optional )

In React Native, SafeAreaView is a component that renders content within the safe area boundaries of a device. This is particularly important on devices with notches, rounded corners, or other screen design elements that could obscure content or affect its layout.

Key Points about SafeAreaView

1. Purpose:

   • Ensures that content is not obscured by device-specific UI elements such as the status bar, navigation bar, or the notch on iPhones.

2. Usage:

   • Wrap your main content or critical UI elements within a SafeAreaView to ensure they remain fully visible and accessible.

4. View is just like a div in the web world it does the same work.

5. Text is just like normal text.

Initialization of a basic Hello World App

import React from 'react';

import {
  SafeAreaView,
  View, // div in the world of web
  Text,
} from 'react-native';


function App(): React.JSX.Element {

  return (
    <SafeAreaView>
      <View>
      <Text>Hello World </Text>
      </View>
    </SafeAreaView>
  );
}
export default App;

And that's it congrats on your first Hello World App.

Follow me on LinkedIn