How to get square video tiles for ios?

[sandunadhikari]

React Native ios Application shows different sizes video tile. Android App can show square videos. But iOS can’t it .How to get square video tiles for ios?

[sandunadhikari]

{this.state.videoTiles.length > 0 ? ( {this.state.videoTiles[0] && ( )} {this.state.videoTiles[2] && ( )} {this.state.videoTiles[1] && ( )} ) : null}

//Styles

videoContainer: { width: '100%', overflow: 'visible', position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 },

smallVideo: { width: 140, height: 140, position: 'absolute', zIndex: 1 },

fullVideo: { width: '100%', aspectRatio: 8 / 16, zIndex: -1, position: 'absolute', left: 0, top: 0, bottom: 0, right: 0 },

[AbhishekSri979]

@sandunadhikari

you can try overflow:'hidden' on main view of RNVideoRenderView

example:

<View style={{ width: '100%', height: '100%', overflow: 'hidden', borderRadius: 6, }}>

            </View>

[AbhishekSri979]

@sandunadhikari

for resizing video, you can use UIViewContentModeScaleAspectFill instead of UIViewContentModeScaleAspectFit in RNVideoViewManager.m file like.

import "RNVideoViewManager.h"

@implementation RNVideoViewManager static NSMutableDictionary<NSString, NSValue> *videoMap;

• (void)setMirror:(DefaultVideoRenderView *)renderView mirror:(BOOL)mirror { renderView.mirror = mirror; }

RCT_EXPORT_MODULE(RNVideoView);

• (UIView )view { DefaultVideoRenderView innerView = [[DefaultVideoRenderView alloc] init]; innerView.contentMode = UIViewContentModeScaleAspectFill; return innerView; } @end

[sandunadhikari]

@AbhishekSri979

It is not possible to apply the 'RNVideoRenderView' component as a child element. In all those cases, the existing videoTile list will be duplicated. So, We cannot add the RNVideoRenderView element as a child element inside a 'view' tag.

{this.state.videoTiles[1] && ( <View style={{ width: '100%', height: '100%', overflow: 'hidden', borderRadius: 6, }}> <RNVideoRenderView style={{ ...styles.smallVideo, top: 20, width: '20%', height: '20%', aspectRatio: 0.5, right: '15%' }} key={this.state.videoTiles[1].tileId} tileId={this.state.videoTiles[1].tileId} isOnTop={true} /> )}

My Duplicated Video Tile list: [ { "tileId":2, "videoStreamContentHeight":180, "isScreenShare":false, "isLocal":false, "attendeeId":"49f1b525-0bab-06c1-4d17-ad741a20df7c", "videoStreamContentWidth":320, "pauseState":0 }, { "tileId":0, "videoStreamContentHeight":1280, "isScreenShare":false, "isLocal":true, "attendeeId":"3bf3cb2c-f9f9-75da-025a-51a191b8be64", "videoStreamContentWidth":720, "pauseState":0 }, { "tileId":0, "videoStreamContentHeight":1280, "isScreenShare":false, "isLocal":true, "attendeeId":"3bf3cb2c-f9f9-75da-025a-51a191b8be64", "videoStreamContentWidth":720, "pauseState":0 } ]

[sandunadhikari]

@AbhishekSri979

My code

[sandunadhikari]

@AbhishekSri979

Can you share your video tile related code?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.