React native header left button left margin

Question

I am trying to add left padding or margin to the header left icon which is a back button on the login page. Below is my code, I tried adding headerLeftContainerStyle but it is not working. On the home page the menu icon is perfectly set with a padding from the left, but on the login page the back button is attached with the left side of the screen.

 /**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import Colors from './src/settings/Colors';
import {StyleSheet, StatusBar, Text} from 'react-native';

import Icon from 'react-native-vector-icons/FontAwesome';

import { DrawerContent } from './src/navigation/DrawerContent';
import { TabContent } from './src/navigation/TabContent';

import Login from './src/screens/auth/Login';
import Feedback from './src/screens/Feedback';


const Drawer = createDrawerNavigator();

const App = () => {
return (
    <NavigationContainer>
        <StatusBar barStyle="dark-content" backgroundColor={Colors.primary} />
        <Drawer.Navigator drawerContent={props => <DrawerContent {...props} />} screenOptions={{
            headerShown: true,
            headerTitleAlign: 'center',
            headerStyle: styles.headerBackgroundColor,
            headerTitleStyle: styles.headerTitleStyle,
        }}>
            {/* <Drawer.Screen name="home" component={TabContent} options={{ title: 'DevMuscles' }} /> */}
            <Drawer.Screen name="Home" component={TabContent} />
            <Drawer.Screen name="Feedback" component={Feedback} options={{ title: 'Feedback' }} />
            <Drawer.Screen name="Login" component={Login} options={{ 
                title: 'Login' ,
                headerLeft: () => (
                    <Icon name="arrow-left" size={23} />
                ),
                headerLeftContainerStyle: {
                    screenLeft: 50
                },
            }} />
        </Drawer.Navigator>
    </NavigationContainer>
);
};


export default App;

Answer 1

Fixed it using the below code.

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

headerLeft: (props) => (
                <HeaderBackButton
                  {...props}
                  onPress={() => {
                    // Do something
                  }}
                />
            ),