@alphatechma/expo-rn-template 1.0.2

package/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ['universe/native'],
+};

package/.github/workflows/publish.yml

@@ -0,0 +1,40 @@
+name: Publish to npm
+
+on:
+  push:
+    tags:
+      - 'v*'
+  workflow_dispatch:
+
+jobs:
+  publish:
+    name: Publish package
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run lint
+        run: npm run lint || true
+
+      - name: Run TypeScript check
+        run: npx tsc --noEmit || true
+
+      - name: Build (if defined)
+        run: npm run build --if-present
+
+      - name: Publish to npm
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: |
+          echo "Publishing package..."
+          npm publish --access public

package/.github/workflows/release.yml

@@ -0,0 +1,28 @@
+name: Release (semantic-release)
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run semantic-release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: npx semantic-release

package/.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+# Run lint-staged on staged files
+npx lint-staged

package/.releaserc.json

@@ -0,0 +1,11 @@
+{
+  "branches": ["main"],
+  "repositoryUrl": "https://github.com/alphatechma/expo-rn-template-alphatech",
+  "plugins": [
+    ["@semantic-release/commit-analyzer", { "preset": "angular" }],
+    "@semantic-release/release-notes-generator",
+    "@semantic-release/changelog",
+    ["@semantic-release/npm", { "npmPublish": true }],
+    ["@semantic-release/git", { "assets": ["package.json", "CHANGELOG.md"], "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}" }]
+  ]
+}

package/App.tsx

@@ -0,0 +1,49 @@
+import {
+    Roboto_300Light,
+    Roboto_400Regular,
+    Roboto_500Medium,
+    Roboto_700Bold,
+    Roboto_900Black,
+    useFonts,
+} from '@expo-google-fonts/roboto';
+import Routes from '@routes/index';
+import {setupStore} from '@src/store/store';
+import {StatusBar} from 'expo-status-bar';
+import React from 'react';
+import {ActivityIndicator, View} from 'react-native';
+import {GestureHandlerRootView} from 'react-native-gesture-handler';
+import {Provider} from 'react-redux';
+
+import AppProvider from './src/hooks';
+
+export default function App() {
+    const [fontsLoaded] = useFonts({
+        Roboto_300Light,
+        Roboto_400Regular,
+        Roboto_500Medium,
+        Roboto_700Bold,
+        Roboto_900Black,
+    });
+
+    if (!fontsLoaded) {
+        return (
+            <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
+                <ActivityIndicator color="aliceblue"/>
+            </View>
+        );
+    }
+    const store = setupStore();
+
+    return (
+        <GestureHandlerRootView style={{flex: 1}}>
+            <Provider store={store}>
+                <StatusBar style="light"/>
+                <AppProvider>
+                    <View style={{flex: 1}}>
+                        <Routes/>
+                    </View>
+                </AppProvider>
+            </Provider>
+        </GestureHandlerRootView>
+    );
+}

package/README.md

