Como criar botão apagar com React Native
Neste tutorial, será apresentado como criar um botão de apagar no aplicativo com React Native.
Primeiramente, será abordado como criar o CSS do botão no aplicativo.
Em seguida, será explicado como chamar a função no botão com React Native.
Por fim, será demonstrado como enviar o ID do registro com React Native para a API e excluir o registro no banco de dados.
Download do código fonte desenvolvido na aula: Download
Curso React Native e Node.js: Mais Detalhes do Curso
Playlist completa sobre Laravel: Acessar
Receber as aulas gratuitas do curso React Native e Node.js: Acessar
Para começar, é utilizado como base o projeto da aula "Como criar formulário cadastrar no aplicativo com React Native".
Criado o CSS do botão no arquivo "src/styles/custom_adm.js".
export const BtnActionDelete = styled.TouchableOpacity`
margin-top: 15px;
background-color: #dc3545;
width: 100%;
height: 45px;
align-items: center;
justify-content: center;
border-radius: 6px;
border: #f5f5f5;
`;
export const TxtBtnAction = styled.Text`
color: #fff;
font-size: 19px;
`;
Criado o botão chamando a função "deleteUser" no arquivo "src/pages/ViewUser/index.js".
<BtnActionDelete onPress={() => deleteUser(user.id)}>
<TxtBtnAction>
Apagar
</TxtBtnAction>
</BtnActionDelete>
No mesmo arquivo, criada a função que recebe o ID do registro que deve ser excluÃdo e faz uma requisição para a API para realizar a exclusão no banco de dados.
// Apagar o usuário
const deleteUser = async (userId) => {
// Requisição para a API indicando a rota
await api.delete(`/users/${userId}`)
.then((response) => { // Acessar o then quando a API retornar status sucesso
Alert.alert("Sucesso", response.data.mensagem);
// Redirecionar o usuário para tela listar usuários
navigation.navigate('ListUsers');
}).catch((err) => {// Acessar o catch quando a API retornar status erro
if (err.response) { // Acessa o IF quando a API retornar erro
Alert.alert("Ops", err.response.data.mensagem);
} else { // Acessa o ELSE quando a API não responder
Alert.alert("Ops", "Erro: Tente novamente!");
}
});
}
Baixar o código-fonte completo do projeto.
Bom, era isso. Espero que o tutorial tenha sido útil!