[BottomSheet] Angular 11 - Attempt to invoke virtual method 'androidx.fragment.app.FragmentTransaction' on a null object reference

[bastienlemaitre]

Hi !

Which platform(s) does your issue occur on?

• Android
• Min Android SDK 23
• Galaxy S20+5G

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

• CLI: 7.0.11
• package.json

{
  "name": "@nativescript/template-hello-world-ng",
  "main": "main.js",
  "version": "7.0.8",
  "author": "NativeScript Team <[email protected]>",
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "publishConfig": {
    "access": "public"
  },
  "keywords": [
    "nativescript",
    "mobile",
    "angular",
    "{N}",
    "template"
  ],
  "repository": "<fill-your-repository-here>",
  "bugs": {
    "url": "https://github.com/NativeScript/NativeScript/issues"
  },
  "dependencies": {
    "@angular/animations": "~11.0.0",
    "@angular/common": "~11.0.0",
    "@angular/compiler": "~11.0.0",
    "@angular/core": "~11.0.0",
    "@angular/forms": "~11.0.0",
    "@angular/platform-browser": "~11.0.0",
    "@angular/platform-browser-dynamic": "~11.0.0",
    "@angular/router": "~11.0.0",
    "@nativescript-community/ui-material-bottomsheet": "^5.1.6",
    "@nativescript/angular": "~11.0.0",
    "@nativescript/core": "~7.0.0",
    "@nativescript/fingerprint-auth": "^7.0.0",
    "@nativescript/theme": "~3.0.0",
    "@nstudio/nativescript-snackbar": "^2.1.0",
    "class-transformer": "^0.3.1",
    "jwt-decode": "^3.1.2",
    "nativescript-braintree": "^3.0.1",
    "nativescript-oauth2": "^3.0.2",
    "nativescript-secure-storage": "^2.6.2",
    "reflect-metadata": "~0.1.12",
    "rxjs": "^6.6.0",
    "zone.js": "~0.11.1"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~11.0.0",
    "@nativescript/android": "7.0.1",
    "@nativescript/types": "~7.0.0",
    "@nativescript/webpack": "~3.0.0",
    "@ngtools/webpack": "~11.0.0",
    "sass": "^1.29.0",
    "typescript": "~4.0.0"
  },
  "gitHead": "41a7254d3bc134fd3c258761f3c6e1c3d54e6d41",
  "private": "true",
  "readme": "NativeScript Application"
}

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

I'm trying to open BottomSheet here: Component

@Component({
    selector: 'home',
    templateUrl: 'home.component.html'
})

export class HomeComponent implements OnInit, AfterViewInit {
    constructor(
        private _authService: AuthService,
        private _paymentService: PaymentService,
        private _biometricService: BiometricService,
        private _bottomSheetService: BottomSheetService, 
        private _viewContainerRef: ViewContainerRef,
    ) { }
    ngAfterViewInit(): void {
        const options: BottomSheetOptions = {
            viewContainerRef: this._viewContainerRef,
            context: ['Facebook', 'Google', 'Twitter']
        };

        this._bottomSheetService.show(SubscriptionComponent, options).subscribe(result => {
            console.log('Option selected:', result);
        });
    }

    ngOnInit() {
    }
}

Module :

@NgModule({
    imports: [
        NativeScriptModule,
        NativeScriptCommonModule,
        NativeScriptMaterialBottomSheetModule.forRoot(),
    ],
    exports: [],
    declarations: [HomeComponent, SubscriptionComponent],
    entryComponents : [SubscriptionComponent],
    providers: [],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class HomeModule { }

Child component:

@Component({
    selector: 'subscription',
    templateUrl: 'subscription.component.html',
    styleUrls: ['subscription.component.scss']
})

export class SubscriptionComponent implements OnInit {
    constructor() { }

    ngOnInit() { }
}

Error:

JS: ERROR Error: Uncaught (in promise): Error: java.lang.NullPointerException: Attempt to invoke virtual method 'androidx.fragment.app.FragmentTransaction androidx.fragment.app.FragmentTransaction.add(androidx.fragment.app.Fragment, java.lang.String)' on a null object reference
JS: _showNativeBottomSheet(file: node_modules\@nativescript-community\ui-material-bottomsheet\bottomsheet.android.js:119:0)
JS:     at showBottomSheet(file: node_modules\@nativescript-community\ui-material-bottomsheet\bottomsheet-common.js:89:0)
JS:     at (file: node_modules\@nativescript-community\ui-material-bottomsheet\angular\fesm2015\nativescript-community-ui-material-bottomsheet-angular.js:32:0)
JS:     at push.../node_modules/@nativescript/zone-js/zone-nativescript.js.ZoneDelegate.invoke(file: node_modules\@nativescript\zone-js\zone-nativescript.js:388:0)
JS:     at push.../node_modules/@nativescript/zone-js/zone-nativescript.js.ZoneDelegate.invoke(file: node_modules\@nativescript\zone-js\zone-nativescript.js:387:0)
JS:     at push.../node_modules/@nativescript/zone-js/zone-nativesc...

Any idea ? Thanks !

[bastienlemaitre]

@farfromrefug ?