[Rick and Morty Characters Wiki] — Parte 2.2 — Configuração— React Navigation

Photo by Jamie Street 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

Vamos começar instalando em nosso projeto as dependências do React Navigation:

# instalando as dependências no projeto
yarn add @react-navigation/native react-native-screens react-native-safe-area-context @react-navigation/bottom-tabs @react-navigation/native-stack

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

Como estamos trabalhando com o Bare React Native, para o android é preciso um passo a mais, explicado neste link.

Vamos criar a estrutura inicial de navegação do nosso projeto, então dentro da pasta “src”:

Estrutura de navegação

No arquivo src/screens/Characters/index.tsx:

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

const Characters = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Characters Screen</Text>
    </View>
  );
};

export default Characters;

No arquivos src/routes/index.tsx:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Ionicons from 'react-native-vector-icons/Ionicons';

/**
* Essa importação foi feita utilizando absolut import, no final desse post
* tem um link para o artigo do Henrique Tavares com o passo a passo
* de implementação.
**/
import Characters from '~/screens/Characters';

export type RootStackParamList = {
  BottomRoutes: undefined;
};

export type RootBottomParamList = {
  Characters: undefined;
};

export const BottomRoutes = () => {
  const Tab = createBottomTabNavigator<RootBottomParamList>();

  return (
    <Tab.Navigator
      screenOptions={{
        headerShown: false,
      }}
      initialRouteName="Characters">
      <Tab.Screen
        name="Characters"
        component={Characters}
        options={{
          tabBarLabel: 'Characters',
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="person" color={color} size={size} />
          ),
        }}
      />
    </Tab.Navigator>
  );
};

export const Routes = () => {
  const Stack = createNativeStackNavigator<RootStackParamList>();
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
        }}>
        <Stack.Group>
          <Stack.Screen name="BottomRoutes" component={BottomRoutes} />
        </Stack.Group>
      </Stack.Navigator>
    </NavigationContainer>
  );
};

No arquivos src/routes/global.tsx:

import { RootStackParamList, RootBottomParamList } from '.';

declare global {
  namespace ReactNavigation {
    interface RootParamList extends RootBottomParamList, RootStackParamList {}
  }
}

Atualizando o App.tsx:

import React from 'react';
import { StatusBar } from 'react-native';

// Importatação das rotas que acabamos de criar
import { Routes } from './routes';

import './config';

const App = () => {
  return (
    <>
      <StatusBar barStyle={'dark-content'} />
      <Routes />
    </>
  );
};

export default App;

Assim teremos:

Em seguida vamos configurar nosso tema com styled-components, continua no 2.3

Parte 2.3 — Tematização com Styled-Components

GitHub - WallysonGalvao/rickmortywiki

Configurando Babel Root Import em projetos TypeScript no ReactJS e React Native