[Rick and Morty Characters Wiki] — Parte 3— Personagens — Lista

Photo by Patrick Tomasso on Unsplash

Caso tenha caído aqui por acidente, essa é a parte 1 de uma serie de posts para implementação de uma aplicação inspirada no post Rick and Morty Character Wiki do Joy Shaeb:

0 — Rick and Morty Character Wiki

Dentro da nossa pasta src/screens/Characters vamos criar o arquivo styles.ts e junto com o styled-component criar um componente de lista, já com a tipagem :

src/screens/Characters/styles.ts:

import styled from 'styled-components/native';
import { FlatList, FlatListProps } from 'react-native';

import { Character } from '~/types/common';

export const CharacterList = styled(
  FlatList as new (props: FlatListProps<Character>) => FlatList<Character[]>,
).attrs({
  numColumns: 2,
  columnWrapperStyle: {
    justifyContent: 'space-around',
  },
  showsVerticalScrollIndicator: true,
})``;

Atualizando o src/screens/Characters/index.tsx:

import React from 'react';
import { Text, View } from 'react-native';
import { useInfiniteQuery } from '@tanstack/react-query';
import { SafeAreaView } from 'react-native-safe-area-context';

import { getCharacters } from '~/services/requests/characters/queries';

import { Character } from '~/types/common';

import * as S from './styles';


const Characters = () => {
  /**
   * Aqui trocamos o useQuery pelo hook useInfiniteQuery, no futuro iremos
   * implementar a listagem infinita e este hook é mais indicado.
   */
  const { data } = useInfiniteQuery(['characters'], () => getCharacters());

  const keyExtractor = (item: Character) => item.id.toString();

  const renderItem = ({ item }: { item: Character }) => (
    <View>
      <Text>{item.name}</Text>
    </View>
  );

  return (
    <SafeAreaView>
      <S.CharacterList
        // useInfiniteQuery retorna pra gente um array de arrays por isso
        // utilizamos flatMap dessa forma
        data={data?.pages.flatMap(page => page.results)}
        keyExtractor={keyExtractor}
        renderItem={renderItem}
      />
    </SafeAreaView>
  );
};

export default Characters;

Com isso temos:

Continua no 3.1.

3.1 — Card

GitHub - WallysonGalvao/rickmortywiki