EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login
Home Software Development Programming Languages NativeScript components
Secondary Sidebar
Software Testing Interview Questions

What is JavaScript?

WordPress vs Wix

Web Services Interview Questions

Spring framework Interview Questions

Orphaned Case Java

NativeScript components

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:

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

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
Popular Course in this category
Programming Languages Training (41 Courses, 13+ Projects, 4 Quizzes)
  41 Online Courses |  13 Hands-on Projects |  322+ Hours |  Verifiable Certificate of Completion
4.5
Price

View Course
Primary Sidebar
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Live Classes
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

ISO 10004:2018 & ISO 9001:2015 Certified

© 2023 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you

Let’s Get Started

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA Login

Forgot Password?

By signing up, you agree to our Terms of Use and Privacy Policy.

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more