Can not resize or stretch Video in react native

[Saifak34]

Describe the bug we are trying to resize Video which we are using via , when the other person in meeting starts their video it automatically leaves a lot of space around itself and that doesn't look good. IS there any way we can style these native components ?

[saurabhghadi0401]

@Saifak34 , Yes you can customize the styling of the video tile (RNVideoRenderView). You can wrap RNVideoRenderView in View component and provide styling to it. For reference, I will attach the code:

<View
                  style={{
                    //   styles.localVideoContainer,
                    width: width * 0.2,
                    height: height * 0.15,
                    position: 'absolute',
                    bottom: 100,
                    right: 13,
                    overflow: 'hidden',
                    borderRadius: 12,
                    borderWidth: 1,
                    backgroundColor: 'black',
                    zIndex: 20000,
                  }}
                >
                  <RNVideoRenderView
                    key={this.state.localVideo.tileId}
                    tileId={this.state.localVideo.tileId}
                    style={styles.localVideo}
                  />
                </View>

width: screen width; height: screen height You can also customize the style of RNVideoRenderView

localVideo: {
    width: "auto",
    height: "100%",
    resizeMode: "contain",
    borderRadius: 12,
    // margin: '1%',
    // aspectRatio: 16 / 9,
  },

[Saifak34]

Hello ,

thanks for the input, I do have a doubt about resizeMode working with View ?

[Saifak34]

while w

@Saifak34 , Yes you can customize the styling of the video tile (RNVideoRenderView). You can wrap RNVideoRenderView in View component and provide styling to it. For reference, I will attach the code:

<View
                  style={{
                    //   styles.localVideoContainer,
                    width: width * 0.2,
                    height: height * 0.15,
                    position: 'absolute',
                    bottom: 100,
                    right: 13,
                    overflow: 'hidden',
                    borderRadius: 12,
                    borderWidth: 1,
                    backgroundColor: 'black',
                    zIndex: 20000,
                  }}
                >
                  <RNVideoRenderView
                    key={this.state.localVideo.tileId}
                    tileId={this.state.localVideo.tileId}
                    style={styles.localVideo}
                  />
                </View>

width: screen width; height: screen height You can also customize the style of RNVideoRenderView

localVideo: {
    width: "auto",
    height: "100%",
    resizeMode: "contain",
    borderRadius: 12,
    // margin: '1%',
    // aspectRatio: 16 / 9,
  },

when I try to wrap it in I get this error , (screenshot)

code:

video={ <View> {<RNVideoRenderView style={styles.video} tileId={this.state.localVideo.tileId}/> } </View> } />

[saurabhghadi0401]

You have enclosed RNVideoRenderView in {}.. remove those { }

[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.