@@ -0,0 +1,259 @@
+# RNTemplate — Template Expo + React Native
+
+Um template mínimo para iniciar apps Expo + React Native com convenções já preparadas:
+- TypeScript configurado (via `tsconfig.json`)
+- Navegação (React Navigation) com Stack + Bottom Tabs
+- Estrutura de pastas (páginas, features, estilos, routes, store)
+- ESLint + Prettier configurados (Husky + lint-staged incluídos para pre-commit)
+
+Este README explica como usar e personalizar o template rapidamente.
+
+---
+
+## Sumário
+- Quickstart
+- Scripts úteis
+- Lint / Prettier / Husky
+- Estrutura do projeto e como adicionar páginas/rotas
+- Store / API (RTK Query)
+- Tipos TypeScript e módulos sem tipos
+- Troubleshooting comuns
+- Próximos passos e personalizações sugeridas
+- Publicação no npm (via GitHub Actions)
+
+---
+
+## Quickstart
+
+1) Instale dependências
+
+```bash
+npm install --legacy-peer-deps
+```
+
+Se você usa `yarn` ou `pnpm` adapte o comando conforme a sua preferência.
+
+2) Instale os hooks do Husky (preparar git hooks)
+
+```bash
+npm run prepare
+# ou (manual)
+npx husky install
+```
+
+3) Rodar o projeto (Expo)
+
+```bash
+npm run start
+# abrir no iOS / Android / Web
+npm run ios
+npm run android
+npm run web
+```
+
+4) Validar TypeScript e formatar código
+
+```bash
+# checar tipos (sem emitir build)
+npx tsc --noEmit
+
+# formatar código (Prettier)
+npm run format
+```
+
+---
+
+## Scripts importantes (package.json)
+- `npm run start` — inicia o Metro/Expo
+- `npm run ios` / `npm run android` / `npm run web` — abre para a plataforma correspondente
+- `npm run lint` — executa ESLint (configável)
+- `npm run lint:fix` — aplica correções automáticas onde possível
+- `npm run format` — executa Prettier
+- `npm run prepare` — instala os hooks do Husky
+
+---
+
+## Lint / Prettier / Husky
+
+O template já contém configuração mínima:
+- `.eslintrc.js` com `extends: ['universe/native']` (sua preferência de config)
+- `eslint.config.cjs` neutralizado para evitar conflito com flat config
+- `.prettierrc` e `.prettierignore` prontos
+- `husky` + `lint-staged` configurados: pre-commit executa `lint-staged`
+
+Se quiser executar os checks localmente:
+
+```bash
+# listar problemas de lint
+npm run lint
+
+# tentar corrigir automaticamente
+npm run lint:fix
+```
+
+Se os hooks não estiverem ativos (por exemplo, em CI ou após clonar):
+
+```bash
+npm run prepare
+```
+
+Nota: em ambientes com problemas de peers ou tokens de npm você pode precisar rodar:
+
+```bash
+npm config delete //registry.npmjs.org/:_authToken
+npm login
+# depois
+npm install --legacy-peer-deps
+```
+
+---
+
+## Estrutura do projeto (visão rápida)
+
+Principais pastas:
+- `src/pages/` — telas (ex.: `Home`, `Login`, etc). O template já tem placeholders.
+- `src/routes/` — onde o Router/Navigation vive (`src/routes/index.tsx` já transformado em template)
+- `src/features/` — features domain-driven (ex.: `account`, `api` — RTK Query slices)
+- `src/store/` — configuração do Redux / store
+- `src/styles/` — theme, styled.d.ts e tokens
+- `src/hooks/` — providers / wrappers do app (ThemeProvider, NavigationContainer)
+- `src/@types/` — declarações de módulos e tipos globais
+
+Como adicionar uma tela simples e conectá-la nas rotas:
+
+1. Criar arquivo `src/pages/MinhaPagina/index.tsx` com um componente React Native.
+2. Importar a tela em `src/routes/index.tsx` (ou mover o placeholder para o arquivo novo).
+3. Adicionar um `Tab.Screen` ou `Stack.Screen` conforme desejar.
+
+Exemplo rápido (conceptual):
+
+```tsx
+// src/pages/MinhaPagina/index.tsx
+import React from 'react';
+import { View, Text } from 'react-native';
+export default function MinhaPagina() {
+  return (
+    <View><Text>Minha página</Text></View>
+  );
+}
+```
+
+E em `src/routes/index.tsx` adicione a rota ao `Tab.Navigator`.
+
+---
+
+## Store e API (RTK Query)
+
+O template inclui um `apiSlice` pronto para injeção de endpoints e um `setupStore` em `src/store/store.ts`.
+- `src/features/api/apiSlice.ts` — base para RTK Query (configure `baseUrl` e o token se necessário)
+- Para criar endpoints de exemplo, veja o `src/features/account/exampleSlice.ts` já incluído como template CRUD usando `apiSlice.injectEndpoints`.
+
+Para usar o store em sua aplicação, configure o provider no `App.tsx` (ou em `src/hooks`) e passe o `store`:
+
+```tsx
+import { Provider } from 'react-redux';
+import { setupStore } from './src/store/store';
+const store = setupStore();
+
+// ... wrap your App with <Provider store={store}> ...
+```
+
+---
+
+## Tipos TypeScript e módulos sem tipos
+
+Alguns pacotes não fornecem typings. Para evitar erros do TypeScript o template inclui `src/@types/index.d.ts` com declarações genéricas para imagens e alguns pacotes. Recomenda-se instalar tipos oficiais quando existirem:
+
+```bash
+npm i -D @types/react @types/react-native
+```
+
+Se você adicionar uma dependência que não tem tipos, adicione uma declaração minimal em `src/@types/index.d.ts` como:
+
+```ts
+declare module 'nome-do-pacote';
+```
+
+---
+
+## Troubleshooting comum
+
+- Erro ao instalar pacotes: `ERESOLVE` ou conflito de peer
+  - Tente: `npm install --legacy-peer-deps`
+- Erro `Access token expired or revoked` no `npm install`
+  - Refaça login: `npm logout` e `npm login` ou delete o token local:
+
+```bash
+npm config delete //registry.npmjs.org/:_authToken
+npm login
+```
+
+- Erro do TypeScript sobre `.tsx` / `--jsx is not set`
+  - Solução: `tsconfig.json` já tem `"jsx": "react-jsx"` configurado. Se estiver faltando, adicione.
+
+- Regras do ESLint/Flat config conflitando
+  - O template inclui `.eslintrc.js` (legacy) e `eslint.config.cjs` neutralizado. Se preferir usar a config flat, remova `.eslintrc.js` e mantenha `eslint.config.cjs`.
+
+---
+
+## Publicação no npm (via GitHub Actions)
+
+Este template já tem duas opções para publicar no npm a partir do repositório:
+
+1) Publicação por tag (manual)
+- Criar uma tag com formato `vX.Y.Z` e dar push. Exemplo local:
+
+```bash
+npm run release -- 1.0.2
+# isso executa: git tag -a v1.0.2 -m "Release v1.0.2" && git push origin v1.0.2
+```
+
+- O workflow `.github/workflows/publish.yml` será disparado no push da tag e executará (instalação, lint, tsc, build, publish).
+
+2) Publicação automática com `semantic-release` (recomendada para releases automáticas)
+- Push para a branch `main` acionará `.github/workflows/release.yml` que executa `semantic-release`.
+- `semantic-release` analisa commits (conventional commits) e gera a nova versão, atualiza `CHANGELOG.md`, faz `npm publish` e cria uma release no GitHub.
+
+### Requisitos / configurações
+- Adicione o secret `NPM_TOKEN` no repositório (Settings → Secrets and variables → Actions)
+  - Nome: `NPM_TOKEN`
+  - Valor: token de automação do npm (crie em https://www.npmjs.com/settings/tokens)
+- `GITHUB_TOKEN` é provido automaticamente pelo GitHub Actions; não é necessário configurá-lo manualmente.
+
+### Qual usar?
+- Se você prefere controlar as versões manualmente (tagging), use a opção (1).
+- Se quer CI/CD para releases automáticas com base em commits (convencional), use (2) e siga o padrão `conventional commits` (feat, fix, perf, chore, etc.).
+
+---
+
+## Próximos passos e personalizações sugeridas
+
+- Defina `baseUrl` da API em `src/features/api/apiSlice.ts` e configure as rotas reais.
+- Substitua placeholders em `src/pages/*` por componentes reais e desça a árvore.
+- Adicione/atualize tokens e temas em `src/styles/theme.ts`.
+- Ajuste regras do ESLint conforme a sua equipe (ex.: permitir `any` em alguns casos, strenghten rules, etc).
+- Considere adicionar GitHub Actions para rodar `npm run lint` e `npx tsc --noEmit` no CI.
+
+---
+
+## Arquivos importantes para revisão
+- `package.json` — scripts, dependências e hooks
+- `tsconfig.json` — paths e jsx
+- `src/routes/index.tsx` — ponto central de rotas (já convertido para template)
+- `src/features/api/apiSlice.ts` — base para chamadas HTTP (RTK Query)
+- `src/store/store.ts` — setup do Redux
+- `src/@types/index.d.ts` — declare módulos sem tipos
+
+---
+
+## Licença
+Coloque aqui a licença do seu template (ex.: MIT) se for público.
+
+---
+
+Se quiser eu:
+- 1) adapto esse README para uma versão curta em inglês;
+- 2) gero instruções de CI (GitHub Actions) que rodem `npm install`, `npm run lint` e `npx tsc --noEmit`;
+- 3) adiciono um script `create-app` simples que copia o template e roda um assistant de setup.
+
+Diga qual das opções acima prefere que eu crie em seguida.

