CODEWITHSUNDEEP
react-nativezoom-sdk
Navid Khan
Navid Khan

Reputation: 1169

Overlays on top or above

I am using the Zoom SDK in a react native app to start and join meetings. I need to overlay a custom view over the Zoom SDK, or insert one above or below it, that can show additional app controls and settings. The documentation does not seem to cover such a use case.

Does any one have experience with this, or any advice on how one can proceed?

Upvotes: 2

Views: 691

Answers (1)

Stefan Majiros
Stefan Majiros

Reputation: 584

I guess you are looking for PiP - Picture in Picture.

If yes, I think, you would need to use custom native code, as it is relatively new for iOS: "With iOS 13, Apple added a Picture in Picture Mode to the iPad, and with iOS 14, that Picture in Picture functionality is available for the iPhone too." https://www.macrumors.com/guide/picture-in-picture/

In, Android, it works for some time: https://developer.android.com/guide/topics/

Before writing custom native code or library, you can also take inspiration from this existing Android-only library: https://github.com/shaun-chiang/rn-android-pip

and from iOS docs: https://developer.apple.com/documentation/avkit/adopting_picture_in_picture_in_a_custom_player

If you are not looking for PiP support, you would probably need to mount either iOS UIView or Android View on top of the Zoom Component - but I am not sure, if by doing that you will not break some SLAs from ZOOM.

In Android, to add views of fragments to the top / as overlay, you would need some code like this:

getSupportFragmentManager()
    .beginTransaction()
    .add(android.R.id.content, fragment) - // add view to the RootView 
    .commit();

in iOS probably something like this:

 UIApplication.shared.keyWindow?.addSubview(myCustomUIView)

If you are looking for tutorial about working with native components in React Native, I can recommend:

this for iOS https://pspdfkit.com/blog/2018/how-to-extend-react-native-api/

this for Android (written by me) https://stefanmajiros.medium.com/integration-of-native-android-fragments-and-views-into-react-native-a4156621543b

Upvotes: 1

Related Questions