mindhouse-rn-template-typescript

👾 React Native Template TypeScript

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

⭐ 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

▶️ 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

💻 Contributing

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

1. Bifurque o repositório https://[e-mail]/JRCouto4D/react-native-typescript-template

2. Emita uma solicitação pull! 🎉

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

Autor

---

_{Jefferson Couto} 🚀

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

🔖 License

This project is MIT licensed.