:space_invader: React Native Template 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 (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

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.

🚨 Alerta🚦

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

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.

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' ou 'feather' | | 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://[email protected]/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.

Autor

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

:bookmark: License

This project is MIT licensed.