CODEWITHSUNDEEP
react-nativereact-navigation
kurniawan26
kurniawan26

Reputation: 823

How to customize headerLeft React Navigation?

How can I customize headerLeft TabNavigator of React Navigation.
Here's one of my screens :

headerLeft

I want to remove the Back from the headerLeft
Is it possible ?
Here's my code :

DetailTabs = TabNavigator({
DetailResult:{
    screen:DetailResult,
    navigationOptions:{
        title:'Detail Penginapan',
        headerTitleStyle:{
            fontSize:14,
            textAlign: "center",
            flex: 1,
        },
        tabBarVisible: false,
        headerStyle:{
            backgroundColor:'#4A94FB',
            borderBottomColor: 'transparent',
        },
        headerTintColor: 'white'
    }
}
})

Upvotes: 2

Views: 26687

Answers (5)

Abhishek Dvs
Abhishek Dvs

Reputation: 31

A simple fix here. Add this parameter to your header.

headerBackVisible:false

Hope this helps, cheers!

Upvotes: 0

sworup kc
sworup kc

Reputation: 7

we can customize our headers icon like this by targeting page header.

 useEffect(() => {
    navigation.setOptions({
      title: "hello",
      headerStyle: {
        backgroundColor: "#f4511e",
      },
      headerTintColor: "#fff",
      headerTitleStyle: {
        alignItems: "center",
        fontWeight: "bold",
      },
      headerLeft: () => (
       <Button onPress={handleBackPress}>
         <ArrowLeftCircleIcon className="h-36" size={30} color="black" />
       </Button>
      ),
    });
  }, [navigation]);

Upvotes: 0

Bogdan Kyrychuk
Bogdan Kyrychuk

Reputation: 307

By default, HeaderBackButton component is used. You can implement it and use it to override the back button styles, press props, for example: link to docs

import { HeaderBackButton } from '@react-navigation/stack';

//in newer versions use:
//import {HeaderBackButton} from '@react-navigation/elements';

const styles = StyleSheet.create({
  custom: {
  // Custom styles here
  }
});

<Screen
  name="Home"
  component={HomeScreen}
  options={{
    headerLeft: (props) => (
      <HeaderBackButton
        {...props}
        style={styles.custom}
        onPress={() => {
        // Do something
        }}
      />
    ),
  }}
/>;

If you want full control, you can use your custom back button component, example:

import { CustomBackButton } from 'path/to/custom/component';

<Screen
  name="Home"
  component={HomeScreen}
  options={{
    headerLeft: (props) => (
      <CustomBackButton {...props} />
    ),
  }}
/>;

Upvotes: 5

Gireesh
Gireesh

Reputation: 121

Key is to put this code from where the back button is clicked, not in App.js In sample below, for Icon to work, use import Icon from 'react-native-vector-icons/Feather';

constructor(props) {
    super(props);
    this.state = {
    // what ever
    };

    this.props.navigation.setOptions({
        headerLeft: () => (
            <TouchableOpacity                
            onPress={() => this.props.navigation.navigate('Home')}
        >
         <Icon style = {{paddingLeft : 10}} name="arrow-left" size={26} color="black" />
        </TouchableOpacity>

        ),
    });
}

Upvotes: 1

zkuzmic
zkuzmic

Reputation: 64

You probably just need to set headerBackTitle to null. Check out the docs for headerLeft for more info.

Like this:

DetailTabs = TabNavigator({
DetailResult:{
    screen:DetailResult,
    navigationOptions:{
        title:'Detail Penginapan',
        headerTitleStyle:{
            fontSize:14,
            textAlign: "center",
            flex: 1,
        },
        tabBarVisible: false,
        headerStyle:{
            backgroundColor:'#4A94FB',
            borderBottomColor: 'transparent',
        },
        headerTintColor: 'white',
        headerBackTitle: null,
    }
}
})

Upvotes: 2

Related Questions