Cacher is the code snippet organizer for pro developers

/* Core */
import React, { Component } from 'react';
/* Presentational */
import { View, Text, TouchableOpacity, TouchableWithoutFeedback } from 'react-native';
import styles from './styles';
//Icon
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import { faUser, faUserCheck, faUserTag, faUserTimes } from '@fortawesome/free-solid-svg-icons';

//Modal
import Presence from "../../Modal/Presence";

export default class FrequencyItem extends Component {

  constructor(props) {
    super(props);

    this.state = {
      switchPresenca: this.props.frequency.presenca,
      showHandlerPresence: false,
      frequencia: props.frequency,
      periodoAbono: false,
      currentDate: this.props.currentDate,
      
    };
  }

  updateFrequency = () => {
    this.props.onUpdateFrequency({ ...this.state })

  }

  handlerPresence = (data) => {
    this.setState({ showHandlerPresence: false })
    this.setState({ switchPresenca: data.value });
  }

  showPresence = () => {
    // TODO: Preencher periodo abono quando currentDate for a última data
    if(this.state.periodoAbono === true){
      this.setState({ showHandlerPresence: true })
    }else{
      if(this.state.switchPresenca === 'PRE' ){
        this.setState({ switchPresenca: 'FAL' })
      }else{
        this.setState({ switchPresenca: 'PRE' })
      }
    }
  }

  onFrequencyStudent = (frequencia) => {
    this.props.navigation.navigate('Student', { frequencia });
  }

  updateFrequenciaList = () => {
    this.props.updateFrequenciaList();
  }

  // teste de soluça de bug
  componentDidMount() {
    const frequencia = this.props.frequency;
    const presenca = this.props.frequency.presenca;
    this.setState({frequencia: frequencia, presenca: presenca})
  }

  componentWillReceiveProps (nextProps) {
    if (nextProps.frequency.presenca !== this.props.frequency.presenca) {
      this.setState({ switchPresenca: nextProps.frequency.presenca });
    }
  }

  render() {

    const frequencia = this.state.frequencia;
    const presenca = this.state.switchPresenca;
    const currentDate = this.props.currentDate;
    
    
    let presentButton;

    if (presenca === 'PRE') {
      presentButton = <View  style={styles.groupIcon}>
                        <View style={[styles.iconBack, styles.iconPresent]} >
                          <FontAwesomeIcon icon={ faUserCheck } size={25} color="#FFF" />
                        </View>
                        <Text style={styles.textPre}>Presente</Text>  
                      </View>
                     
    } else if (presenca === 'FAL') {
      presentButton = <View  style={styles.groupIcon}>
                        <View style={[styles.iconBack, styles.iconAbsence]} >
                          <FontAwesomeIcon icon={ faUserTimes } size={25} color="#FFF" />
                        </View>
                        <Text style={styles.textFal}>Faltou</Text>
                      </View>
         
    }else if (presenca === 'ABO'){
      presentButton = <View  style={styles.groupIcon}>
                        <View style={[styles.iconBack, styles.iconAllow]} >
                          <FontAwesomeIcon icon={ faUserTag } size={25} color="#FFF" />
                        </View>
                        <Text style={styles.textAbo}>Abonado</Text>
                      </View>
        
    }else if (presenca === '-') {
      presentButton = <View  style={styles.groupIcon}>
                        <View style={[styles.iconBack, styles.iconNeutral]} >
                            <FontAwesomeIcon icon={ faUser } size={25} color="#FFF" />
                        </View>
                        <Text style={styles.textNeutro}>Neutro</Text>
                      </View>
    }else {
      presentButton = <View  style={styles.groupIcon}>
                        <View style={styles.iconBack} >
                          {/* <Icon name="user" size={25} color="#CFCFCF" style="solid" />   */}
                          <FontAwesomeIcon icon={ faUser } size={25} color="#CFCFCF"  /> 
                        </View>
                      </View>
    }


    return (
      
      <View style={styles.container}>
        <Presence isVisible={this.state.showHandlerPresence} filterData={currentDate}
            onSave={this.handlerPresence}
            onCancel={() => this.setState({ showHandlerPresence: false })} />
        <TouchableOpacity style={styles.studentContainer} 
              onPress={() => this.onFrequencyStudent(frequencia)}>
          <View >
            
            <Text style={styles.title}>{frequencia.nome}</Text>
            <Text style={styles.mat}>Matrícula: {frequencia.registration} </Text>
            
            <View style={styles.groupFalta}>
                <Text style={styles.description}>Faltas Acumuladas</Text>
                {frequencia.accAbsences> 25 ? (
                    <Text style={[styles.perc,styles.textFal]}> {frequencia.accAbsences} </Text>        
                  ) : (
                    <Text style={styles.perc}> {frequencia.accAbsences}</Text>    
                  )}   
                
            </View>

          </View>
        </TouchableOpacity>

        <TouchableWithoutFeedback style={styles.infoContainer} 
              onPress={() => this.showPresence() }  >

            {presentButton}

        </TouchableWithoutFeedback>
        
      </View>
    )
  }
}