package/app.json

@@ -0,0 +1,30 @@
+{
+  "expo": {
+    "name": "RNTemplate",
+    "slug": "RNTemplate",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "newArchEnabled": true,
+    "splash": {
+      "image": "./assets/splash-icon.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "edgeToEdgeEnabled": true,
+      "predictiveBackGestureEnabled": false
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

package/index.ts

@@ -0,0 +1,8 @@
+import { registerRootComponent } from 'expo';
+
+import App from './App';
+
+// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
+// It also ensures that whether you load the app in Expo Go or in a native build,
+// the environment is set up appropriately
+registerRootComponent(App);

package/package.json

@@ -0,0 +1,92 @@
+{
+  "name": "@alphatechma/expo-rn-template",
+  "version": "1.0.2",
+  "main": "index.ts",
+  "description": "Expo React Native template by Alphatech - base templatizada para apps Expo.",
+  "keywords": ["expo", "react-native", "template", "starter", "typescript", "mobile", "alphatech"],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/alphatechma/expo-rn-template.git"
+  },
+  "homepage": "https://github.com/alphatechma/expo-rn-template#readme",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "lint": "eslint --config .eslintrc.js --ext .js,.jsx,.ts,.tsx src",
+    "lint:fix": "eslint --config .eslintrc.js --ext .js,.jsx,.ts,.tsx src --fix",
+    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,md}\"",
+    "prepare": "husky install",
+    "release": "bash -lc '\\\n      VERSION=$1;\\\n      if [ -z \"$VERSION\" ]; then echo \"Usage: npm run release -- <version> (eg. npm run release -- 1.0.0)\"; exit 1; fi;\\\n      git tag -a v$VERSION -m \"Release v$VERSION\" && git push origin v$VERSION;\\\n      echo \"Tagged v$VERSION and pushed. GitHub Action will publish on push tag.\"\"",
+    "semantic-release": "semantic-release"
+  },
+  "dependencies": {
+    "@expo-google-fonts/roboto": "^0.4.2",
+    "@expo/metro-runtime": "^6.1.2",
+    "@gorhom/bottom-sheet": "^5.2.8",
+    "@hookform/resolvers": "^5.2.2",
+    "@react-native-async-storage/async-storage": "^2.2.0",
+    "@react-native-community/checkbox": "^0.5.20",
+    "@react-native-community/datetimepicker": "^8.6.0",
+    "@react-native-community/hooks": "^100.1.0",
+    "@react-native-masked-view/masked-view": "^0.3.2",
+    "@react-native-picker/picker": "^2.11.4",
+    "@react-navigation/bottom-tabs": "^7.9.1",
+    "@react-navigation/native": "^7.1.27",
+    "@react-navigation/native-stack": "^7.9.1",
+    "@react-navigation/stack": "^7.6.14",
+    "@reduxjs/toolkit": "^2.11.2",
+    "buffer": "^6.0.3",
+    "core-js": "^3.47.0",
+    "date-fns": "^4.1.0",
+    "expo": "~54.0.31",
+    "expo-location": "^19.0.8",
+    "expo-splash-screen": "^31.0.13",
+    "expo-status-bar": "~3.0.9",
+    "expo-updates": "^29.0.16",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-hook-form": "^7.71.1",
+    "react-native": "0.81.5",
+    "react-native-date-picker": "^5.0.13",
+    "react-native-gesture-handler": "^2.30.0",
+    "react-native-iphone-x-helper": "^1.3.1",
+    "react-native-reanimated": "~3.7.0",
+    "react-native-responsive-fontsize": "^0.5.1",
+    "react-native-safe-area-context": "^5.6.2",
+    "react-native-screens": "^4.19.0",
+    "react-native-svg": "^15.15.1",
+    "react-redux": "^9.2.0",
+    "styled-components": "^6.3.8",
+    "yup": "^1.7.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.8",
+    "eslint": "^8.52.0",
+    "eslint-config-universe": "^12.0.0",
+    "prettier": "^3.0.3",
+    "husky": "^8.0.0",
+    "lint-staged": "^15.0.0",
+    "typescript": "^5.3.3",
+    "semantic-release": "^21.0.0",
+    "@semantic-release/changelog": "^6.0.0",
+    "@semantic-release/git": "^10.0.0",
+    "@semantic-release/npm": "^9.0.0",
+    "@semantic-release/release-notes-generator": "^10.0.0",
+    "@semantic-release/commit-analyzer": "^10.0.0"
+  },
+  "lint-staged": {
+    "src/**/*.{js,jsx,ts,tsx}": [
+      "npm run lint:fix",
+      "npm run format",
+      "git add"
+    ],
+    "src/**/*.{json,css,md}": [
+      "npm run format",
+      "git add"
+    ]
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/prettier.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    singleQuote: true,
+    trailingComma: 'all',
+    arrowParens: 'avoid',
+};

package/src/@types/index.d.ts

@@ -0,0 +1,4 @@
+declare module '*.png';
+declare module '*.svg';
+declare module 'expo-keycloak-auth-adapter';
+declare module 'react-native-popup-confirm-toast';

package/src/@types/navigation.d.ts

@@ -0,0 +1,5 @@
+export declare global {
+  namespace ReactNavigation {
+    interface RootParamList {}
+  }
+}

package/src/contexts/LoadingContext.tsx

@@ -0,0 +1,28 @@
+import { createContext, ReactNode, useMemo, useState } from 'react';
+
+export type LoadingContextData = {
+  loading: boolean;
+  setLoading: (value: boolean) => void;
+};
+
+export const LoadingContext = createContext({} as LoadingContextData);
+
+type AuthContextProps = {
+  children: ReactNode;
+};
+
+export function LoadingProvider({ children }: AuthContextProps) {
+  const [loading, setLoading] = useState(false);
+  const updatedValue = useMemo(
+    () => ({
+      loading,
+      setLoading,
+    }),
+    [loading],
+  );
+  return (
+    <LoadingContext.Provider value={updatedValue}>
+      {children}
+    </LoadingContext.Provider>
+  );
+}

package/src/features/api/apiSlice.ts

@@ -0,0 +1,34 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+
+/**
+ * Recupera o token armazenado no AsyncStorage pra enviar no cabeçalho Authorization
+ * @returns {Promise<string | undefined>} O token de acesso ou undefined se não existir
+ * precisa substituir o baseUrl pela URL da sua API, preferencialmente usando variáveis de ambiente
+ */
+// Recupera o token armazenado no AsyncStorage pra enviar no cabeçalho Authorization
+export const baseUrl = '';
+// Pode substituir por cookie também se preferir
+const TOKEN = 'nome_do_token_no_async_storage';
+const getToken = async () => {
+  const tk = await AsyncStorage.getItem(TOKEN);
+  const token = JSON.parse(tk || '{}');
+  return token.accessToken;
+};
+
+export const apiSlice = createApi({
+  reducerPath: 'api',
+  // Adicione aqui os TagTypes usados pelos endpoints injetados
+  tagTypes: ['Example'],
+  endpoints: builder => ({}),
+  baseQuery: fetchBaseQuery({
+    baseUrl,
+    prepareHeaders: async headers => {
+      const token = await getToken();
+      if (token) {
+        headers.set('Authorization', `Bearer ${token}`);
+      }
+      return headers;
+    },
+  }),
+});

package/src/features/example/exampleSlice.ts

@@ -0,0 +1,77 @@
+import { apiSlice } from '../api/apiSlice';
+
+// Tipos de exemplo - adapte conforme necessário
+export interface Example {
+  id: string | number;
+  name?: string;
+  description?: string;
+  [key: string]: any;
+}
+
+export type CreateExamplePayload = Partial<Example>;
+export type UpdateExamplePayload = {
+  id: string | number;
+  data: Partial<Example>;
+};
+
+/**
+ * Exemplo de API slice com operações CRUD.
+ * - getExamples: lista exemplos (GET /examples)
+ * - getExampleById: obtém um exemplo por id (GET /examples/:id)
+ * - createExample: cria um novo exemplo (POST /examples)
+ * - updateExample: atualiza um exemplo existente (PUT /examples/:id)
+ * - deleteExample: remove um exemplo (DELETE /examples/:id)
+ *
+ * Substitua as rotas e os tipos conforme a sua API.
+ */
+export const exampleApiSlice = apiSlice.injectEndpoints({
+  endpoints: build => ({
+    getExamples: build.query<Example[], void>({
+      query: () => ({ url: '/examples', method: 'GET' }),
+      providesTags: result =>
+        result
+          ? [
+              ...result.map(r => ({ type: 'Example' as const, id: r.id })),
+              { type: 'Example', id: 'LIST' },
+            ]
+          : [{ type: 'Example', id: 'LIST' }],
+    }),
+
+    getExampleById: build.query<Example, string | number>({
+      query: id => ({ url: `/examples/${id}`, method: 'GET' }),
+      providesTags: (result, error, id) => [{ type: 'Example' as const, id }],
+    }),
+
+    createExample: build.mutation<Example, CreateExamplePayload>({
+      query: body => ({ url: '/examples', method: 'POST', body }),
+      invalidatesTags: [{ type: 'Example', id: 'LIST' }],
+    }),
+
+    updateExample: build.mutation<Example, UpdateExamplePayload>({
+      query: ({ id, data }) => ({
+        url: `/examples/${id}`,
+        method: 'PUT',
+        body: data,
+      }),
+      invalidatesTags: (result, error, arg) => [
+        { type: 'Example', id: arg.id },
+      ],
+    }),
+
+    deleteExample: build.mutation<{ success: boolean }, string | number>({
+      query: id => ({ url: `/examples/${id}`, method: 'DELETE' }),
+      invalidatesTags: (result, error, id) => [{ type: 'Example', id }],
+    }),
+  }),
+});
+
+// Hooks gerados pelo RTK Query para consumo nas telas/componetes
+export const {
+  useGetExamplesQuery,
+  useGetExampleByIdQuery,
+  useCreateExampleMutation,
+  useUpdateExampleMutation,
+  useDeleteExampleMutation,
+} = exampleApiSlice;
+
+export default exampleApiSlice;

package/src/hooks/index.tsx

@@ -0,0 +1,31 @@
+import { LoadingProvider } from '@contexts/LoadingContext';
+import { NavigationContainer } from '@react-navigation/native';
+import theme from '@src/styles/theme';
+import React, { ReactElement } from 'react';
+import { View } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { ThemeProvider } from 'styled-components/native';
+
+const PopupRootProvider: any = require('react-native-popup-confirm-toast').Root;
+
+interface AppProviderProps {
+  children: ReactElement;
+}
+
+const AppProvider = ({ children }: AppProviderProps) => {
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <ThemeProvider theme={theme}>
+        <PopupRootProvider>
+          <LoadingProvider>
+            <NavigationContainer>
+              <View style={{ flex: 1 }}>{children}</View>
+            </NavigationContainer>
+          </LoadingProvider>
+        </PopupRootProvider>
+      </ThemeProvider>
+    </GestureHandlerRootView>
+  );
+};
+
+export default AppProvider;

