render() {
      if(stores.systemStore.preferToScroll == true){
        return(
          <View>
            {this._renderRegisterDeviceModal}
            <FlatList
              data={stores.databaseStore.sites.slice()}
              keyExtractor={ (item, index) => item.id}
              key = {( stores.systemStore.preferToScroll ) ? 1 : 0}
              numColumns={1}
              extraData={stores.databaseStore.isLoadingSites}
              onRefresh={() => this.onRefresh()}
              refreshing={false}
              renderItem={({item}) => this._renderFlatListItem(item)}
              ItemSeparatorComponent={this._renderSeparator}
              ListHeaderComponent={this._renderHeader}
              ListFooterComponent={this._renderFooter}
            />
          </View>
        )
      }else{
        return(
          <View>
            {this._renderRegisterDeviceModal}
            <FlatList
              data={stores.databaseStore.sites.slice()}
              keyExtractor={ (item, index) => item.id}
              key = {( stores.systemStore.preferToScroll ) ? 1 : 0}
              numColumns={stores.systemStore.gridColumns}
              extraData={stores.databaseStore.isLoadingSites}
              onRefresh={() => this.onRefresh()}
              refreshing={false}
              renderItem={({item}) => this._renderGridItem(item)}
              ItemSeparatorComponent={this._renderSeparator}
              ListHeaderComponent={this._renderHeader}
              ListFooterComponent={this._renderFooter}
            />
          </View>
        )
      }
  }

  _renderRegisterDeviceModal(){
    welcomeDeviceFarmName = `Farm: {stores.systemStore.activeGroup.name}` 
    welcomeDeviceText = "Please register your name for access to the PivoTrac servers"
    return (
      <Modal
        isVisible={this.state.registerDeviceModalVisible}
        backdropColor={'orange'}
        backdropOpacity={0.9}
        animationType={'slide'}
      >
        <View>
          <Text> {welcomeDeviceFarmName} </Text>
          <Text> {welcomeDeviceText} </Text>
          <TextInput
              onChangeText={(deviceIdentity) => this.setState({deviceIdentity})}
              placeholder = {this.state.deviceIdentity}
              placeholderTextColor="#808080"
              style={styles.input}
          />


          <Button 
              backgroundColor="grey"
              onPress={() => this.setDeviceIdentity()}
              title="Confirm"
              loadingProps={{ size: "large", color: "rgba(111, 202, 186, 1)" }}
              titleStyle={{ fontWeight: "700" }}
              buttonStyle={{
                backgroundColor: "green",
                width: 145,
                height: 45,
                borderColor: "transparent",
                borderWidth: 0,
                borderRadius: 5
              }}
          />

        </View>
      </Modal>
    )
  }


  _renderFlatListItem(item) {
    return (
      <View style={styles.row}>
          <TouchableOpacity onPress={ () => this._showSiteDetails(item) }>
              <View style={styles.cellLeft}  >
                  <PivotCircle site={item}/>
              </View>
          </TouchableOpacity>
          <View style={styles.cellCenter} >
              <Text style={styles.titleText}>{item.name}</Text>
              <Text style={styles.baseText}>{item.DescriptiveStatus}</Text>
              <Text style={styles.baseText}>{item.mode} </Text>
          </View>

          <View style={styles.cellRight} >
              <Text style={styles.baseText}>{item.prettyLastPressure} psi </Text>
              <Text style={styles.baseText}>{item.lastProjectedPosition} deg</Text>
              <Text style={styles.baseText}>{item.currentSpeed} days/rev </Text>
          </View>
      </View>

    )
  }