Хедеры и опции экранов

<Stack.Screen
    name="Details"
    component={DetailsScreen}
    options={{
        title: 'Детали',
        headerShown: true,
        headerBackTitle: 'Назад',
        headerBackVisible: true,
        headerTitleAlign: 'center',  // 'left' | 'center'
    }}
/>

options={{
    headerStyle: { backgroundColor: '#c1442e' },
    headerTintColor: '#fff',
    headerTitleStyle: { fontWeight: 'bold', fontSize: 18 },
    headerShadowVisible: false,
    headerTransparent: true,
    headerBlurEffect: 'light',  // 'light' | 'dark' | 'extraLight' | 'regular' | 'prominent' | 'systemMaterial'
}}

options={{
    headerLeft: () => (
        <Pressable onPress={() => navigation.goBack()}>
            <Ionicons name="arrow-back" size={24} />
        </Pressable>
    ),
    headerRight: () => (
        <View style={{ flexDirection: 'row', gap: 16 }}>
            <Pressable onPress={onShare}>
                <Ionicons name="share-outline" size={24} />
            </Pressable>
            <Pressable onPress={onMore}>
                <Ionicons name="ellipsis-horizontal" size={24} />
            </Pressable>
        </View>
    ),
}}

options={{
    headerLargeTitle: true,
    headerLargeTitleStyle: { fontSize: 34, fontWeight: 'bold' },
    headerLargeTitleShadowVisible: false,
}}

options={{
    headerSearchBarOptions: {
        placeholder: 'Поиск',
        onChangeText: (event) => setQuery(event.nativeEvent.text),
        onCancelButtonPress: () => setQuery(''),
        hideWhenScrolling: true,
    },
}}

options={{
    animation: 'slide_from_right',  // 'default' | 'fade' | 'flip' | 'simple_push' | 'slide_from_bottom' | 'slide_from_right' | 'slide_from_left' | 'none'
    animationDuration: 300,
    presentation: 'card',  // 'card' | 'modal' | 'transparentModal' | 'fullScreenModal' | 'containedModal' | 'containedTransparentModal' | 'formSheet'
}}

options={{
    gestureEnabled: true,
    gestureDirection: 'horizontal',  // 'horizontal' | 'vertical'
    fullScreenGestureEnabled: true,
    gestureResponseDistance: 100,
}}

options={{
    statusBarStyle: 'auto',  // 'auto' | 'inverted' | 'light' | 'dark'
    statusBarHidden: false,
    statusBarAnimation: 'fade',
}}

<Stack.Navigator
    screenOptions={{
        headerStyle: { backgroundColor: '#fff' },
        headerTintColor: '#000',
        headerTitleAlign: 'center',
        headerShadowVisible: false,
        contentStyle: { backgroundColor: '#fafafa' },
        animation: 'slide_from_right',
    }}
>

function Screen() {
    const navigation = useNavigation();
    const [count, setCount] = useState(0);

    useLayoutEffect(() => {
        navigation.setOptions({
            title: `Счёт: ${count}`,
            headerRight: () => (
                <Pressable onPress={() => setCount((c) => c + 1)}>
                    <Text>+1</Text>
                </Pressable>
            ),
        });
    }, [navigation, count]);

    return <View />;
}

options={{ headerShown: false }}

options={{ header: (props) => <CustomHeader {...props} /> }}