package/src/hooks/useLoading.ts

@@ -0,0 +1,10 @@
+import { LoadingContext } from '@contexts/LoadingContext';
+import { useContext } from 'react';
+
+export function useLoading() {
+  const context = useContext(LoadingContext);
+  if (!context) {
+    throw new Error('useLoading must be used within LoadingProvider');
+  }
+  return context;
+}

package/src/routes/index.tsx

@@ -0,0 +1,43 @@
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { ParamListBase } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Home } from '@screens/index';
+import React from 'react';
+
+// Tipos de navegação (ajuste conforme sua aplicação)
+export type StackParamList = {
+  Home: undefined;
+};
+
+interface BottomTabRoutes extends ParamListBase {
+  Inicio: undefined;
+}
+
+const Stack = createNativeStackNavigator<StackParamList>();
+const Tab = createBottomTabNavigator<BottomTabRoutes>();
+
+const HomeStackRoutes: React.FC = () => (
+  <Stack.Navigator>
+    <Stack.Screen
+      name="Home"
+      component={Home}
+      options={{ headerShown: true }}
+    />
+  </Stack.Navigator>
+);
+
+export default function Routes() {
+  return (
+    <Tab.Navigator
+      screenOptions={{
+        headerShown: false,
+      }}
+    >
+      <Tab.Screen
+        name="Inicio"
+        component={HomeStackRoutes}
+        options={{ title: 'Início' }}
+      />
+    </Tab.Navigator>
+  );
+}

