Nativescript: Is there any way to use floating label on TextField?

[betosalvador]

Please, provide the details below:

I want to use floating label on my TextFields, how can I do that?

Did you verify this is a real problem by searching [Stack Overflow]

Yes

Tell us about the problem

I'm trying to implement that using this plugin: https://github.com/bradleygore/nativescript-textinputlayout. But I have no success, because I'm using Angular. After I followed the tutorial of this plugin, and build, the page with the tags of TextInputLayout, the page dont show anything.

Which platform(s) does your issue occur on?

Both

Please provide the following version numbers that your issue occurs with:

• My TNS versio is 2.4.1

Please tell us how to recreate the issue in as much detail as possible.

1- Generate a new TNS angular project
2- run tns plugin add nativescript-textinputlayout
3- add the code below on the main page:

<StackLayout>
        <!--TIL with all possible attrs via bindings-->
        <TIL:TextInputLayout class="demo-text-input-layout"
            hint="{{ hint }}"
            error="{{ error }}"
            errorEnabled="{{ isErrorEnabled }}"
            hintAnimationEnabled="{{ isHintAnimationEnabled }}"
            hintTextAppearance="SpecialTextInputLayout"
            counterEnabled="{{ isCounterEnabled }}">

            <!--ONE child element can be added, MUST be either TextField or TextView-->
            <TextField text="{{ demoText }}" />
        </TIL:TextInputLayout>

        <!--TIL with just a static hint-->
        <TIL:TextInputLayout hint="Hint Text">
            <TextField text="" />
        </TIL:TextInputLayout>
    </StackLayout>

Thanks in advance!

[tsonevn]

Hi @betosalvador,
Thank you for your interest in NativeScript.

I reviewed your case and the above-given plugin and I found that nativescript-textinputlayout has not been compatible with latest NativeScirpt. You could contact with the plugin author and to open new issue in its repo. You could also comment in the existing one, where has been reported that the plugin is not working, when you try to use it in a new project.
As a temporary solution, you could use NativeScript Animations and to create similar functionality. For you convenience I am attaching sample code.

I also notice that you are using NativeScript core syntax in NativeScript Angular project. For your help you could review our getting started tutorial, which could be a good starting point.

app.component.html

<StackLayout class="p-20">
    <GridLayout rows="50 auto">
        <Label row="1" id="labelid" fontSize="15" (tap)="onTap()" text="Name" textWrap="true"></Label>
        <TextField (tap)="onTap()" fontSize="15" row="1"  text=""></TextField>        
    </GridLayout>
</StackLayout>

app.component.ts

import { Component } from "@angular/core";
import {Page} from "ui/page";
import {Label} from "ui/label";
import {AnimationCurve} from "ui/enums";

@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
})
export class AppComponent {

    constructor(private page:Page){

    }

    public onTap() {
        var label:Label =<Label> this.page.getViewById("labelid");
        label.animate({
            translate: { x: 0, y: -10 },
            duration: 1000,
            curve: AnimationCurve.cubicBezier(0.1, 0.1, 0.1, 1)
        });
    }
}

Hope this helps.

[betosalvador]

Hello @tsonevn . Thanks for your response.

I understood your solution. In this case, I will have to implement all animations for floating label, like position, size small, and when user leave the focus on this field, the position and size must returns to original.

This should be applied to all my text fields in the form.

I cant figureout a simple way to do this, for this reason I want to use some plugin to help my in this work.

But, thank your very for your tip.

Best regards

[dimitarrusev]

Hey @betosalvador, you can use nativescript-textinputlayout with Angular perfectly fine. Check out this Stack Overflow answer.

[umeshrs]

Hi All.. I an getting these errors after I install this plugin on ios. Please, can you direct me to resolve this issue ?

The following build commands failed:
CompileSwift normal x86_64 /Volumes/Drive1/NS/BAv2/platforms/ios/Pods/SkyFloatingLabelTextField/Sources/SkyFloatingLabelTextField.swift
CompileSwift normal x86_64 /Volumes/Drive1/NS/BAv2/platforms/ios/Pods/SkyFloatingLabelTextField/Sources/SkyFloatingLabelTextFieldWithIcon.swift
CompileSwift normal x86_64 /Volumes/Drive1/NS/BAv2/platforms/ios/Pods/SkyFloatingLabelTextField/Sources/UITextField+fixCaretPosition.swift
CompileSwiftSources normal x86_64 com.apple.xcode.tools.swift.compiler
(4 failures)
Command xcodebuild failed with exit code 65

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.