NativeScript components

Introduction to NativeScript components

There are various built-in components provided by NativeScript. Through components, one can break the UI into reusable, independent pieces, and can think about each piece in isolation. NativeScript comes with multiple user interface views which are also known as widgets. These views are used for building the user interface of a smartphone app. The corresponding native view meant for each platform is wrapped by most of the views of NativeScript and also provides a common API that is used for working with the views. Android.widget.Button is used for Button view on the android platform and UIButton is used for the iOS platform.

Components of NativeScript

Some of the components are explained below:

1. Button

The button is a tappable interface which is one of the easiest ways to interact with an app. A button can be used to invoke a custom logic that responds while the button gets tapped. Different actions can be attached with the tap of a button.

Property:

A text can be added to a button with the string data type. This will help in naming different buttons and show their unique actions.

Events:

1. Tap: The event occurs when the button gets tapped
2. Loaded: The event occurs when the view gets loaded.
3. Unloaded: The even occurs when the view gets unloaded
4. The layout changed: The event occurs when the layout bounds of the view get changed because of layout processing.

2. Label

The label is a text block that is used to define a certain view or component. A text label is provided using the label widget and it represents a read-only text.

Usage:

<Label text="I am Label Widget" textWrap="true"></Label>

Properties:

1. Letterspacing: This property uses a number data type. This property is used to set letter space style property.
2. Text: This property uses a string data type. It is used to set the text of the label.
3. Whitespace: The three options under this property are nowrap, initial and normal. This property is used to set the white-space style.
4. Lineheight: This property uses a number data type. IT is used to set the line-height style property.
5. Textdecoration: The options under this property are “none”, “line-through”, “underline”. This property sets the text decoration style.
6. Textwrap: This property uses Boolean data type. This property is used to set the label wrap to true or false.

3. Text Field

Text fields are used to take text inputs from the app user. In NativeScript, Textfield components help in taking text inputs from the user and it also has attributes related to the security and pipes which are used for securing the texts as it can be a password and for defining the format of the text respectively.

Usage:

There are different properties and events which are used to handle the text inputs of the user and for interacting with it. For submitting a value, we can use the returnPress event with the returnkeytype property. For making the Textfield focused, we can use focus events. We can also use the blue event for handling an interaction after the TextField has been used by the user. For showing or hiding the keyboard, focus and dismissSoftInput can be called.

Properties:

1. keyboardType: This property sets the soft keyboard type.
2. maxLength: This property allows number data type and it is used to set the maximum number of symbols which can be allowed as input.
3. Text: This property allows string data type and it is used to set the text of the Text field.
4. Autocorrect: This property allows Boolean data type and it is used to enable or disable the autocorrect feature.
5. Secure: This property allows Boolean data type and it is used for making the text field secure for password entry.

Events:

1. Blur: This event occurs when the text field is unfocused.
2. Textchange: This event occurs when there is a new input in the text field.
3. Focus: This event occurs when the text field is focused.
4. Returnpress: This event occurs when the return key gets pressed.

4. Text View

For typing larger text content in the app, the TextView component is used. Even the Text View component can be used for showing content if the editable property is set to false.

Properties:

1. Secure: This property allows string data type and it is used to set a text field for password entry.
2. letterSpacing: This property allows number data type and it is used to set the letter space style property.
3. Autocorrect: This property allows Boolean data type and this property is used for enabling or disabling autocorrection.
4. textAlignment: This property is used for setting up the text alignment.
5. maxLength: This property allows number data type and is used for setting up the maximum number of symbols allowed for input.
6. Editable: This property allows Boolean data type and it is used for enabling or disabling content editing.
7. lineHeight: This property allows number data type. It is used for setting up the line-height style.
8. textTransform: This property is used for setting up the text-transform.

Events:

1. textchange: This event occurs when a new text is an input.
2. Blur: This event occurs when the text field is left unfocused.

5. Search Bar

The search bar is one of the most common and important features in modern-day apps. The SearchBar module of NativeScript is very much similar to the android.widget.SearchView for android and UISearchBar for iOS. It is used for setting up a filter for the app’s content. Hints, submit, text properties, and clear events are also provided by this component.

Properties:

1. Text: This property allows string data type and is used for setting up a search bar text.
2. Hint: This property allows string data type and is used for setting up the search bar hints.

Events:

1. Clear: This event occurs when the search bar is cleared.
2. Submit: This event occurs when the search term gets submitted.

Conclusion

On the basis of the above article, we understood the concept of NativeScript components. This article explains several components of NativeScript including the Search bar, Text field, and many others. The properties and events of the components mentioned in this article are also explained which would help the beginners in implementing NativeScript components.

Recommended Articles

This is a guide to NativeScript components. Here we discuss the concept of NativeScript components and several components of NativeScript. You may also have a look at the following articles to learn more –

1. React Native DatePicker
2. React Native Element
3. JavaScript Clear Console
4. JavaScript keycodes