package/src/screens/Home/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+const Home: React.FC = () => {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Bem-vindo</Text>
+      <Text style={styles.subtitle}>Esta é uma tela template simples.</Text>
+    </View>
+  );
+};
+
+export default Home;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 20,
+    backgroundColor: '#FFFFFF',
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: '700',
+    marginBottom: 8,
+    color: '#111827',
+  },
+  subtitle: {
+    fontSize: 16,
+    color: '#6B7280',
+  },
+});

package/src/screens/Home/styles.ts

@@ -0,0 +1,85 @@
+import theme from '@theme/theme';
+import { Dimensions } from 'react-native';
+import { getStatusBarHeight } from 'react-native-iphone-x-helper';
+import { RFValue } from 'react-native-responsive-fontsize';
+import styled from 'styled-components/native';
+
+export const Container = styled.ScrollView`
+  flex: 1;
+  background-color: ${({ theme }: any) => theme.colors.white};
+`;
+
+export const ContentContainer = styled.View`
+  padding: 0 20px 20px;
+`;
+
+export const Logo = styled.Image`
+  height: ${RFValue(70)}px;
+  width: ${RFValue(80)}px;
+`;
+
+export const Header = styled.ImageBackground.attrs({
+  blurRadius: 5,
+})`
+  flex-direction: row;
+  height: 160px;
+  width: 100%;
+  padding-top: ${getStatusBarHeight() + 30}px;
+  background-color: ${({ theme }: any) => theme.colors.secondary};
+`;
+
+export const HeaderContainer = styled.View.attrs({})`
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  padding-left: 16px;
+  padding-right: 16px;
+`;
+
+export const HeadingContainer = styled.View`
+  padding: 20px 16px;
+  margin-top: -60px;
+`;
+
+export const CardsContainer = styled.View``;
+
+const { width } = Dimensions.get('window');
+const CARD_WIDTH = width - 60;
+const CARD_WIDTH_SPACING = CARD_WIDTH + theme.spacing.l;
+export const CardsList = styled.FlatList.attrs({
+  horizontal: true,
+  decelerationRate: 'fast',
+  showsHorizontalScrollIndicator: false,
+  snapToInterval: CARD_WIDTH_SPACING,
+})`
+  margin-top: 20px;
+  height: 250px;
+`;
+
+export const HighlightsContainer = styled.View`
+  margin-top: ${RFValue(15)}px;
+  flex-direction: row;
+  justify-content: space-between;
+  flex-wrap: wrap;
+`;
+
+export const TitleSection = styled.View`
+  margin-top: 10px;
+  width: 100%;
+  justify-content: center;
+  padding: 10px 0;
+`;
+
+export const BannerImageContainer = styled.TouchableOpacity`
+  height: ${RFValue(200)}px;
+  border-radius: ${RFValue(10)}px;
+  background-color: ${({ theme }: any) => theme.colors.secondary};
+`;
+
+export const BannerImage = styled.Image`
+  height: 100%;
+  width: 100%;
+  border-radius: ${RFValue(5)}px;
+`;

