Nativescript: <view>.frame.origin does not change Y property

[ivanbuhov]

_From @roblav96 on September 21, 2016 7:46_

I'm building a pin login layout.

When each digit is pressed, the view.ios.frame.origin.y property reports 5 no matter where it is on the screen.

A giffy to help explain it

As you can see, no matter which digit I tap the view.ios.frame.origin.y property reports 5.

Source

<Page navigatingTo="onNavigatingTo">
    <GridLayout class="main" rows="*,auto">
        <StackLayout row="0" orientation="vertical" verticalAlignment="center">
            <Label class="desc" text="Please login with your PIN" textWrap="true" />
        </StackLayout>

        <StackLayout row="1" ios:class="bottom ios" android:class="bottom" orientation="vertical">
            <StackLayout class="digits" orientation="horizontal" horizontalAlignment="center">
                <Label text="{{ digits[0] || '_' }}" />
                <Label text="{{ digits[1] || '_' }}" />
                <Label text="{{ digits[2] || '_' }}" />
                <Label text="{{ digits[3] || '_' }}" />
            </StackLayout>
            <GridLayout rows="auto" columns="*,*,*">
                <Button row="0" col="0" text="1" id="btn_1" tap="{{ tapped }}" />
                <Button row="0" col="1" text="2" id="btn_2" tap="{{ tapped }}" />
                <Button row="0" col="2" text="3" id="btn_3" tap="{{ tapped }}" />
            </GridLayout>
            <GridLayout rows="auto" columns="*,*,*">
                <Button row="0" col="0" text="4" id="btn_4" tap="{{ tapped }}" />
                <Button row="0" col="1" text="5" id="btn_5" tap="{{ tapped }}" />
                <Button row="0" col="2" text="6" id="btn_6" tap="{{ tapped }}" />
            </GridLayout>
            <GridLayout rows="auto" columns="*,*,*">
                <Button row="0" col="0" text="7" id="btn_7" tap="{{ tapped }}" />
                <Button row="0" col="1" text="8" id="btn_8" tap="{{ tapped }}" />
                <Button row="0" col="2" text="9" id="btn_9" tap="{{ tapped }}" />
            </GridLayout>
            <GridLayout rows="auto" columns="*,*,*">
                <Button class="ion-icon" ios:text="&#xf11d;" android:text="&#xf28f;" row="0" col="0" tap="{{ clear }}"
                />
                <Button row="0" col="1" text="0" id="btn_0" tap="{{ tapped }}" />
                <Button class="ion-icon not-ready" ios:text="&#xf14a;" android:text="&#xf2bb;" row="0" col="2" tap="{{ submit }}"
                />
            </GridLayout>
        </StackLayout>
    </GridLayout>
</Page>

export function onNavigatingTo(args: NavigatedData) {
    let page: Page = <Page>args.object
    page.bindingContext = new Index(
        page
    )
}

class Index extends Observable {

    private _digits: Array<string> = []

    constructor(
        private _page: Page
    ) {
        super()
    }

    get digits(): Array<string> {
        return this._digits
    }
    set digits(value: Array<string>) {
        this._digits = value
        this.notifyPropertyChange('digits', value)
    }

    tapped(args: GestureEventData) {
        if (this.digits.length == 4) {
            return
        }
        let label: Label = <Label>args.object
        let ioslabel: UILabel = label.ios
        console.log('label.text', label.text)
        console.dir('ioslabel.frame.origin', ioslabel.frame.origin)
        if (this.digits.length < 4) {
            this._digits.push(label.text)
            this.digits = this._digits
        }
    }

    clear() {
        if (this.digits.length > 0) {
            this._digits.pop()
            this.digits = this._digits
        }
    }

}

tns-info

┌──────────────────┬─────────────────┬────────────────┬─────────────┐
│ Component        │ Current version │ Latest version │ Information │
│ nativescript     │ 2.3.0           │ 2.3.0          │ Up to date  │
│ tns-core-modules │ 2.3.0           │ 2.3.0          │ Up to date  │
│ tns-android      │ 2.3.0           │ 2.3.0          │ Up to date  │
│ tns-ios          │ 2.3.0           │ 2.3.0          │ Up to date  │
└──────────────────┴─────────────────┴────────────────┴─────────────┘

_Copied from original issue: NativeScript/ios-runtime#658_

[NickIliev]

@roblav96 I can confirm that in your scenario the _origin..y_ is always returning the same value. (origin.x is returning the value as expected).

Code to reproduce this behaviour can be found here

ping @tzraikov

[roblav96]

@NickIliev Ye, it's quite strange cause UIView.frame is a native Obj-C property which leads me to think this is Apple's issue? Not sure 👻

[hshristov]

@roblav96 frame property returns rectangle in parent view. Your buttons are in different GridLayouts so their 'y' is the same, only 'x' is different because they are in the same row but different column.
If you want to have different ;origin.y; you could define single GridLayout with 3 columns and 4 rows.

[roblav96]

@hshristov @NickIliev Oh sweet! Thank you!

Now I can do this:

http://i.imgur.com/tgIjVEJ.gif

[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.