import React, { Component } from 'react';
import {
 AppRegistry,
 StyleSheet,
 TabBarIOS,
 Text,
 View,
 ListView,
 Navigator,
 TouchableHighlight,
 Image,
} from 'react-native';

import Icon from 'react-native-vector-icons/Ionicons';

class TeamChat extends Component {
 constructor(props){
   super(props)
   this.state = {
     dataSource: new ListView.DataSource({
       rowHasChanged: (row1, row2) => row1 !== row2,
     }),
     userInfo: {},
   }
 }

 renderTeam(team){
   team.name = team.name[0].toUpperCase() + team.name.substring(1);
   return (
     <View style={[styles.container]}>
         <TouchableHighlight style={styles.button} onPress={this.goToChat.bind(this, team)}>
           <View style={{flex: 1, flexDirection: "row"}}>
           <View><Text style={[styles.buttonText, {flex: 1}]}>{team.name}</Text></View>
             <View><Icon
             name="ios-arrow-forward"
             size={30}
             color="white"
             style={[styles.icon, {flex: 1}]}/></View>
             </View>
         </TouchableHighlight>
     </View>
   )
 }

 goToChat(team) {
   this.props.navigator.push({
     name: 'chat',
     passProps: this.props.userInfo,
     clickedTeam: team
   })
 }


 componentWillMount(){
   if (this.props.userInfo.team.length != 0) {
     this.setState({
       dataSource: this.state.dataSource.cloneWithRows(this.props.userInfo.team)
     });
   }

 }

 renderList(){
   return (
     <ListView
   dataSource={this.state.dataSource}
   renderRow={this.renderTeam.bind(this)}
   style={styles.list}
         />
       )
 }

 renderNoTeams(){
   return (
       <Text style={styles.text}>
         no chat for you
       </Text>
     )
 }


 render() {

   let playerHasTeam = (this.props.userInfo.team.length == 0) ? this.renderNoTeams() : this.renderList();
   return (
     <View style={styles.container}>
       <Text style={styles.welcome}>
         Your Teams
       </Text>

       {playerHasTeam}


     </View>
   );
 }

}

const styles = StyleSheet.create({

  buttonText: {
    fontSize: 36,
    fontWeight:'bold',
    color: '#FFA64C',
    alignSelf: 'center'
  },
  backgroundImage:{
    flex: 1,
    width: null,
    height: null,
    resizeMode:'contain',
  },
  button: {
    height: 36,
    backgroundColor: '#005EFB',
    borderRadius: 8,
    alignSelf: 'stretch',
    justifyContent: 'center',
    padding: 76,
    margin: 5,
    opacity:.95,
  },
  topContainer: {
    justifyContent: 'flex-start',
    backgroundColor: '#FFA64C',
    flexDirection:'row',
    padding:10
  },
  container: {
    flex: 1,
    backgroundColor:'#E5E5E5'
  },
  createJoinButton: {
    backgroundColor: '#005EFB',
    borderRadius: 8,
    padding:10
  },
  description: {
    fontSize: 40,
    textAlign: 'center',
    color: '#FFFFFF'
  },
  icon: {
    // justifyContent: 'space-around',
    paddingLeft: 100,
    alignItems: "flex-end",
    // paddingRight: 100,
  },
  joinButtonText:{
    fontSize: 18,
    color: 'white',
    alignSelf: 'center'
  },
  // list: {
  //   height: 100
  // },
  leftContainer: {
    flex:1,
    marginRight:5,
    justifyContent:'center',
    justifyContent:'space-around'
  },
  rightContainer: {
    flex:1,
    marginLeft:5,
    justifyContent:'center',
    justifyContent:'space-around'

  },
  teamBox:{
    flex:1,
    justifyContent:'flex-start'
  },
  welcome: {
    fontSize: 18,
    paddingTop:20,
    padding:5,
    color: 'black',
    textAlign: 'center',
    backgroundColor:'#D3D3D3',
    fontWeight:'bold'
  }
})

module.exports = TeamChat;

@@ -565,25 +565,24 @@
 View style=%7B
-%5B
 styles.conta
@@ -585,17 +585,16 @@
 ontainer
-%5D
 %7D%3E%0A     
@@ -696,72 +696,8 @@
     
-%3CView style=%7B%7Bflex: 1, flexDirection: %22row%22%7D%7D%3E%0A           %3CView%3E
 %3CTex
@@ -701,25 +701,24 @@
 Text style=%7B
-%5B
 styles.butto
@@ -722,28 +722,16 @@
 ttonText
-, %7Bflex: 1%7D%5D
 %7D%3E%7Bteam.
@@ -739,42 +739,10 @@
 ame%7D
-%3C/Text%3E%3C/View%3E%0A             %3CView%3E
+  
 %3CIco
@@ -808,35 +808,8 @@
 30%7D%0A
-             color=%22white%22%0A
     
@@ -824,17 +824,16 @@
  style=%7B
-%5B
 styles.i
@@ -839,33 +839,12 @@
 icon
-, %7Bflex: 1%7D%5D%7D/%3E%3C/View%3E%0A  
+%7D/%3E%0A
     
@@ -848,28 +848,28 @@
           %3C/
-View
+Text
 %3E%0A         %3C
@@ -2674,24 +2674,27 @@
 around',%0A   
+ //
  paddingLeft

Fix team chat