flatlist.tsx

import { StyleSheet, Text, View, FlatList } from 'react-native';
import * as DocumentPicker from 'expo-document-picker';
import { Feather } from '@expo/vector-icons';
import CustomText from '../../components/Text';
import { useAuth } from '../../context/auth';
import * as S from './styles';
import database from '../../database';
import theme from '../../styles/theme';
import { LoadingIndicator } from '../../components/LoadingIndicator';
import api from '../../services/api';

import Label from '../../components/Label';

interface Contact {
  id: string;
  bairro: string;
  celular: string;
  cep: string;
  cidade: string;
  cnpj: string;
  contato: string;
  dataCadastro: string;
  email: string;
  emailNf: string;
  endereco: string;
  fantasia: string;
  fone: string;
  inscricaoEstadual: string;
  limiteCredito: string;
  numero: string;
  razaoSocial: string;
  situacao: string;
  uf: string;
}

export default function Home({ navigation }: any) {
  const { setIsLogged } = useAuth();
  const [contacts, setContacts] = useState<Contact[]>([]);
  const [refreshing, setRefreshing] = useState(false);
  const [loading, setLoading] = useState(false);

  async function refreshList() {
    setRefreshing(true);
    await loadPage();
    setRefreshing(false);
  }

  const loadPage = useCallback(async () => {
    try {
      const response = await api.get(`/customers`);
      setContacts(response.data);
    } catch (error) {
      alert('Erro ao atualizar o feed de notícias');
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    loadPage();
  }, [loadPage]);


  return (
    <View>
      <FlatList
        data={contacts}
        onEndReached={() => loadPage()}
        onEndReachedThreshold={0.5}
        onRefresh={() => refreshList()}
        refreshing={refreshing}
        keyExtractor={contact => String(contact.id)}
        renderItem={({ item }) => {
          return (
            <S.Container>
              <S.InnerContainer>
                <S.TextContainer>
                  <S.Name>{item.razaoSocial}</S.Name>
                  <S.Text>CNPJ: {item.cnpj}</S.Text>
                  <S.Text>Nome do contato</S.Text>
                  <S.Text style={{ textTransform: 'capitalize' }}>
                    {item.cidade}, {item.uf}
                  </S.Text>
                </S.TextContainer>
                <Label text="Bloqueado" variant="alert" size="normal" />
              </S.InnerContainer>
              <S.BorderBottom />
            </S.Container>
          );
        }}
      />
    </View>

index.tsx

import React from 'react';
import * as S from './styles';

interface LabelProps {
  text: string;
  variant: 'info' | 'success' | 'alert' | 'default';
  size: 'small' | 'normal' | 'large' | 'xlarge';
}

export default function Label({ text, variant, size }: LabelProps) {
  return (
    <S.Container>
      <S.Text variant={variant} size={size}>
        {text}
      </S.Text>
    </S.Container>
  );
}

styles.ts

import styled, { css } from 'styled-components/native';

interface TextProps {
  size: 'small' | 'normal' | 'large' | 'xlarge';
  variant: 'info' | 'success' | 'alert' | 'default';
}

export const Container = styled.View`
  ${({ theme }) => css`
    align-items: center;
  `}
`;

export const Text = styled.Text<TextProps>`
  ${({ theme, size, variant }) => css`
    color: white;
    padding: 5px 20px 3px 20px;
    font-family: ${theme.fonts.label.fontFamily}
    font-size: ${theme.fonts.sizes[`${size}`]};
    border-radius: 8px;
    ${variant === 'info' && `background-color: ${theme.colors.info}`}
    ${variant === 'alert' && `background-color: ${theme.colors.alert}`}
    ${variant === 'success' && `background-color: ${theme.colors.success}`}
    ${variant === 'default' && `background-color: gray`};
  `}
`;

stylesFlatlist.ts

import styled, { css } from 'styled-components/native';

export const Container = styled.View`
  ${({ theme }) => css``}
`;

export const InnerContainer = styled.View`
  ${({ theme }) => css`
    flex-direction: row;
    flex: 1;
    padding: 5px 20px;
  `}
`;

export const BorderBottom = styled.View`
  height: 1px;
  background-color: gray;
  flex: 1;
  margin: 0px 20px;
`;

export const TextContainer = styled.View`
  ${({ theme }) => css`
    flex: 1;
  `}
`;

export const Name = styled.Text`
  ${({ theme }) => css`
    color: ${theme.fonts.title.color};
    font-family: ${theme.fonts.subhead.fontFamily};
    font-size: ${theme.fonts.subhead.fontSize};
    text-transform: capitalize;
  `}
`;

export const Text = styled.Text`
  ${({ theme }) => css`
    color: ${theme.fonts.title.color};
    font-family: ${theme.fonts.description.fontFamily};
    font-size: ${theme.fonts.description.fontSize};
  `}
`;