Using AppBar with expo router header the back button always showing..

[ahmetskilinc]

When I'm using <AppBar.Header ... /> with Expo Routers tabs and stack layouts, the back button always show.

I am using it like so:
_layout.tsx

export default function Layout() {
	return (
		<Stack screenOptions={{ header: (props) => <Header {...props} /> }}>
			{...}
		</Stack>
	);
}

Header.tsx

const Header = (props: NativeStackHeaderProps | BottomTabHeaderProps) => {
	const Left = props.options.headerLeft || (() => null);
	const Right = props.options.headerRight || (() => null);

	return (
		<Appbar.Header {...props}>
			<Left canGoBack={props.navigation.canGoBack()} />
			{props.navigation.canGoBack() ? (
				<Appbar.BackAction onPress={() => props.navigation.goBack()} />
			) : null}
			<Appbar.Content title={props.options.title} />
			<Right canGoBack={props.navigation.canGoBack()} />
		</Appbar.Header>
	);
};

export default Header;

This is the output I'm getting:

What am I doing wrong? I've tried to search around but cannot find a solution.

[gedu]

Is this a bug from react-native-paper? Are you trying to hide the back arrow button?
Looking at the code, do you know if canGoBack() is returning true? that's why it shows the back button? I think in bottom navigation you can go back because the previous tab is in the history?

{props.navigation.canGoBack() ? (
				<Appbar.BackAction onPress={() => props.navigation.goBack()} />
			) : null}
			```

[ahmetskilinc]

@gedu I think you're right. It's caused by the Tabs from expo-router. Thanks