:space_invader: Mind House React Native Template Default TypeScript

Modelo React Native para um início rápido com TypeScript.

:star: Features

• navegação com @react-navigation/native v6;
• regras de estilização de codigo com eslit, prettier e editorconfig;
• importações flexíveis com babel-plugin-module-resolver;
• redux integrado com redux-saga, redux-persist e async-storage;
• componentes dinâmicos para lidar com textos, inputs, alertas e mensagens do sistema;

:arrow_forward: Usage

npx react-native init MyApp --template @mindhouse/mind-vision-rn-template-typescript

🚀 Roteamento e Navegação

Essa versão conta com React Navigation 6.0 que mantém basicamente a mesma API principal do React Navigation 5. Ver aqui.

💈 Formatação e estido do código (opcional)

Para melhorar a esperiência com estilização e padronização de código, instale as seguintes extensões no Visual Studio Code:

• EditorConfig for VS Code;
• VS Code ESLint extension;
• Prettier Formatter for Visual Studio Code;
• vscode-styled-components

Ainda no VS Code, abra as User Settings (JSON) e inclua estas linhas:

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},

Neste repositório segue mais sugestões de configurações para o VS Code Ver aqui.

🚨 Notificações

import { useWarning } from '@hooks/warning';

const { toast, alert } = useWarning();

alert({
  title: 'Alerta',
  description: 'Componente personalizado para lidar com Alertas',
  buttons: [
    {
      text: 'Ok',
      onPress: () => {
        //
      },
    },
  ],
});

toast({
  type: 'success',
});

Exemplo

🔗 Acessar código do exemplo

Available Alert props

| Name | Type | Default | Description | | ----------------------- | --------- | ------------- | --------------------------------------------------------------------------------------------------- | | title | string REQUIRED | undefined | Titulo do alerta | | description | string | | Descrição do alerta | | buttons | array | | Lista de botões no alerta |

Available button props

| Name | Type | Default | Description | | ----------------------- | --------- | ------------- | --------------------------------------------------------------------------------------------------- | | text | string REQUIRED | undefined | Texto do botão | | onPress | func | undefined | Ação do botão | | style | string | undefined | Estilo do botão, escolha entre default e cancel |

Available Toast Props

| Name | Type | Default | Description | | ----------------------- | --------- | ------------- | --------------------------------------------------------------------------------------------------- | | layout | string | TOAST | Define o layout da notificação. Escolha entre TOAST e PUSH | type | string REQUIRED | info | Escolha entre error, info e success | | title | string REQUIRED | | Titulo da notificação | | description | string | | Descrição da notificação |

🚧 Formulários

Essa versão lida com formulários usuando a biblioteca @unform.

import React, { useRef } from 'react';
import { View, TextInput as TInput } from 'react-native';
import { Form } from '@unform/mobile';
import { FormHandles } from '@unform/core';

import TextInput from '@components/TextInput';

const formRef = useRef<FormHandles>(null);
const emailInputRef = useRef<TInput>(null);

<View>
  <Form ref={formRef} onSubmit={onSubmit}>
    <TextInput
      ref={emailInputRef}
      name="email"
      textInputProps={{
        placeholder: 'Insira seu e-mail',
      }}
    />
  </Form>
</View>

Exemplo

🔗 Acessar código do exemplo

TextInput Available Props

| Name | Type | Default | Description | | ----------------------- | --------- | ------------- | --------------------------------------------------------------------------------------------------- | | name | string REQUIRED | | | | icon | object | | Icone de referência ao text input | | containerStyle | ViewProps | undefined | Objeto de estilos para container View do React Native | | checkError | func | | verifica a validação do conteúdo quando o input perde foco | | isLoading | boolean | false | Se true, inclue um ActivityIndicator à direita do conteúdo | | inFocusToggleBorderColor | boolean | false | Se true, colore a borda do container quando o usuário põe foco no text input | | mask | string | undefined | máscara de formatação de conteúdo, entre os tipos CPF, CNPJ, CEP, CARD_NUMBER, MM/YY, CVV, DD/MM/YYYY, PHONE | | actionOnBlur | func | undefined | função callback executada após textInput perder foco | | isSecureTextEntry | boolean | false | Se true, torna secreto o value do textInput; inclue botão à direita do contéudo para alternar entre secreto e visível | | textInputProps | TextInputProps | undefined | propriedades referentes ao TextInput do React Native a serem aplicadas |

Icon Available Props

| Name | Type | Default | Description | | ----------------------- | --------- | ------------- | --------------------------------------------------------------------------------------------------- | | type | string REQUIRED | material | pacote de icones, escolha entre 'material' ou 'feather' | | name | string REQUIRED | | nome do icone baseado no pacode definido como type | | color | string | #303031 | cor do icone | | colorInFocus | string | #fb881b | cor do icone quando o input estiver em foco |

💈 Texto

Componente de Text personalizado para facilitar o uso de textos na aplicação. Esta versão usa como padrão Montserrat como font-family.

Text Available Props

| Name | Type | Default | Description | | ----------------------- | --------- | ------------- | --------------------------------------------------------------------------------------------------- | weight | string | Regular | prop font-weight do Text component. Valores possíveis: Bold SemiBold Medium Regular Light | family | string | Montserrat | prop font-family do Text component. | size | number | 14 | prop font-size do Text component | color | string | #333 | Coloração do Text component | loading | boolean | false | Se true, renderiza efeito de loading usando react-native-shimmer-placeholder| textProps | TextProps | undefined | propriedades referentes ao componente Text do React Native a serem aplicadas |

Exemplo

import React from 'react';

import Text from '@components/Text';

const App: React.FC = () => {
  return (
    <Text
      size={18}
      weight="Bold"
      color="#fff"
      textProps={{
        numberOfLines: 1,
      }}>
      Acessar
    </Text>
  )
}

export default App

:computer: Contributing

As contribuições são muito bem-vindas.

1. Bifurque o repositório aqui

2. Emita uma solicitação pull! :tada:

3. Ao contribuir, você concorda que suas contribuições serão licenciadas sob o MIT License.

Autor

🚀🚀 Feito por Jefferson Couto 👋🏽 Entre em contato!

:bookmark: License

This project is MIT licensed.