sfm-uikit-react-native/src/view/GridList.js

It is a react native component for SmartFloMeet users.

import React, { Component } from "react";
import { Platform, StyleSheet, FlatList, Text,Dimensions, View, Alert} from "react-native";
import { EnxPlayerView } from "enx-rtc-react-native";  
  const calculateRow = (data)=>{
    if(data.length <= 1 ||  data.length >= 3 ) 
      return 1;
    else if(data.length <= 4 || data.length >= 10) 
      return 2
  }  
export default class HorizontalList extends Component {
  constructor(props) {
    super(props);
    console.log("inside constructor",props)
    this.state = {
        numColumns:1,
    };
  }
  renderItem = ({ item, index }) => {
    return (
            <EnxPlayerView 
            style={{
                flex: 1,
                margin: 1,
                height: (Dimensions.get('window').height - 80) / calculateRow(this.props.data), 
            }}
            key={String(item.streamId)}
            streamId={String(item.streamId)}
            isLocal = "remote">
      </EnxPlayerView>
    );
  };
  
  GetGridViewItem(item) {
    Alert.alert(item);
  }
  render() {
    console.log("this.props.data",this.props.data.length)
    console.log("=========== Data =================",this.props.data)
     return (
       <View style={styles.container}>
         {
                this.props.data.length > 0 ?    
                  this.props.data.length==4?
                        <FlatList
                        key={'#'}
                        data={this.props.data}
                        contentContainerStyle={styles.flexList}
                        renderItem={this.renderItem}
                        numColumns={2}
                    />
                    :   this.props.data.length==1||this.props.data.length==2||this.props.data.length==3||this.props.data.length==5 || this.props.data.length==6 ?  
                        <FlatList
                            key={'_'}
                            data={this.props.data}
                            contentContainerStyle={styles.flexList}
                            renderItem={this.renderItem}
                            numColumns={3}/>
                            :   <FlatList
                                    key={'&'}
                                    data={this.props.data}
                                    contentContainerStyle={styles.flexList}
                                    renderItem={this.renderItem}
                                    numColumns={4}/>
                    
              : <View 
                  style={{
                    position: 'absolute', 
                    top: 0, left: 0, 
                    right: 0, bottom: 0, 
                    justifyContent: 'center', 
                    alignItems: 'center'}}>
                    <Text style={styles.waitMsg}> Please wait other's to join </Text>          
                  </View>
              }
            </View>
         );
       }
     
     }
     
     
     const styles = StyleSheet.create({
       container: {
         flex: 1,
         justifyContent: "center",
         backgroundColor: "#e5e5e5"
       },
       headerText: {
         fontSize: 20,
         textAlign: "center",
         margin: 10,
         fontWeight: "bold"
       },
       GridViewContainer: {
        flex:1,
        justifyContent: 'center',
        alignItems: 'center',
   height: 100,
   margin: 5,
   backgroundColor: '#7B1FA2'
},
GridViewTextLayout: {
   fontSize: 16,
   fontWeight: 'bold',
   justifyContent: 'center',
   color: '#fff',
   padding: 10,
 }, flexList: {
    justifyContent: "space-between",
    backgroundColor: 'white',
    padding: 0,
    margin: 1,
  },
});