How do I get my app to make use of the Android back button or onPress of a button?

Question

How do I get my app to make use of the Android back button or onPress of a button?

My relevant packages:

"react": "16.13.1",
"react-native": "0.63.4",
"react-navigation": "^4.4.4",
"react-navigation-stack": "^2.10.4"

App.js

import React from "react";
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import incomingCallScreen from "./screens/incomingCall/incomingCallScreen";
import bookingScreen from "./screens/booking/bookingScreen";


const switchNavigator = createSwitchNavigator({
  Loading: LoadingScreen,
  Splash: splashScreen,
  mainFlow: createStackNavigator({
    IncomingCall: incomingCallScreen,
    Booking: bookingScreen
  }),
},
  {
    initialRouteName: 'Loading',
  },
 
  );


const App = createAppContainer(switchNavigator);

export default () => {
  return (
    <App />
  );
};

Then in my BookingScreen, when i click a button, it slides right to the IncomingCall screen, BUT i cant use the back button no Android or the Decline button to slide back. Or go back at all.

My Booking.js screen:

import React, { Component, useEffect } from "react";
import { SafeAreaView, StatusBar, View, Text, StyleSheet, Dimensions, Image, ScrollView, TouchableOpacity } from "react-native";
import { withNavigation } from "react-navigation"; 


function BookingScreen(props)  {

     const today = () => {
        return (

 <View style={{ flexDirection: 'row', }}>
                                    <MaterialIcon
                                        name="call"
                                        size={20}
                                        color={Colors.primaryColor}
                                        onPress={() => props.navigation.push('IncomingCall')}
                                        style={{ alignSelf: 'flex-end', marginLeft: Sizes.fixPadding }}
                                    />
                                </View>

      )
    }

}

export default withNavigation(BookingScreen);

And then in the IncomingCall.js screen:

    import React, {Component, useEffect, useState} from 'react';
    import {View, Text, StyleSheet, ImageBackground, BackHandler, Pressable} from 'react-native';
    import { withNavigation } from "react-navigation";;
    import { TransitionPresets } from 'react-navigation-stack';
    
    function IncomingCallScreen(props) {
    
      
      const onDecline = () => {
        navigation.goBack();
        return true;
      };
    
      return (
    <View style={styles.row}>
            {/* Decline Button */}
            <Pressable onPress={onDecline} style={styles.iconContainer}>
              <View style={styles.iconButtonContainer}>
                <Feather name="x" color="white" size={40} />
              </View>
              <Text style={styles.iconText}>Decline</Text>
            </Pressable>
      )
   }  

    IncomingCallScreen.navigationOptions = () => {
      return {
          header: () => null,
          ...TransitionPresets.SlideFromRightIOS,
      }
    }
    
    export default withNavigation(IncomingCallScreen);

Answer 1

Instead of using navigation.push('IncomingCall') like you are, instead use navigation.navigate('IncomingCall'). This will push the screen onto the stack of screens, you do not have to do it manually. Additionally, every time a user wants to go back a screen, you should use navigation.goBack(), which I see you already are. This should allow Android users to user the physical buttons on their devices.