package/src/screens/index.ts

@@ -0,0 +1 @@
+export { default as Home } from './Home';

package/src/store/store.ts

@@ -0,0 +1,33 @@
+import { apiSlice } from '@features/api/apiSlice';
+import exampleApiSlice from '@features/example/exampleSlice';
+import {
+  Action,
+  combineReducers,
+  configureStore,
+  ThunkAction,
+} from '@reduxjs/toolkit';
+
+const rootReducer = combineReducers({
+  [apiSlice.reducerPath]: apiSlice.reducer,
+  // Remova os slices de exemplo abaixo e adicione os seus próprios slices
+  example: exampleApiSlice.reducer,
+});
+
+export const setupStore = (preloadedState?: any) => {
+  return configureStore({
+    reducer: rootReducer,
+    preloadedState,
+    middleware: getDefaultMiddleware =>
+      getDefaultMiddleware().concat(apiSlice.middleware),
+  });
+};
+
+export type AppStore = ReturnType<typeof setupStore>;
+export type AppDispatch = AppStore['dispatch'];
+export type RootState = ReturnType<typeof rootReducer>;
+export type AppThunk<ReturnType = void> = ThunkAction<
+  ReturnType,
+  RootState,
+  unknown,
+  Action<string>
+>;

package/src/styles/styled.d.ts

