Criar componentes no arquivo de InvitedConselorsData

[andre-filho]

Criar subcomponentes para impedir duplicação de código e encapsular melhor o componente, deixando validação e tratamento de cada campo para o subcomponente

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  listRegisters: {
    marginVertical: 5,
    backgroundColor: 'white',
    paddingLeft: 5,
    justifyContent: 'flex-start',
  },

  text: {
    fontSize: 15,
    paddingVertical: 2,
  },
});

const InvitedCounselorsData = counselor => (

  <View style={styles.listRegisters}>
    <Text style={styles.text}>
      <Text style={{ fontWeight: 'bold' }}>Nome: </Text>
      {counselor.name}
    </Text>
    <Text style={styles.text}>
      <Text style={{ fontWeight: 'bold' }}>CPF: </Text>
      {counselor.profile.cpf}
    </Text>
    <Text style={styles.text}>
      <Text style={{ fontWeight: 'bold' }}>Telefone: </Text>
      {counselor.profile.phone}
    </Text>
  </View>
);

export default InvitedCounselorsData;

[andre-filho]

Resolvido no commit 6e467d0:

InvitedConselorsData.js

import React from 'react';
import { View, StyleSheet } from 'react-native';
import BoldText from './BoldText';

const styles = StyleSheet.create({
  listRegisters: {
    marginVertical: 5,
    backgroundColor: 'white',
    paddingLeft: 5,
    justifyContent: 'flex-start',
  },
});

const InvitedCounselorsData = counselor => (
  <View style={styles.listRegisters}>
    <BoldText
      label="Nome"
      data={counselor.name}
    />
    <BoldText
      label="CPF"
      data={counselor.profile.cpf}
    />
    <BoldText
      label="Telefone"
      data={counselor.profile.phone}
    />
  </View>
);

export default InvitedCounselorsData;

---

BoldText.js

import React from 'react';
import PropTypes from 'prop-types';
import { View, Text, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  text: {
    fontSize: 15,
    paddingVertical: 2,
  },
});

const BoldText = ({ data, label }) => (
  <View>
    <Text style={styles.text}>
      <Text style={{ fontWeight: 'bold' }}>
        {label}:
      </Text>
      {data}
    </Text>
  </View>
);

const { string } = PropTypes;

BoldText.propTypes = {
  data: string.isRequired,
  label: string.isRequired,
};

export default BoldText;

[andre-filho]

Foi utilizado a forma de stateless component ao invés da classe por conta da classe oferecer muito mais do que é necessário para este componente, logo essa abordagem foi utilizada. Além disso, ao invés de receber um props, o componente passa a acessar exclusivamente os valores data e label dentro de props