App/components/Settings/stack.tsx

import React from 'react'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import Root from './component'
import AccountDetails from './screens/account-details'
import Labs from './screens/labs'
import DetailsScreen from '../ItemDetail/screen'
import { StackParamList } from '../types'
import PlaybackDetails from './screens/playback-details'
import ServerDetails from './screens/server-details'

export const SettingsStack = createNativeStackNavigator<StackParamList>()

export default function Settings(): React.JSX.Element {
	return (
		<SettingsStack.Navigator>
			<SettingsStack.Screen
				name='Settings'
				component={Root}
				options={{
					headerLargeTitle: true,
					headerLargeTitleStyle: {
						fontFamily: 'Aileron-Bold',
					},
				}}
			/>

			<SettingsStack.Screen
				name='Account'
				component={AccountDetails}
				options={{
					title: 'Account',
					headerLargeTitle: true,
					headerLargeTitleStyle: {
						fontFamily: 'Aileron-Bold',
					},
				}}
			/>

			<SettingsStack.Screen name='Server' component={ServerDetails} />

			<SettingsStack.Screen name='Playback' component={PlaybackDetails} />

			<SettingsStack.Screen
				name='Labs'
				component={Labs}
				options={{
					headerLargeTitle: true,
					headerLargeTitleStyle: {
						fontFamily: 'Aileron-Bold',
					},
				}}
			/>

			<SettingsStack.Group screenOptions={{ presentation: 'modal' }}>
				<SettingsStack.Screen
					name='Details'
					component={DetailsScreen}
					options={{
						headerShown: false,
					}}
				/>
			</SettingsStack.Group>
		</SettingsStack.Navigator>
	)
}