In our second video on React Native: The Beginners Guide to React-Native Fundamental Concepts Part 1, we jump right into the basic fundamentals necessary to design and layout a mobile application. Such as View, SafeAreaView, Scrollview, and StyleSheets. To explain these fundamentals, we start by building a new application and follow a set of examples to fully examine each concept in detail.
Just in case you missed the first video or you need a refresher you can find the first video Started Using React Native For Your Mobile Applications here.
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
On Mobile devices the idea of 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.
React-Native Fundamental Concepts Part 1
Additional Resources
- React is an open-source, front end, JavaScript library for building user interfaces or UI components. In addition, Facebook and a community of individual developers and companies help maintain it. React can be useful as a base in the development of single-page or mobile applications.
- Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on Chrome V8 engine and executes JavaScript code outside a web browser.
- Visual Studio Code is a free source-code editor made by Microsoft for Windows, Linux and macOS. In addition it includes support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git.
- Android software development is the process by which applications are created for devices running the Android operating system.
- Xcode is Apple’s integrated development environment for macOS and is used to develop software for macOS, iOS, iPadOS, watchOS, and tvOS. In fact, it was first released in 2003; with the latest stable release is version 12.3, released on December 14, 2020, and is available via the Mac App Store free of charge for macOS Big Sur users.
This series comes from our mentoring/mastermind classes. These classes are virtual meetings that focus on how to improve our technical skills and build our businesses. After all the goals of each member vary. However, this diversity makes for great discussions and a ton of educational value every time we meet. We hope you enjoy viewing this series as much as we enjoy creating it. As always, this may not be all new to you, but we hope it helps you be a better developer.