Meu Primeiro App com React Native - #18 BackHandler

Nesse tutorial aprenderemos como manipular o comportamento do app quando o usuário acionar o botão de voltar do smartphone.

BackHandler Expo

O módulo BackHandler nos fornece a opção de realizar uma ação quando o usuário acionar o botão de voltar do seu celular, assim, podemos por exemplo exibir uma mensagem ou redirecionar o usuário pra determinada screen e assim por diante.

views/arearestrita/AreaRestrita.js

Vamos importar o módulo BackHandler e executar um alerta quando o usuário clicar em voltar:

import {Text, View, Button, BackHandler, Alert} from 'react-native';

useEffect(() => {
    const backAction = () => {
        Alert.alert("Alerta!", "Deseja mesmo sair do app?", [
            {
                text: "Não",
                onPress: () => null,
                style: "cancel"
            },
            { text: "Sim", onPress: () => {
                navigation.navigate('Home');
                BackHandler.exitApp();
                }
            }
        ]);
        return true;
    };

    const backHandler = BackHandler.addEventListener(
        "hardwareBackPress",
        backAction
    );

    return () => backHandler.remove();
}, []);

Por hoje é só! Sucesso nos códigos e na vida!

Precisa de aulas particulares? webdesignemfoco@gmail.com