PM::Screen and TabBarItem icons: can they be SVG, and why don't they display until after they are pressed?

[matthewsinclair]

I have a very simple app with a tab that has 5 tab bar items in it. I have two questions:

1. Is it possible to use SVG images as the icons?
2. Why is it that the icons for each tab bar do not become visible until the first time they are touched?

Here's the controller code that establishes the tabs:

    class HomeScreen < PM::Screem
      title "Tab Bar"

      def on_load
        @featured_screen = FeaturedScreen.new(nav_bar: true)
        @shop_screen =     ShopScreen.new(nav_bar: true)
        @bag_screen =      BagScreen.new(nav_bar: true)
        @stores_screen =   StoresScreen.new(nav_bar: true)
        @account_screen =  AccountScreen.new(nav_bar: true)
        open_tab_bar @featured_screen, @shop_screen, @bag_screen, @stores_screen, @account_screen
      end

      # def on_appear
      #   [ 'Featured', 'Shop', 'Bag', 'Stores', 'Account', 'Featured' ].each {|s| open_tab s }
      # end

    end

Each screen is just an empty PM::Screen with a tab item specification like this:

    class FeaturedScreen < PM::Screen
      title "Featured"

      def on_load
        set_tab_bar_item title: 'Featured', item: 'icons/featured'
      end

    end

I even tried to manually select the tabs (see on_appear) but that makes no difference.

When the app runs, it looks like this when it first displays:

And then if I tap on each tab bar item, it looks like this:

I'm not doing anything special or out of the ordinary. This is just plain, vanilla PM tab bar item code. Any help would be much appreciated.

[matthewsinclair]

D'Oh. RTFM. See on_init vs on_load. My bad.

[jamonholmgren]

You know, we ran into this same issue just last week. And we wrote the Fn manual. haha

[matthewsinclair]

Haha. Anyway, this is how I got around it:

    class HomeScreen < PM::Screen
      title "Home"

      def on_init
        @featured_screen = FeaturedScreen.new(nav_bar: true)
        @shop_screen =     ShopScreen.new(nav_bar: true)
        @bag_screen =      BagScreen.new(nav_bar: true)
        @stores_screen =   StoresScreen.new(nav_bar: true)
        @account_screen =  AccountScreen.new(nav_bar: true)
      end

      def on_load
        open_tab_bar @featured_screen, @shop_screen, @bag_screen, @stores_screen, @account_screen
        [ 'Account', 'Stores', 'Bag', 'Shop', 'Featured' ].each {|s| open_tab s }
      end

    end

[matthewsinclair]

Oh, btw: any ideas on the best way to use SVGs as tab bar item icons? I've had a quick look at SVGKit, which makes it easy to load the SVGs, but none of the PM tab bar item stuff seems to want to display them.

[jamonholmgren]

I've never tried! If you figure out a way, would you want to contribute? That would be awesome.

Also, wouldn't just putting each individual screen's set_tab_bar_item in on_init work better than cycling through all of them? You could also use the class method, if you want.

    class FeaturedScreen < PM::Screen
      title "Featured"
      tab_bar_item title: "Featured", item: "icons/featured"
    end

[matthewsinclair]

Good point. And re: SVG, yep, I’ll try to. I found a lib that handles them, but I couldn’t get them to display in a tab bar. Still working on it ...=

[jamonholmgren]

Awesome.