React Native Fundamentals - Part1

React-Native Fundamental Concepts Part 1 focuses on:
View
SafeAreaView
ScrollView
StyleSheets

For a full list of components and APIs goto https://reactnative.dev/docs/accessibilityinfo

Views

Views are containers that support layouts with flexbox, style, some touch handling, and accessibility controls.

View

A view Is the basic building block of UI. That is to say it is a small rectangular element on the screen which displays text, images, or respond to user input. I that case, even the smallest visual elements of an app, like a line of text or a button, are kinds of views. In addition, some kinds of views can contain other views. Such as, a container component like a web element div. Finally, it is also a good option for grouping or laying out children components.

SafeAreaView (iOS only)

In this case, the purpose of SafeAreaView is to render content within the safe area boundaries of a device. It is currently only applicable to iOS devices with iOS version 11 or later. Also, SafeAreaView renders nested content and automatically applies padding to reflect the portion of the view that is not covered by navigation bars, tab bars, toolbars, and other ancestor views. Moreover, and most importantly, Safe Area's paddings reflect the physical limitation of the screen, such as rounded corners or camera notches (i.e. the sensor housing area on iPhone X).

ScrollView

A generic scrolling container that can contain multiple components and views.

StyleSheet

With React Native, you style your application using JavaScript. Thus, all of the core components accept a prop named style. The style names and values usually match how CSS works on the web, except names are written using camel casing, e.g. backgroundColor rather than background-color.

What is React-Native

React Native is an open-source mobile application framework created by Facebook, Inc. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows and UWP by enabling developers to use React's framework along with native platform capabilities.

Additional Resources
React - https://reactjs.org/
Node - https://nodejs.org/en/
Visual Studio Code - https://code.visualstudio.com/
Android Development - https://developer.android.com/studio
Xcode - https://apps.apple.com/us/app/xcode/id497799835?mt=12