[New Template] Mobile UI components library

Currently on sale for short time!

Want to start a new mobile app project during summer vacation? Enjoy 50% off this template with using coupon code SUMMER2
Enjoy

Check here what it can do: [New Template] Mobile UI components library

@d9999, This template is great, I am starting to customize it so I can create my own PWA app for mobile devices. When I use the ā€œSave to homescreenā€ function looks great on my mobile deviceā€¦ only 1 issue, all of the status icons at the top appear white, and when you scroll they appear on top of the other elements as youā€™re scrolling. I attempted to add a new floating group and attach it to the top, but it still leaves space for the status bars above the floating group and all elements on the page scroll and show through. Any thoughts for making a header that would show the status icons & not show the elements as you scroll?

thanks for pointing this out @zacharyreed . There is an easy fix:

  1. in the editor, go to Settings ā†’ SEO / metatags and add the following lines under Script/meta tags in header:
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">

Should look like this:

  1. Re-deploy app (if you already have deployed a live version)
  2. Delete the home screen icon on your phone and add it again from the refreshed page (it wont work otherwise)

Note: there are also other options for the status bar color - see this post here for further reading: Changing The iOS Status Bar Of Your Progressive Web App | by Appscope | Appscope | Medium

eg. use

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

for a black status bar.

I have also adjusted this in the templateā€¦

PS: Adding visual elements in the app wonā€™t work as the Status Bar is controlled by Safari itself and outside of the app frame.

2 Likes

@d9999 This is perfect, Thanks!

1 Like

Could please you share a working PWA on Bubble whenever you feel itā€™s demoable ? Thanx

Not sure what you mean, can you please be a bit more specific?

Maybe check https://bubble.io/showcase

Hi there @d9999, i was refering to @zacharyreed app where the script and the overall PWA Experience was ā€œsolvedā€. In https://bubble.io/showcase itā€™s not clear wich app (if any) is a PWA.

Hi @lucas.ar, I will publish in the showcase when Iā€™m ready to launch. I started this bubble journey two weeks ago and am making swift progress on the MVP. I am still struggling to get all the pieces put together as there is no step by step guide for putting this together, but i believe I am on the right track to be able to publish a PWA when this is all said and done. Iā€™ll keep you posted in the showcase when itā€™s done.

1 Like

Hello!

Iā€™m new to Bubble so please bear with me. I noticed the cost of this template is $17 or $200.

I wish to create an app and publish it in mobile app stores, with the view of launching an app business selling the app or having in app purchases.
There is also the possibility of creating other apps in the future and I may also use the template again however, this is not a certainty.

Q. Would I need to purchase the Standard or Developer license?

Q. What is the correct purchase for my use case, and what is the fee for doing so i.e. are there any other charges above and beyond the monthly bubble subscription fee?

Q. Other than the monthly subscription fee does bubble take a percentage of app sales?

Also

Q. Are there any other things anyone feels may be necessary to purchase that may be useful for an UBER type application?

Thank you for taking the time to help, I tremendously appreciate it!

Pls see up here: [New Template] Mobile UI components library re licenses.

In short: Standard license is ok for you. Also no need to buy again. Just use it for as many apps as u like. Dev license is only for agencies or freelancers that use it to create apps for clients.

Side note since you are new here: you might want to read the full threads (or do some searching in the forum or documentation) before posting questions, as most things are usually already answered at some place;) - this will usually get u answers much quicker.

Re additional purchases: For an app as u plan it you might need various plugins and accounts that add costs (google api for maps, apple / android developer license to put it in the app store, bdk (https://www.thebdk.com/) or similar for creating an actual mobile app from the bubble web app (ie some sort of wrapper or web view - bdk is the only one i know that supports in app purchasesā€¦). Bubble itself does not charge commission, but you will need a payment provider that will (eg apple, google, stripeā€¦which all take comissions) - but hard to say without knowing the app in detail

Thank you! Tremendously grateful!! Super helpful!

Another question if I may, I wish to also have specific features from my app available via both WatchOS and Android watch.

Can bubble create apps that work with WatchOS and Android Watch?

i.e. I am aware I can create an app once and using something like https://codelessacademy.com/ push the app to both the App Store & Google Play at once, however, within the Apple echo system I believe creating an app that works with mobile and watch harmoniously are possible but I also can appreciate that there may be other constraints to consider when trying to do the same for both mobile and watch in both echo systems (Apple & Android).

After finding out one mobile app can suffice for both Apple and Android I figured Iā€™d ask and see if the same applies to watch over both.

So for context, my app idea consists of geographical mapping of data, directions to locations, and trips similar to uber, however, I wish to trigger requests or should I say functions from watches for those who have watchā€™s and wish to have remote access.

This exceeds my knowledgeā€¦

Note: please keep this thread related to its purpose / i.e. Q&A for the template. You will also get better answers by posting such questions in relevant threads or opening new ones

Precisely! Apologies, should I delete this post?

Thank you for your time and attention, much appreciated!

Great work on the template.

Nah, no worries

Thanks:)

We have added some pretty cool new things:

  1. Swipe to delete / edit items in a repeating group
  2. Trigger native share on mobile phones
  3. Open links in new tab

IMB_7SYe2O

Note: if you have already bought the template, these updates should be available to you immediately (for new apps only) without buying the template again.

2 Likes

We have added a new TikTok-like video feed:

(uses paid plugins, see documentation for details https://www.notion.so/Mobile-UI-Starter-Pack-Documentation-7ae910995dde4dadabbe615c6d94bfdd )

3 Likes

Really appreciate the documentation, found here. Exemplary.

1 Like

Made some improvements to the landing, login UX, and homešŸ’Ŗ

1 Like

we have added a new chat function - check it out

  • start new conversations with users
  • message texts and files / images

(If you have bought the template previously, you can update for free, just start a new app from the template)

Let us know if you have any feedback or feature requests for the next update! We want to make the template as useful for you as possible.

Also, donā€˜t forget to leave us a rating in the template store.

3 Likes