wip

Author: satya164

src/index.tsx

@@ -21,8 +21,7 @@ export const Assets = Platform.select({
 /**
  * Views
  */
-export { default as HeaderFloating } from './views/Header/HeaderFloating';
-export { default as HeaderScreen } from './views/Header/HeaderScreen';
+export { default as Header } from './views/Header/Header';
 export { default as HeaderTitle } from './views/Header/HeaderTitle';
 export { default as HeaderBackButton } from './views/Header/HeaderBackButton';
 

src/types.tsx

@@ -62,16 +62,6 @@ export type HeaderScene<T> = {
   focused: boolean;
 };
 
-export type HeaderSceneProps<T extends 'float' | 'screen'> = T extends 'float'
-  ? {
-      scenes: HeaderScene<Route>[];
-    }
-  : {
-      scene: HeaderScene<Route>;
-      previous?: HeaderScene<Route>;
-      next?: HeaderScene<Route>;
-    };
-
 export type HeaderOptions = {
   headerTitle?: string;
   headerTitleStyle?: StyleProp<TextStyle>;
@@ -92,13 +82,13 @@ export type HeaderOptions = {
   headerForceInset?: React.ComponentProps<typeof SafeAreaView>['forceInset'];
 };
 
-export type HeaderProps<
-  T extends 'float' | 'screen' = 'float' | 'screen'
-> = HeaderSceneProps<T> & {
-  mode: T;
+export type HeaderProps = {
+  mode: 'float' | 'screen';
   layout: Layout;
+  scenes: HeaderScene<Route>[];
   onGoBack?: (props: { route: Route }) => void;
   getTitle: (props: { route: Route }) => string | undefined;
+  getBackTitle: (props: { route: Route }) => string | undefined;
   styleInterpolator: HeaderStyleInterpolator;
   style?: StyleProp<ViewStyle>;
 };

src/views/Header/HeaderFloating.tsx src/views/Header/Header.tsxsrc/views/Header/HeaderFloating.tsx renamed to src/views/Header/Header.tsx

@@ -4,13 +4,14 @@ import HeaderBar from './HeaderBar';
 import HeaderSegment from './HeaderSegment';
 import { HeaderProps } from '../../types';
 
-type Props = HeaderProps<'float'>;
+type Props = HeaderProps;
 
 export default function HeaderFloating({
   scenes,
   layout,
   onGoBack,
   getTitle,
+  getBackTitle,
   styleInterpolator,
   style,
 }: Props) {
@@ -26,6 +27,8 @@ export default function HeaderFloating({
       style={[style, headerStyle]}
     >
       {scenes.map((scene, i, self) => {
+        const previous = self[i - 1];
+
         const {
           // eslint-disable-next-line @typescript-eslint/no-unused-vars
           headerForceInset,
@@ -40,11 +43,12 @@ export default function HeaderFloating({
             layout={layout}
             scene={scene}
             onGoBack={
-              self[i - 1] && onGoBack
+              previous && onGoBack
                 ? () => onGoBack({ route: scene.route })
                 : undefined
             }
             getTitle={getTitle}
+            getBackTitle={getBackTitle}
             styleInterpolator={styleInterpolator}
             style={[StyleSheet.absoluteFill]}
             {...options}

src/views/Header/HeaderScreen.tsx

@@ -29,9 +29,9 @@ type Props = HeaderOptions & {
   layout: Layout;
   onGoBack?: () => void;
   getTitle: (props: { route: Route }) => string | undefined;
+  getBackTitle: (props: { route: Route }) => string | undefined;
   scene: HeaderScene<Route>;
   previous?: HeaderScene<Route>;
-  next?: HeaderScene<Route>;
   styleInterpolator: HeaderStyleInterpolator;
   style?: StyleProp<ViewStyle>;
 };
@@ -81,11 +81,10 @@ export default class HeaderSegment extends React.Component<Props, State> {
   render() {
     const {
       scene,
-      previous,
-      next,
       layout,
       onGoBack,
       getTitle,
+      getBackTitle,
       headerLeft: left = (props: HeaderBackButtonProps) => (
         <HeaderBackButton {...props} />
       ),
@@ -107,9 +106,7 @@ export default class HeaderSegment extends React.Component<Props, State> {
 
     const { backTitleLayout, titleLayout } = this.state;
     const currentTitle = getTitle({ route: scene.route });
-    const previousTitle = previous
-      ? getTitle({ route: previous.route })
-      : undefined;
+    const previousTitle = getBackTitle({ route: scene.route });
 
     const {
       titleStyle,

src/views/Header/HeaderSegment.tsx

@@ -86,6 +86,18 @@ export default class Stack extends React.Component<Props, State> {
     this.setState({ layout: { width, height } });
   };
 
+  private getBackTitle = ({ route }: { route: Route }) => {
+    const { routes, getTitle } = this.props;
+
+    const i = routes.findIndex(r => r.key === route.key);
+
+    if (routes[i - 1]) {
+      return getTitle({ route: routes[i - 1] });
+    }
+
+    return undefined;
+  };
+
   render() {
     const {
       routes,
@@ -143,6 +155,7 @@ export default class Stack extends React.Component<Props, State> {
               }),
               onGoBack,
               getTitle,
+              getBackTitle: this.getBackTitle,
               styleInterpolator: headerStyleInterpolator,
             })
           : null}
@@ -152,14 +165,15 @@ export default class Stack extends React.Component<Props, State> {
           pointerEvents={layout.height && layout.width ? 'box-none' : 'none'}
         >
           {routes.map((route, index, self) => {
+            const previousRoute = self[index - 1];
+            const nextRoute = self[index - 1];
+
             const focused = focusedRoute.key === route.key;
             const current = progress[route.key];
-            const previous = self[index - 1]
-              ? progress[self[index - 1].key]
-              : undefined;
-            const next = self[index + 1]
-              ? progress[self[index + 1].key]
+            const previous = previousRoute
+              ? progress[previousRoute.key]
               : undefined;
+            const next = nextRoute ? progress[nextRoute.key] : undefined;
 
             return (
               <Card
@@ -199,18 +213,21 @@ export default class Stack extends React.Component<Props, State> {
                   ? renderHeader({
                       mode: 'screen',
                       layout,
-                      scene: {
-                        route,
-                        progress: {
-                          current,
-                          next,
-                          previous,
+                      scenes: [
+                        {
+                          route,
+                          progress: {
+                            current,
+                            next,
+                            previous,
+                          },
+                          focused,
+                          descriptor: getDescriptor({ route }),
                         },
-                        focused,
-                        descriptor: getDescriptor({ route }),
-                      },
+                      ],
                       onGoBack,
                       getTitle,
+                      getBackTitle: this.getBackTitle,
                       styleInterpolator: headerStyleInterpolator,
                     })
                   : null}

src/views/Stack/Stack.tsx

@@ -13,8 +13,7 @@ import {
   HeaderProps,
 } from '../../types';
 import { Platform } from 'react-native';
-import HeaderScreen from '../Header/HeaderScreen';
-import HeaderFlotaing from '../Header/HeaderFloating';
+import Header from '../Header/Header';
 
 type Props = {
   navigation: NavigationProp;
@@ -140,21 +139,16 @@ class StackView extends React.Component<Props, State> {
   private renderHeader = (props: HeaderProps) => {
     const scene =
       props.mode === 'screen'
-        ? (props as HeaderProps<'screen'>).scene
-        : (props as HeaderProps<'float'>).scenes.find(scene => scene.focused);
+        ? props.scenes[0]
+        : props.scenes.find(scene => scene.focused);
 
     const header = scene ? scene.descriptor.options.header : undefined;
 
     if (header !== undefined) {
       return header == null ? null : header(props);
     }
 
-    switch (props.mode) {
-      case 'screen':
-        return <HeaderScreen {...props as HeaderProps<'screen'>} />;
-      case 'float':
-        return <HeaderFlotaing {...props as HeaderProps<'float'>} />;
-    }
+    return <Header {...props} />;
   };
 
   private handleGoBack = ({ route }: { route: Route }) =>