# mindhouse-rn-template-typescript

> Clean and minimalist React Native template for a quick start with TypeScript.

Latest version **1.1.2** (published 2021-09-23) · 0 weekly downloads

## Install

```sh
npm install mindhouse-rn-template-typescript
pnpm add mindhouse-rn-template-typescript
yarn add mindhouse-rn-template-typescript
bun add mindhouse-rn-template-typescript
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2021-09-23 |
| First published | 2021-09-19 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 577.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | jrcouto4d |

## Links

- npm: https://www.npmjs.com/package/mindhouse-rn-template-typescript
- npm.io page: https://npm.io/package/mindhouse-rn-template-typescript

## Recent versions

- 1.1.2 (latest) — 2021-09-23
- 1.1.1 — 2021-09-23
- 1.1.0 — 2021-09-23
- 1.0.1 — 2021-09-20
- 1.0.0 — 2021-09-20
- 0.0.4 — 2021-09-20
- 0.0.3 — 2021-09-19

## README

# :space_invader: React Native Template TypeScript

<p>
  <a href="https://github.com/react-native-community/react-native-template-typescript/actions/workflows/npm-publish.yml">
    <img alt="Build Status" src="https://github.com/react-native-community/react-native-template-typescript/actions/workflows/npm-publish.yml/badge.svg" />
  </a>
  <a href="https://github.com/react-native-community/react-native-template-typescript#readme">
    <img alt="Documentation" src="https://img.shields.io/badge/documentation-no-brightgreen.svg" />
  </a>
  <a href="https://github.com/react-native-community/react-native-template-typescript/graphs/commit-activity">
    <img alt="Maintenance" src="https://img.shields.io/badge/Maintained%3F-yes-green.svg" />
  </a>
  <a href="https://github.com/react-native-community/react-native-template-typescript/blob/master/LICENSE">
    <img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-yellow.svg" />
  </a>
</p>

> 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 (Airbnb) eslit, prettier e editorconfig
- redux integrado com redux-saga e redux-persist
- componentes dinâmicos para lidar com textos, inputs, alertas e mensagens do sistema

## :arrow_forward: Usage

```sh
npx react-native init MyApp --template mindhouse-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](https://reactnavigation.org/).



### 🚨 Alerta🚦


```javascript
import React, { useEffect } from 'react';
import { useNotification } from '../../hooks/notifications';

import { Container, Text } from './styles';

const Main: React.FC = () => {
  const { alert } = useNotification();

  useEffect(() => {
    alert({
      title: 'Usuario registrado!!!',
      description: 'Voce ja pode logar no app, deseja fazer isso agora?',    
      buttons: [    
        {
          text: 'SIM',    
          onPress: () => {    
            navigation.navigate('SignIn');    
          },
        },
        {
          text: 'NAO',
          style: 'cancel',
        },
      ],
    });      
  }, [alert]);

  return (
    <Container>
      <Text>Main</Text>
    </Container>
  );
};

export default Main;
```

## Available props

| Name                    | Type      | Default       | Description                                                                                         |
| ----------------------- | --------- | ------------- | --------------------------------------------------------------------------------------------------- |
| title      | string    | **REQUIRED**        | 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**        | Texto do botão                                                   |
| onPress     | func    |          | Ação do botão                                                  |
| style     | string    |          | Estilo do botão, escolha entre 'default' e 'cancel'                                                  |


### 🎲 Notificações toast

```javascript
import React, { useEffect } from 'react';
import { useNotification } from '../../hooks/notifications';

import { Container, Text } from './styles';

const Main: React.FC = () => {
  const { toast } = useNotification();

  useEffect(() => {
    toast({
      type: 'success',
      title: 'SUCESSO!',
      description: 'Você está logado no app',
    }),
  }, [toast]);

  return (
    <Container>
      <Text>Main</Text>
    </Container>
  );
};

export default Main;
```
## Available props

| Name                    | Type      | Default       | Description                                                                                         |
| ----------------------- | --------- | ------------- | --------------------------------------------------------------------------------------------------- |
| type      | string    | 'info' **REQUIRED**        | 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](https://unform.dev/).

```javascript
import React, { useCallback, useRef } from 'react';
import { TextInput, Keyboard } from 'react-native';
import { FormHandles } from '@unform/core';
import { useDispatch } from 'react-redux';

import { useNotification } from '../../hooks/notifications';
import { authRequest } from '../../store/ducks/auth/actions';

import { checkEmailIsValid } from '../../utils/inputValidation';

import { Container, Text, Form, Input, ButtonSubmit } from './styles';

interface dataForm {
  email: string;
  password: string;
}

const SignIn: React.FC = () => {
  const dispatch = useDispatch();
  const { alert } = useNotification();

  const formRef = useRef<FormHandles>(null);
  const inputEmailRef = useRef<TextInput>(null);
  const inputPasswordRef = useRef<TextInput>(null);

  const handleSubmit = useCallback(
    (data: dataForm) => {
      formRef.current?.setErrors({});
      Keyboard.dismiss();

      const emailIsValid = checkEmailIsValid(data.email);

      if (!emailIsValid) {
        alert({
          title: 'Antes de continuar',
          description: 'Digite um email valido',
          buttons: [
            {
              text: 'OK',
              onPress: () => {
                formRef.current?.setErrors({
                  email: 'true',
                });

                inputEmailRef.current?.focus();
              },
            },
          ],
        }),
        
        return;
      }

      if (!data.password) {
        alert({
          title: 'Antes de continuar',
          description: 'A senha do usuario e obrigatoria',
          buttons: [
            {
              text: 'OK',
              onPress: () => {
                formRef.current?.setErrors({
                  password: 'true',
                });

                inputPasswordRef.current?.focus();
              },
            },
          ],
        }),
        
        return;
      }

      dispatch(authRequest({
        email: data.email,
        password: data.password,
      }));
    },
    [alert, dispatch],
  );

  return (
    <Container>
      <Text isType="Bold" isColor="#fff" isSize={2}>
        Faça seu logon
      </Text>

      <Form ref={formRef} onSubmit={handleSubmit}>
        <Input
          ref={inputEmailRef}
          name="email"
          icon={{
            name: 'mail',
            type: 'feather',
            color: '#999',
            colorInFocus: '#7159c1',
          }}
          placeholder="Digite o seu nome"
          placeholderTextColor="rgba(255, 255, 255, 0.2)"
          returnKeyType="next"
          onSubmitEditing={() => inputPasswordRef.current?.focus()}
          checkError={(value, name) => {
            if (name === 'email') {
              if (!value) return false;

              const emailIsValid = checkEmailIsValid(value);

              if (!emailIsValid) return false;
            }

            return true;
          }}
        />

        <Input
          ref={inputPasswordRef}
          name="password"
          icon={{
            name: 'lock',
            type: 'feather',
            color: '#999',
            colorInFocus: '#7159c1',
          }}
          placeholder="Digite o seu nome"
          placeholderTextColor="rgba(255, 255, 255, 0.2)"
          secureTextEntry
          checkError={(value: string, name: string) => {
            if (name === 'password' && !value) return false;
            return true;
          }}
          returnKeyType="send"
          onSubmitEditing={() => formRef.current?.submitForm()}
        />

        <ButtonSubmit onPress={() => formRef.current?.submitForm()}>
          <Text isType="Bold" isColor="#fff" isSize={2}>
            Entrar
          </Text>
        </ButtonSubmit>
      </Form>
    </Container>
  );
};

export default SignIn;

```


## Available props

| Name                    | Type      | Default       | Description                                                                                         |
| ----------------------- | --------- | ------------- | --------------------------------------------------------------------------------------------------- |
| name      | string    | **REQUIRED**        |                                                    |
| icon     | object    |            | Icone do input (react-native-vector-icons)                                                  |
| containerStyle           | style    |       | estilo do container                                                                |
| checkError           | func    |       | verifica a validação do conteúdo quando o input perde foco                                                                |



## Available icon props

| Name                    | Type      | Default       | Description                                                                                         |
| ----------------------- | --------- | ------------- | --------------------------------------------------------------------------------------------------- |
| type      | string    | 'material' **REQUIRED**        | pacote de icones, escolha entre ['material'](https://fonts.google.com/icons) ou ['feather'](https://feathericons.com/)                                                   |
| name     | string    | **REQUIRED**           | nome do icone baseado no pacode definido como type                                                  |
| color           | string    |       | cor do icone                                                                 |
| colorInFocus           | string    |       | cor do icone quando o input estiver em foco                                                                 |

## :computer: Contributing

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

1. Bifurque o repositório https://JRCouto4D@bitbucket.org/JRCouto4D/react-native-typescript-template

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

3. Ao contribuir, você concorda que suas contribuições serão licenciadas sob o [MIT License](https://choosealicense.com/licenses/mit/).



### Autor
---

<a href="https://blog.rocketseat.com.br/author/thiago/">
 <img style="border-radius: 50%;" src="https://avatars.githubusercontent.com/u/59939095?s=400&u=587bf651e10e75f107779ba850d9fe64da5d42f8&v=4" width="100px;" alt=""/>
 <br />
 <sub><b>Jefferson Couto</b></sub></a> <a href="https://www.linkedin.com/in/jefferson-rocha-couto-7a171818b" title="Rocketseat">🚀</a>


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

[![Linkedin Badge](https://img.shields.io/badge/-Jefferson-blue?style=flat-square&logo=Linkedin&logoColor=white&link=https://www.linkedin.com/in/jefferson-rocha-couto-7a171818b)](https://www.linkedin.com/in/jefferson-rocha-couto-7a171818b) 
[![Gmail Badge](https://img.shields.io/badge/-jrcouto4d@gmail.com-c14438?style=flat-square&logo=Gmail&logoColor=white&link=jrcouto4d@gmail.com)](jrcouto4d@gmail.com)

## :bookmark: License

This project is [MIT](LICENSE) licensed.

---
_Source: https://npm.io/package/mindhouse-rn-template-typescript · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._