Native Components, Core Components, and APIs

Learn about native components, core components, and different types of APIs provided by React Native.

We'll cover the following

Native components

Each mobile application platform uses its own set of languages to write views. Android developers use Kotlin or Java to write UI views, and iOS developers use Swift or Objective-C. React Native allows us to build these views using JavaScript.

Note: In mobile application development, a view is a basic building block. It is a small rectangular element of a screen that can display text, images, buttons, or another UI component. A view can have another view as well. We will learn more about it in upcoming lessons.

React Native comes with built-in native components. These native components include ViewManager, createViewInstance, MapView, and others. We can create a complete application using these native components.

Core components and APIs

There are many prebuilt components available in React Native for application development. These built-in components are called core components. These core components can be used to describe the UI on Android and iOS platforms. The APIs of the platform can be accessed using JavaScript with React Native. Some of the most commonly used core components in React Native are listed below.

UI Component

Android View

iOS View

Web

Description

<View>

<ViewGroup>



<UIView>


non-scrolling <div>




Contains all content and supports flexbox, styling, and touch handling

<Text>


<TextView>



<UITextView>


<p>



Displays and styles text, and also supports touch handling

<Image>


<ImageView>



<UIImageView>



<img>



Displays images


<ScrollView>


<ScrollView>



<UIScrollView>



<div>



Contains views and components


<TextInput>


<EditText>



<UITextField>



<input type = "text">



Takes input as text from the user




Core components can be further divided into several categories. The illustration below represents different categories of core components in React Native.

Let’s discuss these categories in detail.

Basic components

Basic components are the ones that the majority of applications employ as their most prevalent elements. React Native provides these basic components:

  • View

  • Text

  • Image

  • TextInput

  • ScrollView

  • StyleSheet

User interface and user interaction

React Native provides these common user interface controls, which can be rendered on any platform:

  • Button

  • Touchables such as TouchableHighlight, TouchableNativeFeedback, TouchableOpacity, and TouchableWithoutFeedback

  • Switch

  • Gesture responder system

List view

List view components are an efficient option for showing lengthy lists of data. React Native provides these list-view components:

  • FlatList

  • SectionList

Android components and APIs

React Native’s Android components are useful for constructing wrappers for Android classes. React Native provides these Android components and APIs:

  • BackHandler

  • DrawerLayoutAndroid

  • PermissionAndroid

  • ToastAndroid

iOS components and APIs

React Native’s iOS components are useful for constructing wrappers for UIkitUtility kit classes that are used to style components. classes.

Note: This course will not cover iOS components and APIs in depth because it focuses exclusively on Android-based components.

This is one of the iOS-based APIs that React Native provides:

  • ActionSheetiOS

Miscellaneous components and APIs

Apart from the core components mentioned above, React Native provides other useful components for different purposes, such as displaying an alert if there is an error and rendering animations. Some of these components are:

  • ActivityIndicator

  • Alert

  • Dimensions

  • KeyboardAvoidingView

Note: We’ll go through all of these components in detail in upcoming lessons.