sguin

render() {
    const { style, user, loading } = this.props;

    const userName = loading
        ? 'Loading...'
        : (user && user.name) || 'Failed to fetch user'; // TODO: proper error handling

    return (
        <View style={styles.mainContainer}>
                <View style={styles.headerContainer}>
                    <Text style={styles.title}> {userName} </Text>
                </View>
                <View>
                     <View>
                    <View style={styles.picture} />
                    <View style={styles.editButton}>
                        <TouchableOpacity>
                            <Icon
                            type="FontAwesome"
                            name="photo"
                            style={{fontSize: 20, color: colors.text}}
                            />
                        </TouchableOpacity>
                        </View>
                        </View>
                </View>
                <View style={styles.spacingView} />
                <View style={styles.middleContainer}>
                    <View style={styles.userInfoBox}>
                        <Text style={styles.title}>150</Text>
                        <Text style={styles.userStatistics}>Tarefas</Text>
                        <Text style={styles.userStatistics}>Realizadas</Text>
                    </View>
                    <View style={styles.userInfoBox}>
                        <Text style={styles.pontuationTitle}>36</Text>
                        <Text style={styles.userStatistics}>Pontos</Text>
                    </View>
                    <View style={styles.userInfoBox}>
                        <Text style={styles.title}>48</Text>
                        <Text style={styles.userStatistics}>Eventos</Text>
                        <Text style={styles.userStatistics}>Concluídos</Text>
                    </View>
                </View>
                <View style={styles.bottomContainer}>
                  <EditForm />
            </View>
        </View>
    );
  }