Tabela de Conteúdo

• Tabela de Conteúdo
• Sobre o Projeto
  • Feito Com
• Começando
  • Pré-requisitos
  • Estrutura de Arquivos
  • Instalação
    • Passo Adicional no Android
• Contribuição
• Licença
• Contato

Sobre o Projeto

Esse projeto tem a intenção de criar um template com as melhores e mais atualizadas tecnologias relacionadas ao react-native já pre-configuradas, para simplesmente você instanciar e já começar a montar seus componentes e telas.

Feito Com

Abaixo segue o que foi utilizado na criação deste template:

• React Native - O React Native é um framework que permite o desenvolvimento de aplicações mobile usando JavaScript e React;

• Redux - O Redux é um contêiner de estado previsível para aplicativos JavaScript. Ele ajuda você a escrever aplicativos que se comportam consistentemente, executados em diferentes ambientes (cliente, servidor e nativo) e são fáceis de testar;

  • Redux Saga - O redux-saga é uma biblioteca que tem como objetivo tornar os efeitos colaterais dos aplicativos mais fáceis de gerenciar, mais eficientes de executar, fáceis de testar e melhores em lidar com falhas;

• React Navigation - O React Navigation surgiu da necessidade comunidade do React Native de uma navegação de forma fácil de se usar, e escrita toda em JavaScript. A versão utilizada, foi a mais recente no momento da criação desse template, a v5;

• React Native Gesture Handler - API declarativa que permite a manipulação de toques e gestos no React Native;

• Axios - O Axios é um cliente HTTP baseado em Promises para Browser e NodeJS;

• Babel - O Babel é um compilador JavaScript gratuito e de código aberto e transpiler configurável usado no desenvolvimento de aplicações JavaScript;

  • babel-eslint - Este pacote é um wrapper do parser do Babel para o ESLint;
  • babel-plugin-root-import - Esse plugin do Babel permite que sejam feitos imports e requires em caminhos baseados em uma raiz(root);

• React Native SVG - A Bibliotec é indicada para quem deseja utilizar vetores em formato svg no react-native. Foi utilizada também a lib react-native-svg-transformer, que serve para utiliza-los como TSX ou JSX ;

• React Native Elements - Biblioteca com diversos componentes prontos para o uso.;

• React Native Vector Icon - Pacote com diversos ícones. Uma forma bacana de verificar como é o nome ou até mesmo procurar algum ícone ó o site https://oblador.github.io/react-native-vector-icons/;

Começando

Para conseguir utilizar o template, seja através do React Native CLI ou com uma cópia local dos arquivos, siga os passos abaixo.

Pré-requisitos

Antes de seguirmos para as configurações e uso do template, é ideal que você tenha o ambiente configurado para criar e testar aplicativos em React Native, para isso você pode seguir o guia do link abaixo:

Ambiente React Native (Android/iOS)

Estrutura de Arquivos

A estrutura de arquivos está da seguinte maneira:

your-project-name
├── src/
│   ├── assets/
│   │   ├── fonts/
│   │   ├── images/
│   │   └── svgs/
│   ├── components/
│   │   ├── atoms/
│   │   │   └── index.ts
│   │   ├── molecules/
│   │   │   └── index.ts
│   │   ├── organims/
│   │   │   └── index.ts
│   │   ├── pages/
│   │   │   └── index.ts
│   │   └── theme/
│   │       └── index.ts
│   ├── hooks/
│   │   └── index.ts
│   ├── services/
│   │   ├── api/
│   │   │   ├── config.ts
│   │   │   └── index.ts
│   │   ├── interfaces/
│   │   ├── models/
│   │   ├── shared/
│   │   └── utils/
│   │       ├── helperFunctions.ts
│   │       ├── index.ts
│   │       ├── sharedStyles.ts
│   │       └── Storage.ts
│   ├── store/
│   │   ├── ducks/
│   │   │   ├── userExample/
│   │   │   │   ├── actions.ts
│   │   │   │   ├── index.ts
│   │   │   │   ├── reducer.ts
│   │   │   │   ├── sagas.ts
│   │   │   │   └── types.ts
│   │   │   ├── rootReducers.ts
│   │   │   └── rootSaga.ts
│   │   ├── helpers/
│   │   │   └── actionsHelper.ts
│   │   └── index.ts
│   ├── index.tsx
│   └── routes.tsx
├── .buckconfig
├── .eslintrc.json
├── .flowconfig
├── .gitattributes
├── .gitignore
├── .prettierrc.js
├── .app.json
├── babel.config.js
├── declarations.d.ts
├── dependencies.json
├── devDependencies.json
├── index.js
├── metro.config.js
├── package.json
├── react-native.config.js
├── tsconfig.json
└── README.md

Instalação

1. Para instalar e utilizar esse template o processo é bem simples, basta criar um projeto novo utilizando o comando:

react-native init YourProjectName --template react-native-template-aws-typescript

2. adicione isso no seu package.json:

{
  ...
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
  },
  "rnpm": {
    "assets": [
      "./src/assets/fonts"
    ]
  },
  "jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
  }
}

3.Substitua o nome em app.json para o nome que você colocou no projeto.

4.Rode o comando abaixo para linkar as fontes do projeto:

react-native link

5.Depois do projeto criado você pode deletar o arquivo App.js da raiz, pois o arquivo index.js agora aponta para a pasta src.

6.Abra o xcode; Clique no projeto no project navigator; Vá até a principal targe; Clique em Build Phases; vá em Copy Bundle Resources; Exclua todas as fontes dos ícones; Deixando apenas o LaunchScreen.storyboard, Images.xcassets e as fonts de texto do seu projeto, Ex: Roboto,etc.

Com isso o projeto será criado com todas as dependências do template devidamente instaladas e linkadas, tal como os arquivos de configuração que são copiados para o projeto.

Passo Adicional no Android

Para que os gestos sejam habilitados no Android é necessário um passo a mais, que é bem simples, abra o arquivo android/app/src/main/java/<pacote_do_projeto>/MainActivity.java, e comece importando os pacotes como abaixo:

// ...
import com.facebook.react.ReactActivity;
// Importações adicionadas
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

Feito a importação vamos criar um método novo, logo abaixo do getMainComponentName(), ficando:

public class MainActivity extends ReactActivity {
  @Override
  protected String getMainComponentName() { ... }
  // Método adicionado
  @Override
  protected ReactActivityDelegate createReactActivityDelegate() {
    return new ReactActivityDelegate(this, getMainComponentName()) {
      @Override
      protected ReactRootView createRootView() {
        return new RNGestureHandlerEnabledRootView(MainActivity.this);
      }
    };
  }
}

Contribuição

Contribuições são o que fazem a comunidade open source um lugar incrível para aprender, inspirar e criar. Qualquer contribuição que você fizer será muito apreciada.

1. Faça um Fork do projeto
2. Crie uma Branch para sua Feature (git checkout -b feature/NomeDaSuaFeature)
3. Adicione suas mudanças (git add .)
4. Comite suas mudanças (git commit -m 'Adicionando uma Feature!)
5. Faça o Push da Branch (git push origin feature/NomeDaSuaFeature)
6. Abra um Pull Request

Licença

Distribuído sob a licença MIT. Veja LICENSE para mais informações.

Contato

Igor Lima Gonçalves - Github - [email protected]