Bottombar is crashing in ios
Closed this issue · 27 comments
Hello,
I am trying to use bottombar in both android and ios. I am trying to build the android app on windows and ios app on clould using side kick.
Android app is working fine but ios app is crashing. The ios app crashingas soon as I am navigating to the home page.
After long debugging, I found that it is not able to intialize MiniTabBar and app is crashing
var BottomBar = (function(_super) {
__extends(BottomBar, _super);
function BottomBar() {
var _this = _super.call(this) || this;
var items = new Array();
_**this.nativeView = new MiniTabBar({**
items: items,
titleState: 0
});
<StackLayout row="1" orientation="horizontal">
<BottomBar verticalAlignment="center"
row="1" [items]="items" [hide]="hidden" [titleState]="titleState"
(loaded)="tabLoaded($event)" (tabSelected)="tabSelected($event)"
[inactiveColor]="inactiveColor" [accentColor]="accentColor" colored="true"></BottomBar>
</StackLayout>
Hi @rhanb, Thanks for reply.
Here it is
import { Component } from "@angular/core";
import { Page } from "ui/page";
import { Router } from "@angular/router";
import { registerElement } from 'nativescript-angular';
import { BottomBar, BottomBarItem, TITLE_STATE, SelectedIndexChangedEventData, Notification } from 'nativescript-bottombar';
registerElement('BottomBar', () => BottomBar);
@Component({
selector: "nsapp",
templateUrl: "pages/home/home.html",
styleUrls: ["pages/home/home-common.css", "pages/home/home.css"],
})
export class HomeComponent {
public hidden: boolean;
public titleState: TITLE_STATE;
public _bar: BottomBar;
public inactiveColor: string;
public accentColor: string;
constructor(private page: Page, private route: Router) {
//page.actionBarHidden = true;
}
public items: Array<BottomBarItem> = [
new BottomBarItem(0, "Dashboard", "ic_paperplane", "#b0245f"),
new BottomBarItem(1, "Compose", "ic_paperplane", "#b0245f", null),
new BottomBarItem(2, "Message Log", "ic_paperplane", "#b0245f", null)
// new BottomBarItem(3, "Contacts", "ic_favorite", "#b0245f", null),
// new BottomBarItem(4, "Settings", "ic_settings", "#b0245f", null)
];
tabLoaded(event) {
console.log("barLoaded");
this._bar = <BottomBar>event.object;
this.hidden = false;
this.titleState = TITLE_STATE.SHOW_WHEN_ACTIVE;
this.inactiveColor = "black";
this.accentColor = "white";
}
tabSelected(args: SelectedIndexChangedEventData) {
switch (args.newIndex) {
case 0 :this.route.navigate(['/home/dashboard'] );
break;
case 1 : this.route.navigate(['/home/message']);
break;
case 2: this.route.navigate(['/home/messagelog']);
break;
}
}
}
Could you also provide the error output please?
hi the new swift updates after ( #38 ) also crate also a crash on ios for me:
i only see "fatal error: Index out of range" in the console - as soon as i navigate to a page with a bottom bar.
@nicHoch Thanks for pointing out that it comes with the latest Swift update. Will dig into that thanks :)
I'm having this error too: "fatal error: Index out of range".
@rhanb, The issue is due to call setItems on init function in the file MiniTabBar.swift:
...
public init(items: [MiniTabBarItem], titleState: TitleState) {
self.colored = false
self.titleState = titleState
self.animatedHide = false
self.positionY = CGFloat(0)
self.uncoloredBackgroundColor = UIColor(white: 1.0, alpha: 0.8)
super.init(frame: CGRect.zero)
self.backgroundColor = self.uncoloredBackgroundColor
self.addSubview(visualEffectView)
keyLine.backgroundColor = UIColor(white: 0.9, alpha: 1.0)
self.addSubview(keyLine)
print("im setting items now")
self.setItems(items)
}
...
If I comment the last line, it works. Please can you validate it?
Thank you in advance
I will work on it this week-end, don't have time before unfortunately. Sorry for the hard crash on iOS 😞
Is there any news on this? Even if its just a temporary fix to apply til a new update roles out-
The code fix by @codeback worked for me at first, but now it doesn't for some reason (it also only worked for emulator, and not device testing, no idea why).
So now I have no way of fixing this and am currently only running android for now. Anyone else have a temporary fix they know of?
I am using a bottom bar made using flexbox layout as a temporary fix for this
<android>
<btb:BottomBar row="2" items="{{ items }}"
hide="{{ hidden }}" titleState="{{ titleState }}"
loaded="tabLoaded" unloaded="tabUnLoaded"
inactiveColor="{{ inactiveColor }}"
accentColor="{{ accentColor }}" colored="true">
</btb:BottomBar>
</android>
<ios>
<FlexboxLayout row="2" backgroundColor="#4099ff" flexDirection="row"
justifyContent="space-around" padding="10">
<Image tap="tabSelected" newIndex="0" height="30" src="res://home" />
<Image tap="tabSelected" newIndex="1" height="30" src="res://icstatus" />
<Image tap="tabSelected" newIndex="2" height="30" src="res://trainme" />
<Image tap="tabSelected" newIndex="3" height="30" src="res://icexplore" />
</FlexboxLayout>
</ios>
and my tabSelected function looks like this
function tabSelected(args) {
if (app.ios) {
args.newIndex = +args.object.newIndex;
}
switch (args.newIndex) {
case 0:
unsetDash();
dashObj.set("home", true);
fadeIn("homeView");
break;
case 1:
unsetDash();
dashObj.set("status", true);
fadeIn("statusView");
break;
case 2:
unsetDash();
dashObj.set("trainMe", true);
fadeIn("trainmeView");
break;
case 3:
unsetDash();
dashObj.set("explore", true);
fadeIn("exploreView");
break;
default:
return;
}
}
@bremkesti and @peterkrieg , I unfortunately didn't get enough time to deep dive into this issue. But will def keep you up to date when I'll get time 👍
Thanks a lot @shiv19 for the share, hope it can help.
I am also having same issue iOS crashing the app. Let us know when you share a stable update for this.
Having the exact same issue :| Is there any way I can help?
This issue is fixed.
as @codeback was saying, it was coming from this :
self.setItems(items)In the Swift demo everything was working well, but it wasn't working in the NativeScript plugin because of this:
let items = new Array<any>();
this.nativeView = new MiniTabBar({
items: items,
titleState: TITLE_STATE.SHOW_WHEN_ACTIVE
});I am initialising the MiniTabBar with an empty array in the constructor to make sure to have an instance of it even if the plugin consumer doesn't set any BottomBarItem or is they are not set yet when the class is constructed.
But in the latest update of the swift library I change the code of initialisation, I wasn't checking if the array passed as a parameter was empty or not, so using the library withing the NativeScript plugin was making the error:
fatal error: Index out of range
So I fixed that on the Swift side.
Follow those instructions to fix this issue:
- tns plugin remove nativescript-bottombar
- rm -rf platforms
- tns plugin add nativescript-bottombar
- tns run ios
Thank you very much @rhanb !
SOLVED:
So I managed to get around that by adding below snippet on line 194 in MiniTabBar.swift:
if(self.itemViews.count == 0) {
return
}AND
Realised I have a typo in an icon name which solved the second error.
Not sure if it's the same error but bottombar is still crashing for me on iOS. Working normally on Android. This is after trying the fix recommended here: #45 (comment)
Logs below.
Fatal error: Index out of range
It fails on line 194 in MiniTabBar.swift. Also attaching a screenshot of XCode debugger.
Update:
So I managed to get around that by adding below snippet on line 194 in MiniTabBar.swift:
if(self.itemViews.count == 0) {
return
}But I now get a different error:
tnsapp[435:19600] CONSOLE ERROR [native code]: ERROR TypeError: null is not an object (evaluating 'imageSourceValue.ios')
CONSOLE ERROR [native code]: ERROR TypeError: null is not an object (evaluating 'imageSourceValue.ios')
2017-12-23 20:47:54.162123+0100 tnsapp[435:19600] CONSOLE ERROR [native code]: ERROR CONTEXT [object Object]
CONSOLE ERROR [native code]: ERROR CONTEXT [object Object]
Having done some googling, I got to this post which references back to you :), https://discourse.nativescript.org/t/evaluating-imagesourcevalue-ios/2221/3
I tried changing all my icons for ic_home_black_24dp but the error persists (EDIT: HAD A TYPO HERE). Any help is greatly appreciated!
@FranciZ , are you sure you have the latest iOS version of the library? Did you rm your platforms folder and then re run your build?
@rhanb I did follow the instruction exactly as written. I managed to get it working as I explain in the previous comment but I did have to edit MiniTabBar.swift. The icon name typo was my bad.
Thanks a bunch for responding during this time!
@FranciZ can you provide the code of the function setItems in your MiniTabBar.swift file please?
@rhanb Here you go.
public func setItems(_ items: [MiniTabBarItem]) {
if (self.itemViews.count > 0) {
for v in self.subviews {
v.removeFromSuperview()
}
self.itemViews = [MiniTabBarItemView]()
}
if (items.count > 0) {
for item in items {
let itemView = MiniTabBarItemView(item, self)
itemView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(MiniTabBar.itemTapped(_:))))
self.itemViews.append(itemView)
self.addSubview(itemView)
}
if (self.itemViews.count > 0) {
self.selectItem(0, animated: true);
}
}
}