npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-template-pointec-basic

v1.1.41

Published

Template para projetos React Native.

Downloads

37

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

pointecpointec

Keywords

react-nativetemplatepointeceslintprettierreact-navigationbabel-eslintbabel-root-importaxiosvscodestyled-componentseslint-config-airbnb

Readme

Version NPM Download GitHub Issues GitHub Last Commit Licenses

Tabela de conteúdo

Sobre o projeto

Projeto para a criação de um template do React Native. Agilizando na hora de iniciar um novo projeto, facilitando o fluxo de desenvolvimento.

Packages inclusos

O templete inclui os seguites pacotes:

Iniciando

Para utilizar o template, seja através do React Native CLI ou copiando localmente os arquivos, siga as etapas abaixo.

Pré-requisitos

Antes de seguirmos para as configurações e uso do template, é recomendado que você tenha o ambiente configurado para criar e testar aplicativos em React Native. Se você tem, ótimo segue em frente, senão corre pra configurar :)

Estrutura de arquivos

A estrutura dos arquivos está conforme abaixo:

pointec-basic
├── .husky/
│   ├── _/
│   ├── commit-msg
│   ├── pre-commit
│   ├── prepare-commit-msg
├── src/
│   ├── assets/
│   │   ├── pointec_logo.png
│   │   └── [email protected]
│   │   └── [email protected]
│   ├── components/
│   │   └── Details/
│   │       └── index.js
│   │       └── styles.js
│   ├── config/
│   │   └── index.js
│   ├── pages/
│   │   └── Main/
│   │       └── index.js
│   │       └── styles.js
│   ├── routes/
│   │   └── main.routes.js
│   ├── services/
│   │   └── api.js
│   ├── index.js
│   └── routes.js
├── .editorconfig
├── .eslintrc.json
├── .gitignore
├── .prettierrc.js
├── .travis.yml
├── babel.config.js
├── commitlint.config
├── dependencies.json
├── devDependencies.json
├── index.js
├── jsconfig.js
├── LICENSE
├── package.json
└── README.md

Instalação

  1. Para instalar e utilizar esse template o processo é simples, basta criar um projeto novo utilizando o comando:
react-native init MeuTemplate --template pointec-basic
  1. Após o projeto ser criado por completo, você pode deletar o arquivo App.js da raiz, alteramos para o arquivo index.js na pasta src.

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, abra o arquivo android/app/src/main/java/<pacote_do_projeto>/MainActivity.java, e comece importando os pacotes:

// ...
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():

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);
      }
    };
  }
}

Passo adicional para o Husky e Lint-staged

Se você for utilizar o Husky e o Lint-staged, você precisa instalar globalmente/localmente os pacotes:

  • commitizen
  • @commitlint/cli
  • @commitlint/config-conventional
  • cz-conventional-changelog
yarn global add commitizen
yarn global add @commitlint/cli @commitlint/config-conventional
yarn global add cz-conventional-changelog

É possível instalar local ao invés de global.

Você também pode utilizar o NPM para instalar.

Configuração do Husky e Lint-staged

Adicione em seu package.json o seguinte:

  "scripts": {
    "eslintfix": "eslint --fix",
    "prettiercheck": "prettier --write",
    "commit": "git-cz"
  },
  "lint-staged": {
    "*@(js)": [
      "yarn eslintfix",
      "yarn prettiercheck"
    ]
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  }

Há configurações na pasta .husky.

Você pode ajustar o package.json e os arquivos da pasta do .husky conforme as suas necessidades.

Ajustando o commitlint.config

Quando for utilizado a instalação dos pacotes acima globalmente, configurar o arquivo da seguinte forma:

# Alterar o 'C:/Users/Rafael/AppData/Local/Yarn/Data/global/node_modules/'
# Para o caminho do seu usuário e da pasta de instalação

module.exports = {
  extends: ['C:/Users/Rafael/AppData/Local/Yarn/Data/global/node_modules/@commitlint/config-conventional'],
}

Obs.: Solução temporária e não é a melhor forma de corrigir.

Se for feito localmente, utilizar a seguinte configuração:

module.exports = {
  extends: ['@commitlint/config-conventional'],
}

Solução para o erro da issue #613.

Configuração dos Módulos de imports (eslint-plugin-import-helpers)

Para a ordenação automática dos imports, criamos no eslintrc.json um padrão de configuração.

Você pode ajustar conforme as suas necessidades.

Ajuda

Você pode ajudar o projeto, veja abaixo como contribuir.

Contribuição

Se quiser você pode contribuir com o projeto. Contribuições são o que fazem a comunidade open source um lugar incrível. Qualquer contribuição que você fizer será muito bem vinda.

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

Para testar o template de um caminho local, coloque o caminho absoluto junto com o prefixo file://

react-native init MeuTemplate --template file:///Users/DEV/MeusProjetos/react-native-template-pointec-basic

Licença

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

Contato

POINTEC - Github - [email protected]