Hello Friends 👋,

Welcome To Infinitbility! ❤️

This tutorial will help you to remove back button from your react navigation header bar, here we are using react navigation version 6.x.

Let start today tutorial How to remove back button in react navigation?

React Navigation provides headerLeft options to show your custom Ui in header bar but you can also use for remove back button when you pass null on it.

let’s take example of stack navigation screen remove back button.

import React from "react";
import { Image } from "react-native";
import { createStackNavigator } from "@react-navigation/stack";

import Home from "../screens/Home";
import About from "../screens/About";


const Stack = createStackNavigator();

const screenOptionStyle = {
  headerStyle: {
    backgroundColor: "#9AC4F8",
  },
  headerTintColor: "white",
  headerBackTitle: "Back",
};

const HomeStackNavigator = () => {
  return (
    <Stack.Navigator screenOptions={screenOptionStyle}>
      <Stack.Screen name="Home" component={Home} options={{headerLeft: (props) => null }}  />
      <Stack.Screen name="About" component={About} />
    </Stack.Navigator>
  );
}
export { HomeStackNavigator };

Like on above example we have to pass options={{headerLeft: (props) => null }} in stack screens.

Thanks for reading…