Aplicativo de Envio de Mensagem para WhatsApp 

Objetivo: Crie um aplicativo simples em React Native que permita enviar mensagens diretamente para um número de WhatsApp. O usuário deve inserir um número e uma mensagem, e ao clicar em "Enviar mensagem", o aplicativo deve abrir o WhatsApp e direcionar para o número digitado com a mensagem pronta para ser enviada.

Requisitos da Atividade

1. Entrada de Dados:
• Um campo para o número de telefone (com pelo menos 11 caracteres e começando com 55).
• Um campo para a mensagem.
2. Estrutura dos Componentes:
• Componente Pai: Responsável por gerenciar os estados e a lógica de envio.
• Componente Filho: Responsável por receber os estados do componente pai via props e exibir os campos de entrada.
3. Validação:
• O link deve começar obrigatoriamente com 55.
• O número de telefone deve ter pelo menos 11 caracteres.
• A validação adicional do número deve ser feita diretamente pelo WhatsApp.

Passo a Passo para Realizar a Atividade

1. Criar o Projeto
• Inicie um projeto Expo em branco com o comando expo init WhatsAppMessagingApp.
2. Instalar Dependências Necessárias
• Certifique-se de que você tenha as dependências essenciais instaladas, especialmente o Expo CLI.
3. Configurar os Componentes
• Crie dois componentes:
1. ParentComponent: Componente Pai que controla o estado e a lógica de envio.
2. ChildComponent: Componente Filho que contém os campos de entrada para o número e a mensagem.
4. Implementar o Componente Filho
• Crie o componente que receberá props do Pai para coletar os dados:
• number (prop): Contém o valor do número.
• message (prop): Contém o valor da mensagem.
• onNumberChange (callback): Atualiza o estado do número no Pai.
• onMessageChange (callback): Atualiza o estado da mensagem no Pai.
• Exiba dois campos de entrada:
• Campo de entrada para o número (placeholder: Número (Ex: 5588999991234)).
• Campo de entrada para a mensagem.
5. Implementar o Componente Pai
• Crie o componente principal que mantém o estado:
• Estado para o número (phoneNumber).
• Estado para a mensagem (message).
• Implemente a lógica para abrir o WhatsApp:
• Verifique se o número começa com 55 e tem pelo menos 11 caracteres.
• Construa a URL do WhatsApp utilizando o padrão https://api.whatsapp.com/send?phone=NUMERO&text=MENSAGEM.
• Use a API Linking para abrir o WhatsApp.
• Passe os estados e callbacks para o componente filho através das props.
6. Adicionar Lógica de Envio no Componente Pai
• No método de envio, verifique se o número começa com 55 e tem pelo menos 11 caracteres.
• Utilize a API Linking para abrir o WhatsApp.
7. Estilizar os Componentes
• Adicione estilos simples para os campos de entrada e botões.
8. Testar o Projeto
• Verifique se a mensagem é enviada corretamente ao número de telefone inserido.
• Certifique-se de que a validação funcione corretamente, direcionando para o WhatsApp apenas com números válidos.
9. Conclusão
• Verifique se todos os componentes estão funcionando corretamente.
• Certifique-se de que o conceito de props está sendo usado conforme descrito nos requisitos.

Base no Github
https://github.com/370100961/expo-rn

Enviar código:

https://forms.office.com/r/yCuBQbXGY6