refactor: move Header to elements package

example/App.tsx

@@ -1,10 +1,10 @@
 import 'react-native-gesture-handler';
 import { registerRootComponent } from 'expo';
 import { Asset } from 'expo-asset';
-import { Assets as StackAssets } from '@react-navigation/stack';
+import { Assets } from '@react-navigation/elements';
 
 import App from './src/index';
 
-Asset.loadAsync(StackAssets);
+Asset.loadAsync(Assets);
 
 registerRootComponent(App);

example/src/Screens/AuthFlow.tsx

@@ -4,9 +4,9 @@ import { Title, Button } from 'react-native-paper';
 import { useTheme, ParamListBase } from '@react-navigation/native';
 import {
   createStackNavigator,
-  HeaderBackButton,
   StackScreenProps,
 } from '@react-navigation/stack';
+import { HeaderBackButton } from '@react-navigation/elements';
 
 type AuthStackParams = {
   Splash: undefined;

example/src/Screens/BottomTabs.tsx

@@ -8,6 +8,7 @@ import {
 } from '@react-navigation/native';
 import type { StackScreenProps } from '@react-navigation/stack';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { HeaderBackButton } from '@react-navigation/elements';
 import TouchableBounce from '../Shared/TouchableBounce';
 import Albums from '../Shared/Albums';
 import Contacts from '../Shared/Contacts';
@@ -39,6 +40,7 @@ export default function BottomTabsScreen({
 
   React.useLayoutEffect(() => {
     navigation.setOptions({
+      headerShown: false,
       title: routeName,
     });
   }, [navigation, routeName]);
@@ -46,6 +48,9 @@ export default function BottomTabsScreen({
   return (
     <BottomTabs.Navigator
       screenOptions={{
+        headerLeft: (props) => (
+          <HeaderBackButton {...props} onPress={navigation.goBack} />
+        ),
         tabBarButton:
           Platform.OS === 'web'
             ? undefined
@@ -54,18 +59,12 @@ export default function BottomTabsScreen({
     >
       <BottomTabs.Screen
         name="Article"
+        component={SimpleStackScreen}
         options={{
           title: 'Article',
           tabBarIcon: getTabBarIcon('file-document-box'),
         }}
-      >
-        {(props) => (
-          <SimpleStackScreen
-            {...props}
-            screenOptions={{ headerShown: false }}
-          />
-        )}
-      </BottomTabs.Screen>
+      />
       <BottomTabs.Screen
         name="Chat"
         component={Chat}

example/src/Screens/StackHeaderCustomization.tsx

@@ -13,11 +13,10 @@ import { useTheme, ParamListBase } from '@react-navigation/native';
 import {
   createStackNavigator,
   StackScreenProps,
-  HeaderBackground,
   Header,
   StackHeaderProps,
 } from '@react-navigation/stack';
-import { useHeaderHeight } from '@react-navigation/elements';
+import { HeaderBackground, useHeaderHeight } from '@react-navigation/elements';
 import BlurView from '../Shared/BlurView';
 import Article from '../Shared/Article';
 import Albums from '../Shared/Albums';
@@ -117,6 +116,7 @@ export default function SimpleStackScreen({ navigation, ...rest }: Props) {
   }, [navigation]);
 
   const { colors, dark } = useTheme();
+  const [headerTitleCentered, setHeaderTitleCentered] = React.useState(true);
 
   return (
     <SimpleStack.Navigator {...rest}>
@@ -129,7 +129,7 @@ export default function SimpleStackScreen({ navigation, ...rest }: Props) {
           headerTintColor: '#fff',
           headerStyle: { backgroundColor: '#ff005d' },
           headerBackTitleVisible: false,
-          headerTitleAlign: 'center',
+          headerTitleAlign: headerTitleCentered ? 'center' : 'left',
           headerBackImage: ({ tintColor }) => (
             <MaterialCommunityIcons
               name="arrow-left-circle-outline"
@@ -142,12 +142,13 @@ export default function SimpleStackScreen({ navigation, ...rest }: Props) {
             <Appbar.Action
               color={tintColor}
               icon="dots-horizontal-circle-outline"
-              onPress={() =>
+              onPress={() => {
+                setHeaderTitleCentered((centered) => !centered);
                 Alert.alert(
                   'Never gonna give you up!',
                   'Never gonna let you down! Never gonna run around and desert you!'
-                )
-              }
+                );
+              }}
             />
           ),
         })}