how to override the right padding in the header

[JackClown]

Current behavior

there is no method to override the right padding of header , even I custom the header right with option 'headerRight'. I can not make my custom right header button close to the right border of the screen which results in bad experience for button pressing.

I see that left back button can be pressed by the left space. It's close to the left border. so how can make it for the right header button. please help🙏

Expected behavior

some way to override the right padding. react navigation v4 make it.

Reproduction

https://snack.expo.dev/DIC8n43bGDrfLRRvbnNRy?platform=ios

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Packages

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-top-tabs
• @react-navigation/stack
• @react-navigation/native-stack
• react-native-tab-view

Environment

• I've removed the packages that I don't use

package	version
@react-navigation/native	6.1.9
@react-navigation/native-stack	6.9.17
react-native-safe-area-context	4.8.2
react-native-screens	3.29.0
react-native-gesture-handler	2.14.1
react-native	0.73.1

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-top-tabs
• @react-navigation/stack
• react-native-tab-view

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[LukeSchaffel]

Why not wrap your button in a view with negative Margin?

headerRight: () => (
              <View style={{ marginRight: -20 }}>
                <Button
                  onPress={() => alert('This is a button!')}
                  title="Info"
                  color="#00cc00"
                />
              </View>
            ),