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 type of layout is required we can 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. It is a android only feature.

 
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
  trackId={trackId} 
  scaleType={HMSVideoViewMode.ASPECT_FILL} 
  style={styles.hmsView} 
  mirror={true} 
  sink={true} />
...

Example of mini view layout