[Rick and Morty Characters Wiki]— Parte 2.1 — Configuração — react-native-vector-icons

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 do nosso projeto vamos configurar a lib react-native-vector-icons:

# instale as dependências no projeto
yarn add react-native-vector-icons

# projetos com typescript precisam do pacote de tipagem
yarn add -D @types/react-native-vector-icons

# instale as dependências para ios
cd ios && pod install

Para android é preciso um passo a mais na configuração, passo a passo nesse link.

Com a lib devidamente instalada é preciso reiniciar o app, com isso feito vamos criar uma pasta chamada "config" dentro da pasta "src":

No arquivo config/vector-icons/index.ts:

import Ionicons from 'react-native-vector-icons/Ionicons';

Ionicons.loadFont();

No arquivo config/index.ts:

import './vector-icons';

Atualizando o App.tsx:

import React from 'react';
import { StatusBar, Text, View } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';

import './config'; // <-- adicione esta linha

const App = () => {
  return (
    <>
      <StatusBar barStyle={'dark-content'} />
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Rick and Morty Characters Wiki</Text>
        <Ionicons name="person" />
      </View>
    </>
  );
};

export default App;

Assim teremos:

No próximo passo vamos trabalhar com navegação, continua na parte 2.2.

Parte 2.2 — React Navigation

GitHub - WallysonGalvao/rickmortywiki

GitHub - oblador/react-native-vector-icons: Customizable Icons for React Native with support for…