How to make a floating chat head similar to the one in Facebook messenger in nativescript?


#1

I’ve been searching for ways to make a floating chat head like the ones used in Facebook messenger :
floating chat head

But I haven’t had any luck. I already posted a question on stackoverflow, but I have received no answer or comments. Do you guys have any ideas?


#2

If you are using NativeScript Angular, have the container for the “floating head” in a top-level component that has a router-outlet for sub-pages. Then just use margins to push the container up into the correct location on screen (above other uI).

The action bar may become troublesome, depending on where it gets drawn in the view hierarchy, but you can try appending your content on row “0” to overlay it.


#3

But that won’t work when app is closed right? @sean-perkins


#4

@chenshuiluke
A plugin made using this library for Android, would be cool


Update:
Here’s the equivalent iOS version


#5

No, as your app is never allowed to play in the global environment like that. FaceTime and phone calls even revert to the background (minus the status-bar change). The only reason you would see it between Instagram and Facebook is that Facebook owns both apps and can handle peer-to-peer communication to consistently display the UI between their apps.

It actually looks like picture-in-picture mode would be what you need (iPad only):

https://developer.apple.com/documentation/avkit/avpictureinpicturecontroller


#6

I disagree that it’s impossible to do it in unrelated apps because both Facebook messenger and Progression can show the floating bubble over other apps and the home screen, for example:


#7

@chenshuiluke Did you try exploring the libraries I shared?


#8

Yeah I’m actually about to run the demo application for the Android library to see if the bubbles can exist outside of the app.


#9

@multishiv19 Yeah, it works outside of the app. So I guess now I just have to figure out how to write a plugin for it lol.


#10

Android may be a different animal. I would do the research to see if iOS allows for this (or if the iOS app for Facebook messenger does this). iOS is all about providing rigid structure and not letting you deviate from those standards.

Unless you only care about Android - then don’t worry about it.


#11

@chenshuiluke
That’s great.
Like @sean-perkins said, try the iOS library as well.

One thing is for sure. You can’t make it work outside app in iOS without doing jail break. You can perhaps have the chatheads work inside the app, with the library I shared.

Cheers! Happy NativeScripting