How to customize headerLeft React Navigation?

Question

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

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'
    }
}
})

Answer 1

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} />
    ),
  }}
/>;