Forum Academy Marketplace Showcase Pricing Features

Native Mobile Controls

Need help Plugins
#1

Thought it would be a good idea to get a conversation going on the types of native controls Bubblers might find useful. Here is a list to start:

  • date/time picker
  • native calendar integration
  • initiate phone calls and sms
  • deep linking

Native Mobile Controls Playground (will add more as they come up):

Editor

Run-time (click here to test features using a mobile device)

Feature 1: Sending an sms using native messenger (Android + iOS):

  • create an external link using this as the url “sms://+12355555555”

Feature 2: Initiate a call using native caller (iOS + Android):

  • create an external link using this as the url “tel:+11235555555”

Feature 3: Opening native maps app (iOS + Android):

  • create an external link using this as the url “http://maps.apple.com/?q=51.507269,-0.127695”
    on iOS this opens the Apple Map app, on Android it asks you to choose between the Google Maps app or opening the Google Maps website

Feature 4: Native Alert Prompt (all platforms):

4 Likes
Nativizer [Plugin] - Make your apps more native
Native App features explanation
#2

Apple Maps can also be added. Apple maps uses a URL that can lead to directions to a specific address.

More information here: https://developer.apple.com/library/content/featuredarticles/iPhoneURLScheme_Reference/MapLinks/MapLinks.html

2 Likes
#3

Nice, just added it

#4

Also I think using JS alert() function give you native iOS/Android alert message

1 Like
#5

It does, I added it to my plugin, Nativizer. :slight_smile:

1 Like
#6

:+1: @codurly love it, thank you

#7

@roayati - Great one, keep it coming :slight_smile: Just added it to the ‘wiki’ above.

#8

Is there going to be fallback functions for desktop browsers, or is this intended solely for native apps?

Nice work @supernaturally!

#9

Also changing the phone status bar is possible by using

The values for content are default, black and black-translucent. This can be added to header of the page in HTML and CSS but I don't know if it's working on bubble or not could anyone try? and let us know
#10

I’ve tried and couldnt get it working. Not sure if it was because the Bubble app would veto it or what but I have had no success.

#11

<meta name="apple-mobile-web-app-status-bar-style" content="default" />
Did you use this code?

#12

I tried that line and many others, none worked for me. Any luck yourself?

#13

No luck

#14

Hey guys, this is because this meta tag is only used for add to homescreen apps aka. (standalone mode).

You also need to add the following meta-tag:

Then in iOS visit the page in safari and add to homescreen. The feature is hidden in the bottom menus.

Beware that caching may be a nightmare in standalone mode, maybe not with bubble apps, but if you experience strange behaviour you may need to put some caching meta tags to clear the cache.

#15

@gurun does not work even using standalone mode
although apple suggest to put tag in the page I tried it but not working

#16

I suggest looking at the source of your page, and seeing where the tag is being put vs. where apple expects it to be.

Also, find another web app that works in this way and look at the source where the tags are and how they are setup. Google: apple homescreen statusbar app example

#17

here is interesting good workaround How to Call Native Iphone/Android function from Javascript?

1 Like
#18

How would you call the “ActionSheet” in IOS like the “alert” call? Could you?

#19

Yes I you can but you need little programming skills using xcode for iOS and Android Studio for Android
Simply embed you website in web view and where you want to lunch action sheet you fire special link instead of http://domain.com
Use for example myapp://fireActionSheet
And then using xcode Swift handle that url request

#20

Is it possible to have a link inside a native app and when clicked it will open safari browser on iOS and navigate to it?