Navigate back to the homepage

How to remove back button in react navigation?

Infinitbility
React Native, React Navigation
November 11th, 2021 · 1 min read
How to remove back button in react navigation?

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.

1import React from "react";
2import { Image } from "react-native";
3import { createStackNavigator } from "@react-navigation/stack";
4
5import Home from "../screens/Home";
6import About from "../screens/About";
7
8
9const Stack = createStackNavigator();
10
11const screenOptionStyle = {
12 headerStyle: {
13 backgroundColor: "#9AC4F8",
14 },
15 headerTintColor: "white",
16 headerBackTitle: "Back",
17};
18
19const HomeStackNavigator = () => {
20 return (
21 <Stack.Navigator screenOptions={screenOptionStyle}>
22 <Stack.Screen name="Home" component={Home} options={{headerLeft: (props) => null }} />
23 <Stack.Screen name="About" component={About} />
24 </Stack.Navigator>
25 );
26}
27export { HomeStackNavigator };

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

Thanks for reading…

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo

Tutorials

Categories

More articles from Infinitbility

How to create stack navigation with tab navigation in react navigation?

How to create stack navigation with tab navigation in react navigation?

Stack navigator with tab navigator in react navigation example

November 10th, 2021 · 1 min read
How to check empty object in typescript?

How to check empty object in typescript?

Example of check object is empty or not in typescript

November 9th, 2021 · 1 min read
© 2020–2021 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]