@@ -0,0 +1,8 @@
+import 'styled-components';
+import theme from '@theme/theme';
+
+type Theme = typeof theme;
+
+declare module 'styled-components' {
+  export interface DefaultTheme extends Theme {}
+}

package/src/styles/theme.ts

@@ -0,0 +1,93 @@
+// Arquivo de Design Tokens
+import styled from 'styled-components/native';
+
+export default {
+  colors: {
+    background: {
+      primary: '#1E1E1E',
+    },
+    primary: '#512450',
+    secondary: '#f5aa3b',
+    success: {
+      primary: '#4cc38a',
+      light: '#81c784',
+      dark: '#388e3c',
+    },
+    info: {
+      primary: '#4fc3f7',
+      light: '',
+      dark: '',
+    },
+    warning: '#ffa726',
+    gray: '#8b8989',
+    grayDark: '#121212',
+    lightGray: '#b2b2b2',
+    light: '#fbfbfb',
+    white: '#fff',
+    black: '#000',
+    red: {
+      '50': '#F55C6C',
+      '100': '#c53030',
+    },
+    error: '#c53030',
+    icon: '#F55C6C',
+  },
+  fonts: {
+    light: 'Roboto_300Light',
+    regular: 'Roboto_400Regular',
+    medium: 'Roboto_500Medium',
+    bold: 'Roboto_700Bold',
+    extraBold: 'Roboto_900Black',
+  },
+  spacing: {
+    s: 8,
+    m: 18,
+    l: 20,
+    xl: 40,
+  },
+  sizes: {
+    title: 32,
+    h2: 24,
+    h3: 18,
+    body: 16,
+    radius: 5,
+  },
+  shadow: {
+    light: {
+      shadowColor: '#000',
+      shadowRadius: 4,
+      shadowOpacity: 0.1,
+      shadowOffset: {
+        width: 0,
+        height: 2,
+      },
+    },
+    dark: {
+      shadowColor: '#000',
+      shadowRadius: 4,
+      shadowOpacity: 0.3,
+      shadowOffset: {
+        width: 0,
+        height: 2,
+      },
+    },
+  },
+};
+
+export const Row = styled.View<{
+  justifyContent?: string;
+  alignItems?: string;
+}>`
+  flex-direction: row;
+  justify-content: ${({ justifyContent }: any) => justifyContent || 'initial'};
+  align-items: ${({ alignItems }: any) => alignItems || 'initial'};
+`;
+
+export const Column = styled.View<{
+  justifyContent?: string;
+  alignItems?: string;
+}>`
+  flex-direction: column;
+  justify-content: ${({ justifyContent }: any) => justifyContent || 'initial'};
+  align-items: ${({ alignItems }: any) => alignItems || 'initial'};
+`;

package/src/types/index.ts

@@ -0,0 +1 @@
+export interface SignUpFormData {}

package/tsconfig.json

@@ -0,0 +1,40 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "baseUrl": "./",
+    "jsx": "react-jsx",
+    "paths": {
+      "@src/*": [
+        "./src/*"
+      ],
+      "@assets/*": [
+        "./src/assets/*"
+      ],
+      "@components/*": [
+        "./src/components/*"
+      ],
+      "@features/*": [
+        "./src/features/*"
+      ],
+      "@routes/*": [
+        "./src/routes/*"
+      ],
+      "@screens/*": [
+        "./src/screens/*"
+      ],
+      "@hooks/*": [
+        "./src/hooks/*"
+      ],
+      "@theme/*": [
+        "./src/styles/*"
+      ],
+      "@contexts/*": [
+        "./src/contexts/*"
+      ],
+      "@utils/*": [
+        "./src/utils/*"
+      ]
+    }
+  }
+}