Video.js

...
videoView() {
    return (
      <View style={{ flex: 1 }}>
        {
          this.state.peerIds.length > 3                                     //view for four videostreams
            ? <View style={{ flex: 1 }}>
              <View style={{ flex: 1 / 2, flexDirection: 'row' }}><AgoraView style={{ flex: 1 / 2 }}
                remoteUid={this.state.peerIds[0]}
                mode={1} />
                <AgoraView style={{ flex: 1 / 2 }}
                  remoteUid={this.state.peerIds[1]}
                  mode={1} /></View>
              <View style={{ flex: 1 / 2, flexDirection: 'row' }}><AgoraView style={{ flex: 1 / 2 }}
                remoteUid={this.state.peerIds[2]}
                mode={1} />
                <AgoraView style={{ flex: 1 / 2 }}
                  remoteUid={this.state.peerIds[3]}
                  mode={1} /></View>
            </View>
            : this.state.peerIds.length > 2                                 //view for three videostreams
              ? <View style={{ flex: 1 }}>
                <View style={{ flex: 1 / 2 }}><AgoraView style={{ flex: 1 }}
                  remoteUid={this.state.peerIds[0]}
                  mode={1} /></View>
                <View style={{ flex: 1 / 2, flexDirection: 'row' }}><AgoraView style={{ flex: 1 / 2 }}
                  remoteUid={this.state.peerIds[1]}
                  mode={1} />
                  <AgoraView style={{ flex: 1 / 2 }}
                    remoteUid={this.state.peerIds[2]}
                    mode={1} /></View>
              </View>
              : this.state.peerIds.length > 1                              //view for two videostreams
                ? <View style={{ flex: 1 }}><AgoraView style={{ flex: 1 }}
                  remoteUid={this.state.peerIds[0]}
                  mode={1} /><AgoraView style={{ flex: 1 }}
                    remoteUid={this.state.peerIds[1]}
                    mode={1} /></View>
                : this.state.peerIds.length > 0                             //view for videostream
                  ? <AgoraView style={{ flex: 1 }}
                    remoteUid={this.state.peerIds[0]}
                    mode={1} />
                  : <View />
        }
        {
          !this.state.vidMute                                              //view for local video
            ? <AgoraView style={styles.localVideoStyle} zOrderMediaOverlay={true} showLocalVideo={true} mode={1} />
            : <View />
        }
        <View style={styles.buttonBar}>
          <Icon.Button style={styles.iconStyle}
            backgroundColor="#0093E9"
            name={this.state.audMute ? 'mic-off' : 'mic'}
            onPress={() => this.toggleAudio()}
          />
          <Icon.Button style={styles.iconStyle}
            backgroundColor="#0093E9"
            name="call-end"
            onPress={() => this.endCall()}
          />
          <Icon.Button style={styles.iconStyle}
            backgroundColor="#0093E9"
            name={this.state.vidMute ? 'videocam-off' : 'videocam'}
            onPress={() => this.toggleVideo()}
          />
        </View>
      </View>
    );
  }

  render() {
    return this.videoView();
  }
}

const styles = StyleSheet.create({
  buttonBar: {
    height: 50,
    backgroundColor: '#0093E9',
    display: 'flex',
    width: '100%',
    position: 'absolute',
    bottom: 0,
    left: 0,
    flexDirection: 'row',
    justifyContent: 'center',
    alignContent: 'center',
  },
  localVideoStyle: {
    width: 140,
    height: 160,
    position: 'absolute',
    top: 5,
    right: 5,
    zIndex: 100,
  },
  iconStyle: {
    fontSize: 34,
    paddingTop: 15,
    paddingLeft: 40,
    paddingRight: 40,
    paddingBottom: 15,
    borderRadius: 0,
  },
});

export default Video;