APP Template 👋

Template de app criado com a arquitetura do Alambrado.

Como começar

1. Instale as dependências

   npm install ou yarn

2. Inicie o app

    npx expo start ou yarn start

Dependências

O projeto foi criado usando as seguintes tecnologias:

• Expo
• Expo Router
• React Native
• react-native-alert-notification
• react-native-onesignal
• react-native-reanimated
• styled-components
• swr
• yup
• Jest
• React Native Testing Library

Screens

A definição das rotas & telas é feita através da criação de pastas e arquivos, como no NextJS.

Para simplificar, as rotas são definidas em arquivos e as páginas são importadas dentro dela, exemplo:

Página de configurações

Rota definida em: src/app/(home)/settings.tsx:

// setings.tsx
import SettingsPage from "@/src/screens/settings/settings.page";

export default function SettingsScreen() {
  return <SettingsPage />;
}

Estrutura da página (estilização, controllers, etc...) definidos em src/screens/settings/*:

// settings.page.tsx
export default function SettingsPage() {
  return (
    <S.Container>
   // ...

A criação de um novo grupo de rotas é feito através da criação de pastas, como no src/app/(home)/*, as rotas e páginas são definidas através da criação de um arquivo _layout.tsx:

• src/app/(home)/_layout.tsx;
• src/app/(auth)/_layout.tsx;

Grupos de telas distintas de níveis superiores (como a página de autenticação e a página home por exemplo) devem ser definidas no arquivo de navegação principal src/app/main.tsx:

// main.tsx
export function MainNavigator() {
  return (
    // Observe que tanto a página home quanto a página auth são definidas aqui.
    <Stack>
      <Stack.Screen
        name="(home)"
        options={{ headerShown: false, headerTitle: "Home" }}
      />
      <Stack.Screen
        name="(auth)"
        options={{ headerShown: false, headerTitle: "Auth" }}
      />
      <Stack.Screen name="+not-found" />
    </Stack>
  );
}

Services, Hooks, Controllers, UseCases

O projeto é separado em 5 partes seguindo a seguinte ordem:

  Services *
    ├── Hooks *
          ├── UseCases
                ├── Controllers
                      ├── Pages

Onde:

• Os services são os únicos que fazem contato direto com a API (um exemplo disso é a criação dos métodos CRUD de users em src/services/user/user.services.ts;
• OS hooks interagem com os services e eles são responsáveis por gerenciar os estados e a lógica de busca de dados, retornando informações como isLoading, data, etc...;
• Os UseCases encapsulam a lógica de negócios específica e utilizam hooks para obter dados, retornando dados e estados formatados para o controlador;
• Os Controllers são responsáveis por orquestrar a interação entre os usecases e a interface do usuário, gerenciando callbacks e lógica de UI.
• As Pages são as páginas com os dados, estados e funções retornados pelo controller disponíveis para a interação com o usuário;

Estilização

O app é inteiramente estilizado com styled-components, contendo um arquivo de estilização global localizado em src/config.Theme.ts;

Neste arquivo contém as principais cores utilizadas pelo app.

// home.style.ts
import { Theme } from "@/src/config/Theme";

export const AlertButton = styled(TouchableOpacity)`
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: ${Theme.colors.mainColor};
  // Aqui o background-color está usando a cor principal do app
  padding: 12px 10px;
  border-radius: 8px;
`;

Demais configurações

Serviços como OneSignal, Alerts, AuthMiddleware devem ser definidos em src/app/_layout.tsx:

// _layout.tsx
// Providers & Contextos definidos aqui serão utilizáveis no app inteiro.
export default function RootLayout() {
  return (
      <AlertNotificationRoot>
        <AlertProvider>
          <AuthProvider>
            <MainNavigator />
          </AuthProvider>
        </AlertProvider>
      </AlertNotificationRoot>
    );
}

Saiba mais

To learn more about developing your project with Expo, look at the following resources:

• Expo documentation: Learn fundamentals, or go into advanced topics with our guides.
• Learn Expo tutorial: Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.