Nativescript : TypeError: Cannot read property 'LayoutParams' of undefined

Question

I'm buiding a Camera component using this

Html

<StackLayout exampleTitle toggleNavButtonrm>
    <ScrollView>
        <!-- >> camera-module-html -->
        <FlexboxLayout flexDirection="column-reverse">
            <Image [src]="imageTaken" flexGrow="3" class="img-rounded"></Image>  
            <Button text="Take Photo" class="btn btn-primary btn-active" (tap)="onTakePhoto()" flexGrow="1"></Button>
            <Button text="Request permissions" class="btn btn-primary btn-active" (tap)="onRequestPermissions()" flexGrow="1"></Button>         
        </FlexboxLayout>
        <!-- << camera-module-html -->
    </ScrollView>
</StackLayout>

component.ts

import { Component } from "@angular/core";
import { ImageAsset } from "image-asset";
import * as camera from "nativescript-camera";

@Component({
    selector: 'using-camera-component',
    templateUrl: 'pages/createexpense/expense-photo.html'
})

export class ExpensePhotoComponent {

    public imageTaken: ImageAsset;
    public saveToGallery: boolean = true;
    public keepAspectRatio: boolean = true;
    public width: number = 300;
    public height: number = 300;

    onTakePhoto() {
        var options = { width: this.width, height: this.height, keepAspectRatio: this.keepAspectRatio,  saveToGallery: this.saveToGallery };
        camera.takePicture(options)
            .then(imageAsset => {
                this.imageTaken = imageAsset;
                console.log("Size: " + imageAsset.options.width + "x" + imageAsset.options.height);
            }).catch(err => {
                console.log(err.message);
            })
    }

    onRequestPermissions() {
        camera.requestPermissions();
    }


    onCheckForCamera() {
        var isCameraAvailable = camera.isAvailable();
        console.log("Is camera hardware available: " + isCameraAvailable);
    }

}

This is the trace im getting :

java.lang.RuntimeException: Unable to resume activity {org.nativescript.finlyng/com.tns.NativeScriptActivity}:
com.tns.NativeScriptException: Calling js method onCreateView failed
TypeError: Cannot read property 'LayoutParams' of undefined
File: "/data/data/org.nativescript.finlyng/files/app/tns_modules/ui/core/view.js,
line: 507, column: 68
StackTrace: 
  Frame: function:'ViewStyler.setNativeLayoutParamsProperty', file:'/data/data/org.nativescript.finlyng/files/app/tns_modules/ui/core/view.js',
line: 507, column: 69 Frame: function:'StylePropertyChangedHandler.applyProperty', file:'/data/data/org.nativescript.finlyng/files/app/tns_modules/ui/styling/style.js', line: 1326, column: 14 Frame: function:'Style._applyStyleProperty', file:'/data/data/org.nativescript.finlyng/files/app/tns_modules/ui/styling/style.js', line: 1086, column: 25 Frame: function:'Style._applyProperty', file:'/data/data/org.nativescript.finlyng/files/app/tns_modules/ui/styling/style.js', line: 1049, column: 14

How should I resolve this ? Thanks

Nick Iliev Nick Iliev · Accepted Answer · 2016-11-02T07:45:09

Your code is fine but in order to use FlexboxLayout and ImageAsset module you will need tns-core-modules@next in your application (as these features are not officially released and will appear with NativeScript 2.4.0)

Notice that the sample application you are refering has the follwing dependency in its package.json

"tns-core-modules": "next"

Try to update the tns-core-modules this way:

tns plugin remove tns-core-modules
tns plugin add tns-core-modules@next

and then delete node_modules and platforms folders and rebuild your app.

Nativescript : TypeError: Cannot read property 'LayoutParams' of undefined

1 Answers