100ms Logo

100ms

Docs

Search docs
/

Mini View

The React Native SDK provides a Component HmsView that renders the video on screen. Generally all the HmsViews should be rendered side by side in a list but if a mini view / main view also known as Picture-in-Picture (PIP) within the app layout is required then pass setZOrderMediaOverlay prop to this component. This would allow the mini view to come over the main view otherwise it would be hidden behind the main view.

import { HMSVideoViewMode } from '@100mslive/react-native-hms'; ... // hms instance acquired from build method const HmsView = hmsInstance.HmsView; const styles = StyleSheet.create({ hmsView: { height: '100%', width: '100%', }, }); <HmsView setZOrderMediaOverlay={true} // should be passed true only for the mini view / Picture in Picture trackId={trackId} scaleType={HMSVideoViewMode.ASPECT_FILL} style={styles.hmsView} mirror={true} sink={true} /> ...

Example of mini view layout

MiniView