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!