NativeScript Vue — Text Input and Time Picker

Vue is an easy to use framework for building front end apps.

NativeScript is a mobile app framework that lets us build native mobile apps with popular front end frameworks.

In this article, we’ll look at how to build an app with NativeScript Vue.

TextField

The TextField component lets us add a text input into our app.

For example, we can use it by writing:

<template>
  <Page>
    <ActionBar title="NativeScript App"></ActionBar>
    <FlexboxLayout flexDirection="column">
      <TextField v-model="textFieldValue" />
      <Label :text="textFieldValue" style="text-align: center" />
    </FlexboxLayout>
  </Page>
</template>

<script >
export default {
  data() {
    return {
      textFieldValue: "",
    };
  },
};
</script>

We add the TextField component and add the v-model directive to bind the input value to the textFieldValue reactive property.

Then we display that value in the Label .

So when we type in something, the inputted value is shown.

We can also add the hint prop to add an input placeholder.

And the secure prop hides the entered text when it’s true .

It also takes the autocorrect prop to enable or disable autocorrect.

TextView

We can add a TextView to our NativeScript Vue app to show an editable or read-only multiline text container.

To add an editable TextView , we can write:

<template>
  <Page>
    <ActionBar title="NativeScript App"></ActionBar>
    <FlexboxLayout flexDirection="column">
      <TextView v-model="textViewValue" />
      <Label :text="textViewValue" style="text-align: center" />
    </FlexboxLayout>
  </Page>
</template>

<script >
export default {
  data() {
    return {
      textViewValue: "",
    };
  },
};
</script>

We bind the inputted value to the textViewValue with the v-model directive.

Also, we can use it to display multi-style text by writing:

<template>
  <Page>
    <ActionBar title="NativeScript App"></ActionBar>
    <FlexboxLayout flexDirection="column">
      <TextView :editable="false">
        <FormattedString>
          <Span text="You can use text attributes such as " />
          <Span text="bold, " fontWeight="Bold" />
          <Span text="italic " fontStyle="Italic" />
          <Span text="and " />
          <Span text="underline." textDecoration="Underline" />
        </FormattedString>
      </TextView>
    </FlexboxLayout>
  </Page>
</template>

<script >
export default {
  data() {
    return {
      textViewValue: "",
    };
  },
};
</script>

We set the editable prop to false to disable editing.

And then we add the FormattedString and Span components to add the styled text.

TimePicker

We can use the TimePicker component to add a time picker into our NativeScript Vue app.

For example, we can write:

<template>
  <Page>
    <ActionBar title="NativeScript App"></ActionBar>
    <FlexboxLayout flexDirection="column">
      <TimePicker v-model="selectedTime" />
      <Label :text="selectedTime" style="text-align: center" />
    </FlexboxLayout>
  </Page>
</template>

<script >
export default {
  data() {
    return {
      selectedTime: undefined,
    };
  },
};
</script>

We bind the selected time value to the selectedTime reactive property with v-model .

And we display the selected item with the Label .

We can set the following props to configure the TimePicker :

• hourNumber — gets or sets the selected hour.
• minuteNumber — gets or sets the selected minute.
• timeDate — gets or sets the selected time.
• minHourNumber — gets or sets the minimum selectable hour.
• maxHourNumber — gets or sets the maximum selectable hour.
• minMinuteNumber — gets or sets the minimum selectable minute.
• maxMinuteNumber — gets or sets the maximum selectable minute.
• minuteIntervalNumber — gets or sets the selectable minute interval.

Conclusion

We can add various kinds of input controls into our NativeScript Vue mobile app.