How to Disable React Native Back Button

Asked

Viewed 539 times

0

Hello, I would like to know how I disable the return button of the createMaterialTopTabNavigator, from React-Native, in version 5.

inserir a descrição da imagem aqui

I managed to Disable the native button this way:

import React, {useEffect} from 'react';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
import Agenda from '../pages/agenda';
import Pacientes from '../pages/pacientes';
import Exames from '../pages/exames';
import {BackHandler} from 'react-native';

const Tab = createMaterialTopTabNavigator();

export default function SismedRoutes() {
  useEffect(() => {
    BackHandler.addEventListener('hardwareBackPress', () => true);
    return () =>
      BackHandler.removeEventListener('hardwareBackPress', () => true);
  }, []);
  return (
    <Tab.Navigator initialRouteName="Agenda">
      <Tab.Screen name="Agenda" component={Agenda} />
      <Tab.Screen name="Pacientes" component={Pacientes} />
      <Tab.Screen name="Exames" component={Exames} />
    </Tab.Navigator>
  );
}

2 answers

0


///Replace the current navigational status with a new one //index value will be the current active route Remembering that if Voce has three screens and ta in the first, it will not appear the back button pq has nowhere to return, now say Voce is on the login screen want after logging not let the person return through the button to the previous screen, Then that code down would be the right option. Noting also that would have to disable the physical boot too

navigation.reset({ index: 0, Routes: [{ name: 'Profile' }], }); Reference to : https://reactnavigation.org/docs/navigation-prop/#reset

  • Thanks buddy, that’s exactly what I was looking for. Hugs!

-3

Component

import {BackAndroid} from 'react-native'
///pode usar o hook useEffect também
componentDidMount() {
BackAndroid.addEventListener('hardwareBackPress', this.handleBackButton);
}
componentWillUnmount() {
BackAndroid.removeEventListener('hardwareBackPress', this.handleBackButton);
}

function that disables the return butum

handleBackButton() {
return true;
}

More cool content here: https://www.youtube.com/channel/UCl5-W0A8tE3EucM7E_yS62A

  • 1

    But in this case, what would be disabled would be the native button android, right?

Browser other questions tagged

You are not signed in. Login or sign up in order to post.