How to return scene with mobile button

Question

The only way my app has to come back from the scene is by the button I created, when I click the back button of my phone the app closes.

Code of the button I created:

<TouchableHighlight
    underlayColor={'#66CDAA'}
    onPress={() => {
    this.props.navigator.pop();
    }}>
        <Image  source={require('../imgs/Voltar.png')}
</TouchableHighlight>

To navigate between the scenes I used the import {Navigator} from 'react-native-deprecated-custom-components'; and after importing the scenes I will navigate I used this code:

 <Navigator
          initialRoute={{id: 'CenaInicial'}}
          renderScene={(route, navigator) => {
            if(route.id === 'CenaInicial')
            {
              return(<CenaInicial navigator={navigator} />);
            }

So I declared all the scenes and in each of them I put the command this.props.navigator.push({ id: 'NomeDaCena' }); to change the scene. The problem is that only this command is not enough to return to the scene with the mobile button.

What I have to do for the back button of the phone make it show the previous scene instead of closing the application?

Answer 1

Hello !

Have you solved this problem yet ? If you are using React-navigation

You can add the following passage to your navigation component constructor:

    import { Platform, BackHandler } from 'react-native';


export class AppWithNavigationState extends Component {

      constructor(props) {
         super(props);
      }

      shouldCloseApp(nav) {
         return nav.index == 0;
      }

      // Esta função valida o SO do usuário, caso o desenvolvimento seja para ambas as plataformas.

      isAndroidApp() {
        return Platform.OS == 'android';
      }
      componentDidMount() {
        // backPress é o evento de Back() executado pelo Hardware.
        BackHandler.addEventListener('backPress', () => {
          if (this.shouldCloseApp(this.props.nav) || !this.isAndroidApp()) return false

          // Caso esteja usando o react-navigation ele vai disparar um evento de navegação (ele integra com o redux)
          this.props.dispatch({
            type: 'Navigation/BACK'
          })

          // ou logo abaixo algum código pra remover sua cena da pilha.
          ... 
              return true
            })
          }

It should be remembered that this solution only applies to Android.

I hope to help.

Answer 2

I may be wrong but I believe that Navigator already does it automatically. By clicking the back button of the phone it shows the previous scene navigator.pop()

What may be happening is that your navigation stack is empty. So, really the application will close.

Maybe the problem is in the method you are using to advance a scene.

I use it as follows:

import { createRouter } from '@exponent/ex-navigation';

import Cena from './screens/Cena';

const Router = createRouter(() => ({
    NomeDaCena: () => Cena})
)

navigator.push(Router.getRoute("NomeDaCena",{prop: 'Valor'}))

If you keep checking that the error is not in advancing the scene, you can try adding Listeners to the physical button of android:

https://facebook.github.io/react-native/docs/backhandler.html

For this just do, on the screens where you want to return the scene if the button is pressed:

  import { BackHandler } from 'react-native';

      {...}

      componentWillMount() {
        BackHandler.addEventListener('hardwareBackPress',() => {
         this.props.navigator.pop();
        });
      }

Edit: If you use Backhandler do not forget to remove Listener when the component is unmounted to avoid multiple calls from navigator.pop():

 componentWillUnmount() {
   BackHandler.removeEventListener('hardwareBackPress',() => {
     this.props.navigator.pop();
   });
 }